Scribd
Upload
4 views4 pages

2 6007

The document outlines an experiment to build a simple counter mobile app using Flutter, aimed at beginners. It details the objectives, procedure for setting up Flutter, creating the app, modifying the code, and running the app. The experiment emphasizes learning state management and app structure while providing hands-on experience with Dart programming.

Uploaded by

m.i.likhon183
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views4 pages

2 6007

The document outlines an experiment to build a simple counter mobile app using Flutter, aimed at beginners. It details the objectives, procedure for setting up Flutter, creating the app, modifying the code, and running the app. The experiment emphasizes learning state management and app structure while providing hands-on experience with Dart programming.

Uploaded by

m.i.likhon183
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Experiment No: 02

Experiment Name: Local App Development.

Objectives: We will build a simple mobile app using Flutter that displays a number on
the screen. Each time you press a button, the number increases by one. This is known as a
counter app and is a great first project for beginners. It helps you understand how Flutter
widgets work and how user interaction updates the interface. You'll also get hands-on
experience with the Dart programming language. By building this app, you’ll learn how
state management works in Flutter and how to structure a basic app. This project is
simple yet powerful for building a strong foundation.

Procedure:

● Set up Flutter:
First, install Flutter on your computer. Also, install an app to write your code, like
Android Studio or VS Code.
● Create a new app:
Open your terminal or command prompt and type:
flutter create counter_app
This will create a new Flutter project with all the files you need.
● Change the code:
Go to the main.dart file and change the code. Add these things:
 A MaterialApp with your own app name and colors.
 A StatefulWidget to keep and update the number.
 A FloatingActionButton that adds 1 to the number when you press it.
● Make it look nice:
 Change the background color and the top bar (AppBar) color.
 Use Container widgets to show the number in a nice way.
● Run your app:
Try running your app on your phone or in an emulator. Press the button and see the number
go up.

impoCrot d'ep:ackage:flutter/ colorScheme:


material.dart'; ColorScheme.fromSeed(seedColor: const
Color.fromARGB(255, 15, 121, 36)),
void main() { useMaterial3: true,
runApp(const ),
MyApp()); home: const MyHomePage(title:
} 'Murshed'),
);
class MyApp extends }
StatelessWidget { const }
MyApp({super.key});
class MyHomePage extends StatefulWidget
@override { const MyHomePage({super.key,
Widget build(BuildContext required
final child
String title; : Column(
mainAxisAlignment:
@override MainAxisAlignment.center,
State<MyHomePage> createState() => children: <Widget>[
_MyHomePageState(); const Text(
} 'Tapped it',
style:
class _MyHomePageState extends TextStyle(fontSize: 18, fontWeight:
State<MyHomePage> { FontWeight.bold, color:
int _counter = 0; Colors.black87),
),
void _incrementCounter() { Text(
setState(() { '$_counter'
_counter++; , style:
}); const
} TextStyle(fontSize: 36, fontWeight:
FontWeight.bold, color: Colors.green),
@override ),
Widget build(BuildContext ],
context) { return Scaffold( ),
appBar: AppBar( ),
backgroundColor ),
: floatingActionButton:
Theme.of(context).colorScheme.inversePri FloatingActionButton(
mar y, onPressed: _incrementCounter,
title: Text(widget.title), tooltip: 'Increment',
), child: const Icon(Icons.add),
body: Container( ),
color: Colors.lightGreen[100], // );
Changed background color }
child: Center(
Output: The app initially shows a screen with the text “Pushed it:” and a number below. When
the user presses the floating “+” button, the number increments, demonstrating dynamic state
management.

Conclusion: The experiment shows how to make a simple mobile app with Flutter that interact
with it. It helps us to understand basic ideas like designing the app’s look, organizing parts of
the app, and managing the information using Dart and Flutter.

You might also like