Title: Flutter Dart Tutorial: Building a Simple Counter App | Learn Flutter from Scratch
.png)
Description:
In this Flutter Dart tutorial, we'll walk through the process of creating a simple counter app from scratch. You'll learn how to set up a basic Flutter project, use Material Design components, and implement stateful widgets to build a functional counter that increments with the press of a button. Whether you're a beginner or looking to enhance your Flutter skills, this step-by-step guide will help you understand the fundamentals of Flutter and Dart programming.
In this Flutter Dart code walkthrough, we'll explore the construction of a basic counter app. The code begins with the main entry point, initiating a Flutter application using the runApp method with the MyApp widget. The MyApp widget, a stateless widget, configures the application's metadata, such as the title and theme. Within the app, there's a stateful widget called MyHomePage, responsible for managing the state of the counter. The state is maintained in the _MyHomePageState class, which extends the State class. This class includes a counter variable (_counter) initialized to 0 and a method (_incrementCounter) to update the counter using Flutter's setState function. The user interface is built using the Scaffold widget, featuring an AppBar with the title 'DEV1'. The body of the app is a centered column containing two text widgets. The first text widget displays a message, and the second dynamically shows the current counter value using a themed headline style. A floating action button (FloatingActionButton) triggers the _incrementCounter method when pressed, incrementing the counter and updating the UI. This example provides a hands-on introduction to key Flutter concepts, including widgets, state management, and basic user interface elements. Follow along with the code to understand how Flutter and Dart work together to create a responsive and interactive mobile app. Happy coding!
Tags:
- Flutter Dart
- Flutter Tutorial
- Dart Programming
- Mobile App Development
- Flutter Counter App
- Stateful Widgets
- Material Design
- Flutter for Beginners
- Learn Flutter from Scratch
- Flutter Development
Main.dart:
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'DEV1',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() =>
_MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _increamnetCounter(){
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('DEV1'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text('You have clicked the button many times.'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton:
FloatingActionButton(
onPressed: _increamnetCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
pubspec.yaml:
name: dev1
description: A new Flutter project.
publish_to: 'none'
version: 0.1.0
environment:
sdk: '>=3.1.4 <4.0.0'
dependencies:
flutter:
sdk: flutter
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
Comments
Post a Comment