Error display patterns in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show a simple error message using Flutter's Text widget.

Flutter

return Scaffold(
  body: Center(
    child: Text([1]),
  ),
);

Drag options to blanks, or click blank then click option'

AshowError()

B"Error occurred!"

CText('Error occurred!')

DError occurred!

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Passing a function instead of a string

The Text widget requires a string inside quotes to display text. So, "Error occurred!" is correct.

2fill in blank

medium

Complete the code to display an error icon before the error message.

Flutter

return Scaffold(
  body: Center(
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon([1]),
        SizedBox(width: 8),
        Text('Error loading data'),
      ],
    ),
  ),
);

Drag options to blanks, or click blank then click option'

AIcons.home

BIcons.check

CIcons.error

DIcons.info

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated icons like check or home

Forgetting to import material icons

Icons.error shows a standard error icon, which fits the error message context.

3fill in blank

hard

Fix the error in the code to show a red colored error message.

Flutter

return Scaffold(
  body: Center(
    child: Text(
      'Failed to load',
      style: TextStyle(color: [1]),
    ),
  ),
);

Drag options to blanks, or click blank then click option'

AColors.red

Bred

C"red"

DColor.red

Attempts:

3 left

💡 Hint

Common Mistakes

Using string 'red' instead of Colors.red

Using Color.red which does not exist

Colors.red is the correct way to specify red color in Flutter's Color class.

4fill in blank

hard

Fill both blanks to create a reusable error widget with a red icon and message.

Flutter

Widget errorDisplay() {
  return Row(
    children: [
      Icon([1], color: Colors.red),
      SizedBox(width: 5),
      Text([2], style: TextStyle(color: Colors.red)),
    ],
  );
}

Drag options to blanks, or click blank then click option'

AIcons.error

B"An error occurred"

CIcons.check_circle

D"Success!"

Attempts:

3 left

💡 Hint

Common Mistakes

Using success icons or messages

Mismatched colors or icons

Icons.error and a red error message string create a consistent error display.

5fill in blank

hard

Fill all three blanks to create an error alert with icon, message, and a retry button.

Flutter

return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon([1], size: 48, color: Colors.red),
    Text([2], style: TextStyle(color: Colors.red, fontSize: 18)),
    ElevatedButton(
      onPressed: [3],
      child: Text('Retry'),
    ),
  ],
);

Drag options to blanks, or click blank then click option'

AIcons.error_outline

B"Unable to fetch data"

C() => fetchData()

D() => print('Retry clicked')

Attempts:

3 left

💡 Hint

Common Mistakes

Using success icons or messages

Leaving onPressed null or incorrect

Using wrong icon size or color

Icons.error_outline shows an error icon, the message explains the error, and the button triggers a retry action (here a print statement for demo).