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.