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- Flutter Laboratory 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- Flutter Laboratory 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 by typing dart.

UI design- Flutter Laboratory 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(){
int num,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';

bool isPrime(N) {
for (var i = 2; i <= N / i; ++i) {
if (N % i == 0) {
return false;
}
}
return true;
}

void main() {

UI design- Flutter Laboratory 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- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

Output:

Result: The programs were executed successfully and verified the output

UI design- Flutter Laboratory 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(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const TextWidget(),
);
}
}

class TextWidget extends StatelessWidget {

const TextWidget({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- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

),
),
),
);
}
}

Container Widget

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp 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: [
new BoxShadow(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
),
);
}
}

b) Implement different layout structures using Row, Column, and Stack widgets.

UI design- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

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 '))])
));
}
}

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)),
],

UI design- Flutter Laboratory Manual

 Mahaveer Institute of Science and Technology

),
),
);
}
}

Stack Widget:

import 'package:flutter/material.dart';
void main() {
runApp( MyApp() );
}

class MyApp extends StatelessWidget {

const MyApp({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),
),
],
),)
),
) ); } }
Ex. No. : 3
Date:

UI design- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

Aim: a) Set up navigation between different screens using Navigator.

b) Implement navigation with named routes.

Navigation:

import 'package:flutter/material.dart';

void main() {
runApp(const MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}

class FirstRoute extends StatelessWidget {

const FirstRoute({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) => const SecondRoute()),
);
},
),
),
);
}
}

class SecondRoute extends StatelessWidget {

const SecondRoute({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Route'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Go back!'),
),

UI design- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology
),
);
}
}

Named Routes

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
// Define Named Routes
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Named Routes Demo',
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/profile': (context) => ProfileScreen(),
},
);
}
}

// Home Screen (HomeScreen)

class HomeScreen 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- Flutter Laboratory Manual

 Mahaveer Institute of Science and Technology

// Profile Screen (ProfileScreen)

class ProfileScreen 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 program was executed successfully and verified the output

Ex. No. : 4
Date:

Aim: a) Learn about stateful and stateless widgets.

UI design- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

Stateless widget:

import 'package:flutter/material.dart';

void main() {
runApp(new DogApp());
}

class DogApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Dog App',
home: Scaffold(
appBar: AppBar(
title: Text('Stateless Widget Demo'),
),
body: Center(
child: DecoratedBox( // here is where I added my DecoratedBox
decoration: BoxDecoration(color: Colors.lightBlueAccent),
child: Text('I don\'t have state'),
),
),
),
);
}
}

Output:

b) Implement state management using set State and Provider.

Stateful Widget:

UI design- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

import 'package:flutter/material.dart';

void main() => runApp(const ScaffoldExampleApp());

class ScaffoldExampleApp extends StatelessWidget {

const ScaffoldExampleApp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(
home: ScaffoldExample(),
);
}
}

class ScaffoldExample extends StatefulWidget {

const ScaffoldExample({super.key});

@override
State<ScaffoldExample> createState() => _ScaffoldExampleState();
}

class _ScaffoldExampleState extends State<ScaffoldExample> {

int _count = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Stateful Widget Demo'),
),
body: Center(child: Text('The button pressed $_count times.')),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red,
foregroundColor: Colors.black,
onPressed: () => setState(() => _count++),
tooltip: 'Increment Counter',
child: const Icon(Icons.add),
),
);
}
}

Output:

UI design- Flutter Laboratory Manual

 Mahaveer Institute of Science and Technology

Result: The program was executed successfully and verified the output

Ex. No. : 5
Date:

Aim: a) Design a form with various input fields.

UI design- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

Form with various fields:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
final appTitle = 'Flutter Form Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: MyCustomForm(),
),
);
}
}

// Create a Form widget.

class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}

// Create a corresponding State class. This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
// Create a global key that uniquely identifies the Form widget
// and allows validation of the form.
final _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: const InputDecoration(

UI design- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

icon: const Icon(Icons.person),

hintText: 'Enter your name',
labelText: 'Name',
),
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.phone),
hintText: 'Enter a phone number',
labelText: 'Phone',
),
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.calendar_today),
hintText: 'Enter your date of birth',
labelText: 'Dob',
),
),
new Container(
padding: const EdgeInsets.only(left: 130.0, top: 40.0),
child: new ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.black),
child: const Text('Submit'),
onPressed: null,
)),
],
),
);
}
}

Output:

UI design- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

Form Validation:

b) Implement form validation and error handling.

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: FormValidationExample(),
));
}

class FormValidationExample extends StatelessWidget with InputValidationMixin {

final formGlobalKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Form validation example'),
),
body:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child:Form(
key: formGlobalKey,
child: Column(
children: [
const SizedBox(height: 50),

UI design- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

TextFormField(
decoration: InputDecoration(
labelText: "Email"
),
validator: (email) {
if (isEmailValid(email.toString())){ return null;}
else{
return 'Enter a valid email address';}
},
),
const SizedBox(height: 24),
TextFormField(
decoration: InputDecoration(
labelText: "Password",
),
maxLength:20,
obscureText: true,
validator: (password) {
if (isPasswordValid(password.toString())) {return null;}
else{
return 'Enter a valid password';}
},
),
const SizedBox(height: 50),
ElevatedButton(
onPressed: () {
if (formGlobalKey.currentState!.validate()) {
formGlobalKey.currentState!.save();
// use the email provided here
}
},
child: Text("Submit"))
],
),
),
));
}
}

mixin InputValidationMixin {
bool isPasswordValid(String password) => password.length >= 6;

bool isEmailValid(String email) {

Pattern pattern =
r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$';
RegExp regex = new RegExp(pattern.toString());
return regex.hasMatch(email);

UI design- Flutter Laboratory Manual

 Mahaveer Institute of Science and Technology

}}
Output:

Result: The program was executed successfully and verified the output

Ex. No. : 6
Date:

UI design- Flutter Laboratory Manual

Mahaveer Institute of Science and Technology

Aim: To Apply styling using themes and custom styles

UI design- Flutter Laboratory Manual