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