Error handling for network calls in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Handling network error UI feedback

You have a Flutter app that fetches data from the internet. Which option correctly shows a simple error message on the screen when the network call fails?

Flutter

Future<String> fetchData() async {
  throw Exception('Network error');
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late Future<String> data;

  @override
  void initState() {
    super.initState();
    data = fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: data,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('Error occurred');
        } else if (snapshot.hasData) {
          return Text(snapshot.data!);
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

A Use FutureBuilder and check snapshot.hasError to show Text('Error occurred')

B Use try-catch inside build() method to catch error and show Text('Error occurred')

C Wrap fetchData() call in setState and catch error to show Text('Error occurred')

D Ignore errors and always show CircularProgressIndicator()

💡 Hint

FutureBuilder has a property to detect errors from the future.

FutureBuilder's snapshot.hasError is the correct way to detect and show errors from async calls in Flutter UI.

🧠 Conceptual

intermediate

Understanding try-catch with async network calls

What happens if you do not use try-catch when awaiting a network call that throws an exception in Flutter?

Flutter

Future<String> fetchData() async {
  throw Exception('Network failure');
}

void load() async {
  var result = await fetchData();
  print(result);
}

A The app will crash unless the error is caught somewhere else

B The error is ignored and result is null

C The app shows a default error message automatically

D The network call retries automatically

💡 Hint

Think about what happens when an exception is not caught in async code.

If an exception is not caught, it propagates and can crash the app unless handled higher up.

❓ lifecycle

advanced

Properly cancelling network calls on widget disposal

You start a network call in initState() of a StatefulWidget. What is the best way to avoid updating the UI after the widget is disposed?

Flutter

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late Future<String> data;

  @override
  void initState() {
    super.initState();
    data = fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(future: data, builder: (context, snapshot) {
      if (snapshot.hasData) return Text(snapshot.data!);
      return CircularProgressIndicator();
    });
  }

  @override
  void dispose() {
    super.dispose();
  }
}

A Call setState(null) in dispose() to clear UI updates

B No action needed, Flutter handles it automatically

C Use a CancelableOperation or check mounted before calling setState

D Call data.cancel() in dispose() to stop the future

💡 Hint

Widgets can be disposed before async calls finish, causing errors if UI updates happen.

Checking if the widget is still mounted before calling setState or using cancellable futures prevents errors after disposal.

📝 Syntax

advanced

Identify the error in this network call error handling code

What error does this Flutter code produce when fetchData throws an exception?

Flutter

Future<String> fetchData() async {
  throw Exception('Failed');
}

void loadData() async {
  try {
    var data = fetchData();
    print(data);
  } catch (e) {
    print('Error caught');
  }
}

A Runtime error because fetchData is not awaited

B Catches the error and prints 'Error caught'

C SyntaxError due to missing await keyword

D Prints Instance of 'Future<String>' instead of data

💡 Hint

Look carefully at how fetchData() is called inside try block.

Without await, fetchData() returns a Future immediately, so print prints the Future object, not the data or error.

🔧 Debug

expert

Debugging silent failure in network call error handling

A Flutter app uses this code to fetch data and show errors. But when the network fails, no error message appears and the loading spinner stays forever. What is the cause?

Flutter

Future<String> fetchData() async {
  throw Exception('Network down');
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late Future<String> data;

  @override
  void initState() {
    super.initState();
    data = fetchData().catchError((e) {
      print('Caught error');
    });
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: data,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('Error occurred');
        } else if (snapshot.hasData) {
          return Text(snapshot.data!);
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

A FutureBuilder does not support catchError on futures

B catchError returns a Future that completes successfully, hiding the error from FutureBuilder

C The error is thrown twice causing FutureBuilder to ignore it

D The CircularProgressIndicator blocks error display

💡 Hint

catchError can transform the Future result and affect error propagation.

Using catchError without rethrowing converts the Future to a successful one, so FutureBuilder never sees an error and shows loading forever.

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