Muhammed Shamal PV
Posted on July 31, 2024
Follow me on LinkedIn
Follow me on Github.com
Friends
This simple app is a great starting point for beginners to get familiar with Flutter's basics, including widgets, state management, and building a user interface.
Flutter Counter App
Step 1: Set Up Your Flutter Environment
Before you start, make sure you have Flutter installed on your machine. Follow the instructions on the Flutter official website to set up your environment.
Step 2: Create a New Flutter Project
Open your terminal or command prompt and run the following command to create a new Flutter project:
flutter create counter_app
Navigate to the project directory:
cd counter_app
Step 3: Modify lib/main.dart
Replace the contents of lib/main.dart 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: MyHomePage(title: 'Flutter Counter App'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _decrementCounter() {
setState(() {
if (_counter > 0) {
_counter--;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
SizedBox(width: 20),
ElevatedButton(
onPressed: _decrementCounter,
child: Text('Decrement'),
),
],
),
],
),
),
);
}
}
Step 4: Run the App
Make sure you have an emulator running or a physical device connected. Then run the app with the following command:
flutter run
Explanation
-
Main Entry Point: The
mainfunction is the entry point of the app, callingrunApp(MyApp())to launch the application. - MyApp Widget: This is the root widget of the application, which sets up the MaterialApp with a home page.
- MyHomePage Widget: This is the main stateful widget that maintains the state of the counter and defines the UI.
-
_MyHomePageState: This is the state class for
MyHomePagewhich manages the counter state and updates the UI accordingly.
Features
- Increment and Decrement Buttons: Two buttons allow the user to increase and decrease the counter.
-
State Management: Uses
setStateto manage and update the state of the counter.
Posted on July 31, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related