Loading and error states in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show a loading spinner while data is loading.

Flutter

return Center(child: CircularProgressIndicator[1]);

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

A;

B[]

C{}

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting parentheses after CircularProgressIndicator

Using brackets or braces instead of parentheses

The CircularProgressIndicator widget requires parentheses to be called as a constructor.

2fill in blank

medium

Complete the code to display an error message when loading fails.

Flutter

return Center(child: Text('Error: $[1]'))

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

AerrorMessage

Bdata

Cloading

DloadingSpinner

Attempts:

3 left

💡 Hint

Common Mistakes

Using the loading variable instead of error message

Using data variable which is not an error

The variable errorMessage holds the error text to show to the user.

3fill in blank

hard

Fix the error in the code to show loading or error states correctly.

Flutter

if (isLoading) {
  return CircularProgressIndicator[1];
} else if (hasError) {
  return Text(errorMessage);
}

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

A[]

B{}

C()

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Missing parentheses after CircularProgressIndicator

Using semicolon instead of parentheses

CircularProgressIndicator must be called with parentheses to create the widget instance.

4fill in blank

hard

Fill both blanks to show a loading spinner or an error message with a retry button.

Flutter

if (isLoading) {
  return Center(child: CircularProgressIndicator[1]);
} else if (hasError) {
  return Column(
    children: [
      Text(errorMessage),
      ElevatedButton(onPressed: [2], child: Text('Retry'))
    ],
  );
}

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

A()

BretryLoadData

Cnull

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Passing null or false to onPressed disables the button

Forgetting parentheses on CircularProgressIndicator

The CircularProgressIndicator needs parentheses. The retry button's onPressed should call the retryLoadData function.

5fill in blank

hard

Fill all three blanks to create a widget that shows loading, error, or data states.

Flutter

Widget buildContent() {
  if ([1]) {
    return Center(child: CircularProgressIndicator[2]);
  } else if ([3]) {
    return Text(errorMessage);
  } else {
    return Text(data);
  }
}

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

AisLoading

B()

ChasError

DisReady

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variables for conditions

Missing parentheses on CircularProgressIndicator

Use isLoading to check loading state, call CircularProgressIndicator with parentheses, and check hasError for errors.