Why state management scales applications in Flutter - Build It to Prove It

Build: Counter App with State Management

A simple counter app that shows how using state management helps keep the app organized and scalable as it grows.

Target UI

Counter App

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

Display a counter number starting at 0

Add a button labeled 'Increment' that increases the counter by 1 when tapped

Use Flutter's state management (StatefulWidget) to update the UI

Show how state management keeps UI and logic clean and scalable

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

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

  void _incrementCounter() {
    // TODO: Add code to increase counter and update UI
  }

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

Task 1

Solution

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

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

  void _incrementCounter() {
    setState(() {
      _counter += 1;
    });
  }

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

This app uses Flutter's built-in state management with a StatefulWidget. The counter value is stored in a variable _counter inside the state class. When the user taps the 'Increment' button, the _incrementCounter method runs. It calls setState() to tell Flutter the state changed. Flutter then rebuilds the UI to show the new counter value.

This approach keeps the UI code and the state (data) together in one place. It makes the app easy to understand and change. As apps grow bigger, managing state properly helps keep the code organized and prevents bugs. This is why state management is important for scaling apps.

Final Result

Completed Screen

Counter App

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

User taps 'Increment' button

Counter number increases by 1

UI updates immediately to show new counter value

Stretch Goal

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

💡 Hint

Create a new method that sets _counter to 0 inside setState(), then add a second ElevatedButton calling it