StatefulWidget in Flutter - Mini App: Build & Ship

Build: Counter Screen

A simple screen that shows a number and a button to increase it. The number updates when the button is pressed.

Target UI

-------------------
|   Counter: 0    |
|                 |
|   [ Increase ]  |
-------------------

Use a StatefulWidget to hold the counter state

Display the current count in the center

Add a button labeled 'Increase' below the count

When the button is pressed, increase the count by 1 and update the display

Starter Code

Flutter

import 'package:flutter/material.dart';

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

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

  void _increment() {
    // TODO: Increase the count and update UI
  }

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

Task 1

Solution

Flutter

import 'package:flutter/material.dart';

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

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

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

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

This app uses a StatefulWidget because the number shown changes when the user taps the button. The _count variable holds the current number. When the button is pressed, the _increment method calls setState() to tell Flutter to update the UI with the new count. This is how Flutter knows to redraw the screen with the updated number.

The UI shows the count in a large text and a button labeled 'Increase' below it. Pressing the button increases the count by 1.

Final Result

Completed Screen

-------------------
|   Counter: 1    |
|                 |
|   [ Increase ]  |
-------------------

User taps 'Increase' button

Counter number increases by 1 and updates on screen

Stretch Goal

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

💡 Hint

Create another button below 'Increase' that calls setState() to set _count to 0