Mahaveer Institute of Science and Technology
List of Experiments
1. a) Install Flutter and Dart SDK.
b) Write a simple Dart program to understand the language basics.
2. a) Explore various Flutter widgets (Text, Image, Container, etc.).
b) Implement different layout structures using Row, Column, and Stack widgets.
3. a) Design a responsive UI that adapts to different screen sizes.
b) Implement media queries and breakpoints for responsiveness.
4. a) Set up navigation between different screens using Navigator.
b) Implement navigation with named routes.
5. a) Learn about stateful and stateless widgets.
b) Implement state management using set State and Provider.
6. a) Create custom widgets for specific UI elements.
b) Apply styling using themes and custom styles.
7. a) Design a form with various input fields.
b) Implement form validation and error handling.
8. a) Add animations to UI elements using Flutter's animation framework.
b) Experiment with different types of animations (fade, slide, etc.).
9. a) Fetch data from a REST API.
b) Display the fetched data in a meaningful way in the UI.
10. a) Write unit tests for UI components.
b) Use Flutter's debugging tools to identify and fix issues.
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
Ex. No. : 1
Date:
Aim: a) To install Flutter and Dart SDK.
Flutter installation
Step 1: Download Flutter SDK:from the link:
https://docs.flutter.dev/get-started/install/windows
Step 2:Extract the File:
Extract the downloaded zip file and move it to the
desired location where you want to install Flutter SDK.
Step 3: Update Path Variable for Windows
Step 4: Confirm Installed Tools for Running Flutter
In CMD, run the flutter doctor command to
confirm the installed tools along with brief descriptions.
dart installation
Step 1: Download the dart SDK from the following link
http://www.gekorm.com/dart-windows/
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
Step 2: Run the Dart installer and click on the Next button
Step 3: After the download is completed, set the PATH environment variable to
"C:\Program Files\Dart\dart-sdk\bin”
Step 4: In the terminal and verify the Dart installation bytypingdart.
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
b) To write a simple Dart program to understand the language basics.
Program to find factorial
import "dart:io";
main(){
intnum,factorial=1;
stdout.write("Enter a number: ");
num=int.parse(stdin.readLineSync()!);
for(int i=1;i<=num;i++) {
factorial=factorial*i;
}
print("Factorial of $num is $factorial");
Output:
Program to find the given number is a prime or not
import 'dart:io';
boolisPrime(N) {
for (var i = 2; i <= N / i; ++i) {
if (N % i == 0) {
return false;
}
}
return true;
}
void main() {
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
stdout.write('Enter n value: ');
var N = int.parse(stdin.readLineSync()!);
if (isPrime(N)) {
print('$N is a prime number.');
} else {
print('$N is not a prime number.');
}
}
Output:
Program to find Fibonacci series
import 'dart:io';
void main() {
int a=0, b=1;
stdout.write('Enter n value: ');
var n = int.parse(stdin.readLineSync()!);
stdout.write(a);
stdout.write(' ');
stdout.write(b);
stdout.write(' ');
for(int i=3;i<=n; i ++){
int c=a+b;
stdout.write(c);
stdout.write(' ');
a=b;
b=c;
}
}
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
Output:
Result:The programs were executed successfully and verified the output
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
Ex. No. : 2
Date:
Aim:a) Explore various Flutter widgets (Text, Image, Container, etc.).
Text Widget:
import 'package:flutter/material.dart';
void main() {
runApp(constMyApp());
}
classMyApp extends StatelessWidget {
constMyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
returnMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: constTextWidget(),
);
}
}
classTextWidget extends StatelessWidget {
constTextWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Text Widget'),
),
body: Container(
child: Text(
'Hi, I am text widget',
style: TextStyle(
fontSize: 40,
color: Colors.red,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
letterSpacing: 3,
wordSpacing: 10,
backgroundColor: Colors.amber,
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
),
),
),
);
}
}
Container Widget
import 'package:flutter/material.dart';
void main() =>runApp(MyApp());
classMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 4),
borderRadius: BorderRadius.circular(8),
boxShadow: [
newBoxShadow(color: Colors.green, offset: new Offset(6.0, 6.0),),
],
),
child: Text("Hello! I am in the container widget decoration box!!",
style: TextStyle(fontSize: 30),
textDirection: TextDirection.ltr
),
);
}
}
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
b) Implement different layout structures using Row, Column, and Stack widgets.
Row Widget
import 'package:flutter/material.dart';
void main() =>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Row Widget')
),
body: Row(
children:[
Expanded(
child: Text(' Column 1 ')),
Expanded(
child: Text(' Column 2 ')),
Expanded(
child: Text(' Column 3 '))])
));
}
}
Output:
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
Column Widget
import 'package:flutter/material.dart';
void main() =>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Column Widget Example'),
),
body: Column(
children: <Widget>[
Text('First child', style: TextStyle(fontSize: 25)),
Text('Second child', style: TextStyle(fontSize: 25)),
Text('Third child', style: TextStyle(fontSize: 25)),
],
),
),
);
}
}
Output:
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
Stack Widget:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp() );
}
class MyApp extends StatelessWidget {
constMyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Example'),
),
body: Container(
child:Center(
child: Stack(
children: [
Container(
color: Colors.red,
margin: EdgeInsets.all(30),
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(70),
),
Container(
color: Colors.yellow,
margin: EdgeInsets.all(120),
),
],
),)
),
) );
}
}
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
Output:
Result:The programs were executed successfully and verified the output
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
Ex. No. : 3
Date:
Aim:a) Set up navigation between different screens using Navigator.
Navigation:
import 'package:flutter/material.dart';
void main() {
runApp(constMaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}
classFirstRoute extends StatelessWidget {
constFirstRoute({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Route'),
),
body: Center(
child: ElevatedButton(
child: const Text('Open route'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) =>constSecondRoute()),
);
},
),
),
);
}
}
classSecondRoute extends StatelessWidget {
constSecondRoute({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Route'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
child: const Text('Go back!'),
),
),
);
}
}
Output:
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
b) Implement navigation with named routes.
Named Routes
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
classMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Define Named Routes
returnMaterialApp(
debugShowCheckedModeBanner: false,
title: 'Named Routes Demo',
initialRoute: '/',
routes: {
'/': (context) =>HomeScreen(),
'/profile': (context) =>ProfileScreen(),
},
);
}
}
// Home Screen (HomeScreen)
classHomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home Screen"),
),
body: Center(
child: ElevatedButton(
child: const Text('Go to Profile Page'),
onPressed: () {
// Navigate to the Profile Screen
Navigator.pushNamed(context, '/profile');
},
),
),
);
}
}
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
// Profile Screen (ProfileScreen)
classProfileScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Profile Page"),
),
body: const Center(
child: Text("Welcome to the Profile Page!"),
),
);
}
}
Result: The programs were executed successfully and verified the output
UI design- FlutterLaboratory Manual
Mahaveer Institute of Science and Technology
import'package:flutter/material.dart';
import'package:flutter_blog/screens/home_screen.dart';
import'package:flutter_blog/screens/post_screen.dart';
voidmain() =>runApp(MyApp());
classMyAppextendsStatelessWidget {
@override
Widgetbuild(BuildContext context) {
returnMaterialApp(
title: 'Flutter Blog',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
routes: {
'/': (context) =>HomeScreen(),
'/post': (context) =>PostScreen(),
},
);
}
}
classPostScreenextendsStatelessWidget {
@override
Widgetbuild(BuildContext context) {
finalargs = ModalRoute.of(context)!.settings.argumentsasMap<String,
dynamic>;
final post = args['post'];
returnScaffold(
appBar: AppBar(
title: Text('Flutter Blog'),
),
body: Center(
child: Text(post.title),
),
);
}
}
UI design- FlutterLaboratory Manual
