Loading and error states in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Loading Indicator Visibility

What will be displayed on the screen when the isLoading variable is true in this Flutter widget?

Flutter

class LoadingWidget extends StatelessWidget {
  final bool isLoading;
  LoadingWidget({required this.isLoading});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: isLoading ? CircularProgressIndicator() : Text('Content Loaded'),
    );
  }
}

A A spinning circular progress indicator is shown.

B A blank screen is shown.

C The text 'Content Loaded' is shown.

D An error message is shown.

💡 Hint

Check what widget is returned when isLoading is true.

When isLoading is true, the widget shows a CircularProgressIndicator, which is a spinning circle indicating loading.

❓ ui_behavior

intermediate

Error Message Display

Given this Flutter widget, what text will appear if hasError is true?

Flutter

class ErrorWidgetExample extends StatelessWidget {
  final bool hasError;
  ErrorWidgetExample({required this.hasError});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: hasError ? Text('Failed to load data') : Text('Data loaded successfully'),
    );
  }
}

A Nothing is shown.

B The text 'Data loaded successfully' is shown.

C A loading spinner is shown.

D The text 'Failed to load data' is shown.

💡 Hint

Look at the condition that controls which text is shown.

When hasError is true, the widget shows the error message text.

❓ lifecycle

advanced

State Update After Async Load

In this Flutter stateful widget, what happens if setState is not called after data is loaded asynchronously?

Flutter

class DataLoader extends StatefulWidget {
  @override
  _DataLoaderState createState() => _DataLoaderState();
}

class _DataLoaderState extends State<DataLoader> {
  bool isLoading = true;
  String data = '';

  @override
  void initState() {
    super.initState();
    loadData();
  }

  Future<void> loadData() async {
    await Future.delayed(Duration(seconds: 2));
    data = 'Loaded Data';
    // Missing setState here
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: isLoading ? CircularProgressIndicator() : Text(data),
    );
  }
}

A The loading spinner will never disappear and data will not show.

B The data text will appear immediately without loading spinner.

C The app will crash with an error.

D The loading spinner will disappear but data text will be empty.

💡 Hint

Think about what triggers the UI to update in Flutter stateful widgets.

Without calling setState, Flutter does not know the state changed, so the UI stays showing the loading spinner.

❓ navigation

advanced

Error Screen Navigation

Which code snippet correctly navigates to an error screen when an error occurs during data loading in Flutter?

Flutter

Future<void> loadData(BuildContext context) async {
  try {
    await fetchData();
  } catch (e) {
    // Navigate to error screen
  }
}

A Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => ErrorScreen()));

B Navigator.pop(context, MaterialPageRoute(builder: (_) => ErrorScreen()));

C Navigator.push(context, MaterialPageRoute(builder: (_) => ErrorScreen()));

D Navigator.pushNamed(context, '/error');

💡 Hint

Use navigation to add a new screen on top of the current one.

Using Navigator.push adds the error screen on top, showing it to the user.

🧠 Conceptual

expert

Best Practice for Loading and Error States

Which approach best improves user experience when handling loading and error states in a Flutter app?

A Show a blank screen until data loads, then show content or crash on error.

B Show a loading spinner during data fetch, then show content or an error message with retry option.

C Show content immediately and update silently without any loading or error indicators.

D Show an error message first, then load data in the background without user feedback.

💡 Hint

Think about clear communication and giving users control.

Showing a spinner during loading and an error message with retry improves clarity and user control.