Creating a Counter App in Flutter
Creating a Counter App in Flutter
Flutter is Google’s UI toolkit for building beautiful apps from a single codebase. If you're new to Flutter, a great way to start is by creating a simple Counter App.
This app lets users increase a number by tapping a button—a great way to learn about widgets, state management, and app structure in Flutter.
Let’s build it step-by-step.
✅ Prerequisites
Before starting, make sure you have:
Flutter SDK installed
Android Studio or VS Code
Emulator or real device ready
Basic understanding of Dart (not mandatory)
🛠️ Step 1: Create a New Flutter Project
Open your terminal and run:
flutter create counter_app
cd counter_app
Then open the project in your code editor.
📝 Step 2: Understanding main.dart
Open lib/main.dart. This is where your app starts.
Here's the default Flutter app structure:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Counter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const CounterPage(),
);
}
}
runApp() starts the app
MaterialApp provides basic UI structure
CounterPage will be our main screen
📱 Step 3: Create the CounterPage Widget
Replace the existing code inside main.dart with this:
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pressed the button this many times:',
),
Text(
'$_counter',
style: const TextStyle(fontSize: 30),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
🔍 Explanation of Key Concepts
✅ StatefulWidget
We use StatefulWidget because the app needs to update the UI when the counter changes.
✅ setState()
This tells Flutter to rebuild the UI with the updated value of _counter.
✅ Scaffold
Provides the structure for a basic material design layout:
App bar
Body
Floating action button
🚀 Step 4: Run the App
Now run your app using:
flutter run
You’ll see the counter starting at 0. Tap the + button to increase it.
🎨 Customization Ideas
Want to make your app more exciting? Try:
Changing the color scheme
Adding a reset button
Decreasing the counter with another button
Animating the number change
Saving the count with shared preferences
🧠 Why This Project Matters
By creating this app, you learned:
How to use Flutter widgets
The difference between StatelessWidget and StatefulWidget
How to update UI using setState()
The basics of layout and theming
✅ Final Code Summary
Here’s the full code in main.dart:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Counter App',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
home: const CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('You have pressed the button this many times:'),
Text(
'$_counter',
style: const TextStyle(fontSize: 30, color: Colors.deepPurple),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
🧩 What’s Next?
Now that you’ve built a basic app:
Try building a To-Do List App
Learn about navigation and routing
Explore State Management with Provider or Riverpod
Use APIs to fetch and display data
🔚 Conclusion
The Counter App is a classic Flutter project that teaches you how Flutter apps are built and how state updates the UI.
Once you master this, you’re on your way to building more complex and useful apps in Flutter!
Comments
Post a Comment