StatefulWidget in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a StatefulWidget class named MyWidget.

Flutter

class MyWidget extends [1] {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

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

AStatefulWidget

BStatelessWidget

CWidget

DInheritedWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Using StatelessWidget instead of StatefulWidget.

Forgetting to extend any widget class.

The class must extend StatefulWidget to create a widget that can change its state.

2fill in blank

medium

Complete the code to define the State class for MyWidget.

Flutter

class _MyWidgetState extends [1]<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

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

AState

BStatelessWidget

CWidget

DStatefulWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Extending StatefulWidget instead of State.

Not specifying the generic type.

The State class must extend State with the widget type as a generic parameter.

3fill in blank

hard

Fix the error in the setState call to update the counter.

Flutter

int counter = 0;

void increment() {
  [1](() {
    counter++;
  });
}

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

Arebuild

Brefresh

CupdateState

DsetState

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong method name like updateState or refresh.

Not calling setState at all.

Use setState to tell Flutter the state changed and the UI should update.

4fill in blank

hard

Fill both blanks to complete the StatefulWidget and its State class skeleton.

Flutter

class MyCounter extends [1] {
  @override
  [2]<MyCounter> createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

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

AStatefulWidget

BStatelessWidget

CState

DWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up StatefulWidget and State in the wrong places.

Forgetting to override createState.

The widget class extends StatefulWidget, and the createState method returns a State object.

5fill in blank

hard

Fill all three blanks to complete a StatefulWidget that updates a counter on button press.

Flutter

class CounterWidget extends [1] {
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int count = 0;

  void increment() {
    [2](() {
      count [3] 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: increment,
      child: Text('Count: $count'),
    );
  }
}

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

AStatefulWidget

BsetState

C+=

DStatelessWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Using StatelessWidget instead of StatefulWidget.

Forgetting to call setState.

Using '=' instead of '+=' to increment.

The widget extends StatefulWidget. The setState method updates the UI, and += increments the count.