Error handling for network calls in Flutter

Introduction

Network calls can fail for many reasons like no internet or server problems. Handling errors helps your app stay friendly and avoid crashes.

When fetching data from the internet like loading user info or images.

When sending data to a server, for example submitting a form.

When your app depends on online services and you want to show messages if something goes wrong.

When you want to retry a request if it fails the first time.

When you want to show a loading spinner and then either data or an error message.

Syntax

Flutter

try {
  final response = await http.get(Uri.parse('https://example.com'));
  if (response.statusCode == 200) {
    // process data
  } else {
    // handle server error
  }
} catch (e) {
  // handle network or parsing error
}

Use try-catch to catch errors that happen during the network call.

Check response.statusCode to see if the server responded successfully.

Examples

This example tries to get data and prints messages for success, server error, or network error.

Flutter

try {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode == 200) {
    print('Data loaded');
  } else {
    print('Server error: ' + response.statusCode.toString());
  }
} catch (e) {
  print('Network error: ' + e.toString());
}

This example shows catching an error when the URL is bad or unreachable.

Flutter

try {
  final response = await http.get(Uri.parse('https://badurl'));
  // This will throw and go to catch
} catch (e) {
  print('Failed to connect: ' + e.toString());
}

Sample App

This Flutter app shows a message on screen. When you tap the button, it tries to load data from the internet. It updates the message to show loading, success, server error, or network error.

Flutter

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: NetworkExample());
  }
}

class NetworkExample extends StatefulWidget {
  const NetworkExample({super.key});

  @override
  State<NetworkExample> createState() => _NetworkExampleState();
}

class _NetworkExampleState extends State<NetworkExample> {
  String _message = 'Press button to load data';

  Future<void> _loadData() async {
    setState(() {
      _message = 'Loading...';
    });
    try {
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
      if (response.statusCode == 200) {
        setState(() {
          _message = 'Data loaded successfully!';
        });
      } else {
        setState(() {
          _message = 'Server error: ${response.statusCode}';
        });
      }
    } catch (e) {
      setState(() {
        _message = 'Network error: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Network Error Handling')),
      body: Center(child: Text(_message, textAlign: TextAlign.center)),
      floatingActionButton: FloatingActionButton(
        onPressed: _loadData,
        tooltip: 'Load Data',
        child: const Icon(Icons.cloud_download),
      ),
    );
  }
}

Important Notes

Always update UI inside setState() when using StatefulWidget.

Network errors include no internet, timeout, or bad URLs.

Server errors mean the server responded but with an error code like 404 or 500.

Summary

Use try-catch to handle errors during network calls.

Check response.statusCode to handle server responses properly.

Show friendly messages to users when errors happen.

Practice

1. What is the main purpose of using try-catch blocks in Flutter network calls?

easy

A. To automatically retry the network call

B. To speed up the network request

C. To catch and handle errors that may occur during the network request

D. To format the response data

Solution

1. Step 1: Understand the role of try-catch

   The try-catch block is used to catch exceptions or errors that happen during code execution, such as network failures.

2. Step 2: Apply this to network calls

   Network calls can fail due to no internet or server issues, so try-catch helps handle these errors gracefully.

3. Final Answer:

   To catch and handle errors that may occur during the network request -> Option C

4. Quick Check:

   try-catch handles errors = A [OK]

Hint: Try-catch is for catching errors during network calls [OK]

Common Mistakes:

• Thinking try-catch speeds up requests
• Assuming try-catch retries calls automatically
• Using try-catch to format data

2. Which of the following is the correct syntax to catch exceptions in a Flutter network call?

easy

A. try { await http.get(url); } catch (e) { print(e); }

B. try await http.get(url) catch (e) { print(e); }

C. catch (e) { await http.get(url); }

D. http.get(url).try { } catch (e) { print(e); }

Solution

1. Step 1: Recall correct try-catch syntax in Dart

   The try block wraps the code that might throw an error, followed by catch to handle it.

2. Step 2: Check each option

   try { await http.get(url); } catch (e) { print(e); } correctly uses try { await ... } catch (e) { ... } syntax. Others have syntax errors or misplaced keywords.

3. Final Answer:

   try { await http.get(url); } catch (e) { print(e); } -> Option A

4. Quick Check:

   Correct try-catch syntax = B [OK]

Hint: Try-catch wraps code in braces with catch after [OK]

Common Mistakes:

• Omitting braces {} around try block
• Placing await outside try block
• Misplacing catch block

3. Given this code snippet, what will be printed if the server returns status code 404?

try {
  final response = await http.get(Uri.parse('https://example.com/data'));
  if (response.statusCode == 200) {
    print('Success');
  } else {
    print('Failed with status: ' + response.statusCode.toString());
  }
} catch (e) {
  print('Error: ' + e.toString());
}

medium

A. Success

B. No output

C. Error: Exception message

D. Failed with status: 404

Solution

1. Step 1: Analyze the response status code check

   The code checks if statusCode is 200 to print 'Success', else prints failure with status code.

2. Step 2: Apply given status code 404

   Since 404 is not 200, the else block runs printing 'Failed with status: 404'.

3. Final Answer:

   Failed with status: 404 -> Option D

4. Quick Check:

   Non-200 status prints failure message = D [OK]

Hint: Non-200 status triggers else block message [OK]

Common Mistakes:

• Assuming 404 triggers catch block
• Expecting 'Success' for any status
• Ignoring else block

4. Identify the error in this Flutter network call code:

try {
  final response = await http.get('https://example.com');
  if (response.statusCode == 200) {
    print('Data loaded');
  }
} catch (e) {
  print('Error: ' + e.toString());
}

medium

A. Missing await keyword before http.get

B. http.get requires a Uri object, not a String

C. No catch block to handle errors

D. No print statement inside try block

Solution

1. Step 1: Check http.get parameter type

   In Flutter, http.get expects a Uri object, not a plain String.

2. Step 2: Identify the error in the code

   The code passes a String directly, which causes a type error at runtime.

3. Final Answer:

   http.get requires a Uri object, not a String -> Option B

4. Quick Check:

   http.get needs Uri, not String = A [OK]

Hint: Use Uri.parse() to convert String to Uri [OK]

Common Mistakes:

• Passing URL as String directly to http.get
• Forgetting to use Uri.parse()
• Assuming catch block is missing

5. You want to show a friendly message to users when a network call fails due to no internet. Which approach is best in Flutter?

hard

A. Use try-catch to catch exceptions and show a SnackBar with a friendly message

B. Ignore errors and let the app crash to detect bugs

C. Only check response.statusCode without try-catch

D. Use a timer to retry the call without informing the user

Solution

1. Step 1: Understand user experience on network failure

   Users should see a clear message when network fails, not a crash or silent failure.

2. Step 2: Use try-catch and UI feedback

   try-catch catches exceptions like no internet, and showing a SnackBar informs users kindly.

3. Final Answer:

   Use try-catch to catch exceptions and show a SnackBar with a friendly message -> Option A

4. Quick Check:

   Catch errors + show message = C [OK]

Hint: Catch errors and notify user with SnackBar [OK]

Common Mistakes:

• Ignoring errors causing app crashes
• Not informing users about network issues
• Relying only on statusCode without catching exceptions