setState for local state in Flutter - Mini App: Build & Ship

Build: Counter Screen

A simple screen that shows a number and a button. When the button is pressed, the number increases by one using setState to update the UI.

Target UI

-------------------
|   Counter: 0    |
|                 |
|  [ Increment ]  |
-------------------

Display a number starting at 0

Add a button labeled 'Increment'

When the button is pressed, increase the number by 1

Use setState to update the displayed number

Starter Code

Flutter

import 'package:flutter/material.dart';

class CounterScreen extends StatefulWidget {
  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Counter: $_counter', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // TODO: Add code to increment counter using setState
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

class CounterScreen extends StatefulWidget {
  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Counter: $_counter', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _counter += 1;
                });
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses a StatefulWidget to hold a local integer state called _counter. The setState method is called inside the button's onPressed callback to tell Flutter that the state changed. Inside setState, we increase _counter by 1. Flutter then rebuilds the UI, showing the updated number. This is the basic way to update local state and refresh the UI in Flutter.

Final Result

Completed Screen

-------------------
|   Counter: 1    |
|                 |
|  [ Increment ]  |
-------------------

User taps the 'Increment' button

The number shown after 'Counter:' increases by 1 each tap

Stretch Goal

Add a 'Reset' button that sets the counter back to zero

💡 Hint

Add another ElevatedButton below the Increment button. In its onPressed, call setState and set _counter to 0.