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
