Simple Flutter Counter App Tutorial Using setState() for Beginners

Create a Counter App Using setState() in Flutter – Step-by-Step Guide

If you're just getting started with Flutter, one of the best ways to learn is by building simple apps. In this tutorial, we'll build a Counter App using setState(), which is the most basic form of state management in Flutter.

By the end of this guide, you’ll understand:

• What setState() does

• How to create a Flutter app from scratch

• How to update the UI dynamically when a user interacts with a button

✅ What is setState() in Flutter?

In Flutter, setState() is used to tell the framework that the state of the app has changed. It allows your app to rebuild the UI when something changes — like when a user clicks a button.

Whenever you call setState(), Flutter knows it needs to re-render the widget so that it can display the new data.

🛠️ Prerequisites

Before we start coding, make sure you have the following installed:

• Flutter SDK

• Android Studio / VS Code

• An emulator or connected physical device

🚀 Step-by-Step: Create a Counter App

1️⃣ Step 1: Create a New Flutter Project

Open your terminal or command prompt and run:

flutter create counter_app

Navigate to the newly created folder:

cd counter_app

Open the project in your code editor (VS Code or Android Studio).

2️⃣ Step 2: Replace the main.dart File

Open lib/main.dart and replace its contents with the following code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Counter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++; // Increase the counter value by 1
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter--; // Decrease the counter value by 1
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App using setState()'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Counter Value:',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '$_counter',
              style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 30),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _incrementCounter,
                  child: Text('Increment'),
                ),
                SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _decrementCounter,
                  child: Text('Decrement'),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

🧠 Explanation of the Code

Let’s break it down step-by-step:

➤ main() function

This is the entry point of the Flutter app. It runs the MyApp widget.

➤ MyApp Widget

A stateless widget that sets up the MaterialApp, which includes the app's theme and the home page (CounterPage).

➤ CounterPage Widget

A stateful widget that manages the counter logic. We use a StatefulWidget because we need to change and track the counter value dynamically.

➤ _counter Variable

An integer that stores the current count. It starts at 0.

➤ _incrementCounter() and _decrementCounter() Methods

These methods call setState(), which tells Flutter to rebuild the UI with the updated counter value.

➤ build() Method

This builds the UI. It shows the current counter and two buttons — one to increase and another to decrease the counter.

📱 Output: What Will You See?

When you run the app, you'll see:

• A text saying "Current Counter Value:"

• A number (starting from 0)

• Two buttons: "Increment" and "Decrement"

Tapping the buttons updates the number in real time, thanks to setState().

🔄 Why Use setState()?

• Simple and easy to use

• Perfect for small apps

• Lets you refresh part of the UI on value change

However, for large apps or complex state logic, you'll want to explore more advanced options like Provider, Riverpod, or Bloc.

🧪 Pro Tips

• You can customize the buttons with icons or different colors.

• Try disabling the decrement button when the counter is zero.

• Experiment with adding a reset button using the same setState() method.

🎯 Conclusion

Building a Flutter Counter App using setState() is a great way to get comfortable with state management basics. This foundational concept is essential for all Flutter developers.

As you continue learning, try converting this app into one that uses other state management solutions to compare how they work.