Why state management scales applications in Flutter - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple stateful widget that updates a counter.

Flutter

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

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

  void _increment() {
    setState(() [1]);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(onPressed: _increment, child: Text('Increment')),
      ],
    );
  }
}

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

A_count -= 1

B_count = 0

C_count += 1

Dprint(_count)

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to call setState so UI doesn't update

Resetting _count to 0 inside setState

Using setState with _count += 1 updates the counter and refreshes the UI.

2fill in blank

medium

Complete the code to lift state up by passing a callback to a child widget.

Flutter

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ChildWidget(onPressed: [1]);
  }
}

class ChildWidget extends StatelessWidget {
  final VoidCallback onPressed;
  ChildWidget({required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onPressed, child: Text('Increment'));
  }
}

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

Adispose

BsetState

Cbuild

D_increment

Attempts:

3 left

💡 Hint

Common Mistakes

Passing setState directly instead of the increment method

Calling _increment() instead of passing it as a callback

The parent passes its _increment method as a callback to the child, so the child can trigger state changes.

3fill in blank

hard

Fix the error in this code that tries to update state without calling setState.

Flutter

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void increment() {
    [1];
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(onPressed: increment, child: Text('Increment')),
      ],
    );
  }
}

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

A_count++

BsetState(() { _count++; })

Cprint(_count)

Dreturn _count + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Incrementing _count without setState so UI doesn't refresh

Using print instead of updating state

State changes must be wrapped in setState to update the UI properly.

4fill in blank

hard

Fill both blanks to create a provider that shares state across widgets.

Flutter

class CounterModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: [2],
    ),
  );
}

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

AnotifyListeners()

BsetState()

CMyApp()

DMaterialApp()

Attempts:

3 left

💡 Hint

Common Mistakes

Using setState inside model instead of notifyListeners

Not wrapping the app widget with the provider

Calling notifyListeners() tells widgets to rebuild. MyApp() is the root widget wrapped by the provider.

5fill in blank

hard

Fill all three blanks to consume the provider state and update UI.

Flutter

class CounterDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterModel>(context, listen: [1]);
    return Column(
      children: [
        Text('Count: ${counter.[2]'),
        ElevatedButton(
          onPressed: counter.[3],
          child: Text('Increment'),
        ),
      ],
    );
  }
}

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

Atrue

Bfalse

Ccount

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Setting listen to false so UI doesn't update

Using wrong property names for count or increment

Listening is true to rebuild on changes. Access count to show value and call increment to update.