Error display patterns in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Displaying error messages in Flutter widgets

Which option correctly displays a red error message below a TextField when the input is invalid?

Flutter

TextField(
  decoration: InputDecoration(
    labelText: 'Email',
    errorText: isValid ? null : 'Invalid email address',
  ),
)

A TextField(decoration: InputDecoration(labelText: 'Email', errorText: isValid ? null : 'Invalid email address'))

B TextField(decoration: InputDecoration(labelText: 'Email', errorText: isValid))

C TextField(decoration: InputDecoration(labelText: 'Email', errorText: 'Invalid email address'))

D TextField(decoration: InputDecoration(labelText: 'Email', errorText: isValid ? 'Error' : null))

💡 Hint

The errorText should be null when there is no error to hide the message.

Option A correctly sets errorText to null when input is valid, so no error message shows. When invalid, it shows the red error message below the TextField. Other options either show error always or use wrong types.

❓ lifecycle

intermediate

Handling error state updates in Flutter StatefulWidget

In a StatefulWidget, which method should you call to update the UI after setting an error message string in the state?

Flutter

setState(() {
  errorMessage = 'Network error';
});

A refresh(() { errorMessage = 'Network error'; });

B setState(() { errorMessage = 'Network error'; });

C updateUI(() { errorMessage = 'Network error'; });

D rebuild(() { errorMessage = 'Network error'; });

💡 Hint

Flutter uses a special method to notify the framework about state changes.

Only setState is the correct Flutter method to update the UI after changing state variables. Other methods do not exist in Flutter.

🔧 Debug

advanced

Identifying error in Flutter error display code

What error will this Flutter code cause? TextField( decoration: InputDecoration( labelText: 'Username', errorText: errorMessage, ), ) where errorMessage is a boolean variable.

Flutter

bool errorMessage = true;

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    errorText: errorMessage,
  ),
)

A Runtime error: NullPointerException

B No error, displays error message 'true'

C SyntaxError: missing quotes around errorMessage

D TypeError: errorText expects a String or null, but got bool

💡 Hint

Check the expected type of errorText property.

errorText must be a String or null. Passing a boolean causes a type error at runtime.

❓ navigation

advanced

Error handling during navigation in Flutter

Which option correctly shows an error dialog if navigation to a new screen fails?

Flutter

try {
  await Navigator.pushNamed(context, '/details');
} catch (e) {
  showDialog(context: context, builder: (_) => AlertDialog(title: Text('Error'), content: Text('Failed to open screen')));
}

A Navigator.pushNamed(context, '/details').then((_) {}, onError: (e) => showDialog(context: context, builder: (_) => AlertDialog(title: Text('Error'), content: Text('Failed to open screen'))));

B Navigator.pushNamed(context, '/details').catchError((e) => showDialog(context: context, builder: (_) => AlertDialog(title: Text('Error'), content: Text('Failed to open screen'))));

C try { await Navigator.pushNamed(context, '/details'); } catch (e) { showDialog(context: context, builder: (_) => AlertDialog(title: Text('Error'), content: Text('Failed to open screen'))); }

D Navigator.pushNamed(context, '/details').onError((e) => showDialog(context: context, builder: (_) => AlertDialog(title: Text('Error'), content: Text('Failed to open screen'))));

💡 Hint

Use try-catch with async-await for error handling in Flutter navigation.

Option C uses try-catch with await correctly. Option C and C use catchError or then with onError but Navigator.pushNamed returns a Future, so catchError works but only if awaited or returned. Option C uses a non-existent onError method.

🧠 Conceptual

expert

Best practice for error display patterns in Flutter apps

Which approach is best to show error messages consistently across multiple screens in a Flutter app?

A Create a reusable ErrorDisplay widget and use it wherever errors need to be shown

B Write separate error message code in each screen widget manually

C Use print statements to show errors in the console only

D Ignore errors and let the app crash to detect issues

💡 Hint

Think about code reuse and consistent UI design.

Creating a reusable ErrorDisplay widget ensures consistent look and behavior for errors across the app. Writing separate code duplicates effort and risks inconsistency. Printing errors to console is not user-friendly. Ignoring errors harms user experience.