Want to Build Your First Mobile App in Under an Hour? Let us Create a Counter App with Flutter

If you ever wanted to build a mobile app that runs on your phone, tablet, or even the web, all with one codebase? With Flutter, that dream’s closer than you can imagine! Today, we will be building a project with Flutter: a simple counter app. It is interactive, beginner-friendly, and takes less than an hour to build. Tap a button, watch a number climb, it is the perfect way to see Flutter’s magic in action. Whether you are new to coding or ready to explore mobile development, this article is for you.

Why a Counter App?  

Think of this as Flutter’s “Hello World.” It is small but mighty, teaching you the basics of widgets, state, and app-building while giving you something real to show off. Plus, it’s fun to play with! By the end, you will have an app that:

- Shows a number on-screen.

- Increases it with a tap.

- Resets to zero when you want.

No setup hassle today, if you have got Flutter installed, you are good to go. Missed that step? Check out my earlier article, “Introduction to Flutter” for the full guide on getting started. Ready? Open your code editor let us code.

Step 1: Start with a New Project  

Assuming Flutter’s ready on your machine (thanks to that intro post!), create a new project. Open your terminal, navigate to your working folder, and run:

flutter create counter_app

cd counter_app

Now, open the `lib/main.dart` file in your editor. Flutter gives you a counter app by default (pretty cool, right?) Run it with `flutter run` (use an emulator or your phone), and you will see a basic app with a button and a number. Our job? Make it ours!

Step 2: Understand the Default Code  

Let us peek at what Flutter handed us. Here is the key stuff in `main.dart`:

- `main()`: Launches the app with `runApp(MyApp())`.

- `MyApp`: A `StatelessWidget` setting up the app’s frame (`MaterialApp`).

- `MyHomePage`: A `StatefulWidget` where the counter lives—stateful because it changes when we tap.

Widgets are Flutter’s building blocks—like LEGO pieces for apps. `StatelessWidget` is static; `StatefulWidget` updates when data (like our counter) shifts. See the `FloatingActionButton`? That is what increments the number.

Step 3: Customize the App  

Replace everything in `main.dart` with this polished version:

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'My Counter App',

      home: CounterPage(),

    );

  }

}

class CounterPage extends StatefulWidget {

  @override

  _CounterPageState createState() => _CounterPageState();

}

class _CounterPageState extends State<CounterPage> {

  int _counter = 0;

  void _incrementCounter() {

    setState(() {

      _counter++;

    });

  }

  void _resetCounter() {

    setState(() {

      _counter = 0;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('My Counter App'),

        backgroundColor: Colors.blue,

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            Text(

              'You’ve tapped the button this many times:',

              style: TextStyle(fontSize: 18),

            ),

            Text(

              '$_counter',

              style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),

            ),

          ],

        ),

      ),

      floatingActionButton: Column(

        mainAxisAlignment: MainAxisAlignment.end,

        children: [

          FloatingActionButton(

            onPressed: _incrementCounter,

            backgroundColor: Colors.green,

            child: Icon(Icons.add),

          ),

          SizedBox(height: 10),

          FloatingActionButton(

            onPressed: _resetCounter,

            backgroundColor: Colors.red,

            child: Icon(Icons.refresh),

          ),

        ],

      ),

    );

  }

}

Save it, hit `flutter run`, and watch it update. What is new? A blue app bar, a green “add” button, and a red “reset” button. Tap the green one and counter goes up. Tap the red one and back to zero. Cool, huh?

Step 4: Break Down the Magic  

This is what makes this tick:

- `Scaffold`**: The app’s layout—app bar at the top, body in the middle, buttons on the side.

- `Column`: Stacks the text vertically. `mainAxisAlignment: MainAxisAlignment.center` keeps it centered.

- `_counter`: Our number, stored in the `StatefulWidget`’s state.

- `setState`: Tells Flutter, “Hey, something changed redraw the screen!” When `_counter` updates, the `Text('$_counter')` reflects it instantly.

- `FloatingActionButton`: Fancy buttons that “float” over the app. We have got two: one adds, one resets.

See how `build()` redraws the UI every time `_counter` changes? That is Flutter’s reactive power—simple but brilliant.

Step 5: Test It Out  

Run the app on your emulator or device. Tap the green button a few times to watch that number climb! Hit the red one to take it to zero again. If your own is not working:

- Check your terminal for errors (e.g., typos in the code).

- Ensure your emulator’s running (revisit “Introduction to Flutter” if you are stuck).

- Copy-paste my code exactly to troubleshoot.

It should feel smooth and snappy because Flutter is built for that!

Step 6: Make It Yours  

This is your app practice with it! Try these tweaks:

- Change `Colors.green` to `Colors.purple` for the add button.

- Update the `Text` style—maybe `color: Colors.blue` or a bigger `fontSize`.

- Move the buttons—swap `mainAxisAlignment: MainAxisAlignment.end` to `.start` to stick them at the top.

These are the roots of every Flutter app (games, tools, you name it). It is a tiny step, but it is how pros start before building the next big thing.

Your Assignment

Take it further! Can you add a decrement button to count down? Here is a hint:

- Add a third `FloatingActionButton` with `Icon(Icons.remove)`.

- Write a `_decrementCounter()` function: `_counter--`.

Stuck? Experiment and let me know how it goes, I am here to help! Share your version in the commentsand I will like to see what you create.

You may like:

---