lOMoAR cPSD| 14086046

UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2025-26

1. a) Install Flutter and Dart SDK.

Dart SDK is a pre-compiled version so we have to download and extract it only. For
this follow the below-given instructions:
Step 1: Download Dart SDK. Download Dart SDK from the Dart SDK
archive page. The URLis: https://dart.dev/tools/sdk/archive

Click on DART SDK to download SDK for Windows 64-Bit Architecture. The
download will start and a zip file will be downloaded. Note: To download SDK for any
other OS select OS of your choice.

Step 2: Extract the downloaded zip file. Extract the contents of downloaded zip file and
after extracting contents of zip file will be as shown:

1
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

Step 3: Running Dart. Now open bin folder and type “cmd” as given below:

Command Prompt will open with our desired path of bin folder and now type dart.

And now we are ready to use dart through bin folder but setting up the path in
environment variables will ease our task of Step3 and we can run dart from anywhere
in the file system using command prompt.

2
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

Step 4: Setting up path in environment variables. Open Environment Variables from

advanced system settings and add Path in System Variables as depicted in image:

Now we are done to use Dart from anywhere in the file system.

3
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

Step 5: Run Dart Using cmd

4
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

1. b) Write a simple Dart program to understand the language basics.

void main()
{
var name = "SAI SPURTHI";
print(name);
var lastName = "INSTITUTE OF TECHNOLOGY";
print("Full name is $name $lastName");
// declaring variables
String name1 = "John";
String address = "USA";
num age = 20; // used to store any types of numbers
num height = 5.9;
bool isMarried = false;
// printing variables value
print("Name is $name1");
print("Address is $address");
print("Age is $age");
print("Height is $height");
print("Married Status is $isMarried");
int num1 = 10; //declaring number1
int num2 = 3; //declaring number2
// Calculation
int sum = num1 + num2;
int diff = num1 - num2;
int mul = num1 * num2;
double div = num1 / num2; // It is double because it outputs number with decimal.
// displaying the output
print("The sum is $sum");
print("The diff is $diff");
print("The mul is $mul");
print("The div is $div");
if (7 % 2 == 0) {
print('7 is even');
} else {
print('7 is odd');
}
// ternary operators
var a = true;
var monday = a ? 'doctor' : null;

5
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

print('monday appointment: $monday');

String multiLineText = '''
This is Multi Line Text
with 3 single quote

I am also writing here.

''';
// Multi Line Using Double Quotes
String otherMultiLineText = """
This is Multi Line Text
with 3 double quote
I am also writing here.
""";
// Printing Information
print("Multiline text is $multiLineText");
print("Other multiline text is $otherMultiLineText");
}

OUTPUT:

SAI SPURTHI
Full name is SAI SPURTHI INSTITUTE OF TECHNOLOGY
Name is John
Address is USA
Age is 20
Height is 5.9
Married Status is false
The sum is 13
The diff is 7
The mul is 30
The div is 3.3333333333333335
7 is odd
monday appointment: doctor
Multiline text is This is Multi Line Text
with 3 single quote
I am also writing here.

Other multiline text is This is Multi Line Text

with 3 double quote
I am also writing here.

6
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

2. a) Explore various Flutter widgets (Text, Image, Container, etc.).

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text, Image, and Container Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}

class HomeScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Widgets Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Container holding Image widget from the network
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(169, 169, 169, 0.5), // Equivalent to grey with 50% opacity,
spreadRadius: 2,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),

7
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

child: Image.network(
'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif',
// Replace with your image URL

fit: BoxFit.cover,
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) {
return child;
} else {
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
(loadingProgress.expectedTotalBytes ??
1)
: null
: null,
),
);
}
},
),
),
),

// Padding and Text widget

SizedBox(height: 20),
Text(
'This is an example of using Text, Image (Network), and Container widgets.',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),

// Container widget for the button

SizedBox(height: 30),
Container(
width: 200,
height: 50,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(25),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(169, 169, 169, 0.5), // Equivalent to grey with 50% opacity,
spreadRadius: 2,
blurRadius: 5,
offset: Offset(0, 3),
),
],
),

8
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

child: TextButton(
onPressed: () {
// Action when button is pressed
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Button Pressed'),
content: Text('You have pressed the button!'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
);
},
);
},
child: Text(
'Press Me',
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
),
],
),
),
);
}
}

9
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

10
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

2 b) User implement different layout structures using Row, Column, and Stack widgets

import 'package:flutter/material.dart';
void main()
{
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Layout Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Row, Column, Stack Example'),
),
body: Column(
children: [
// 1. Row Layout (Icons in a row)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.home, size: 40, color: Colors.blue),
Icon(Icons.star, size: 40, color: Colors.orange),
Icon(Icons.settings, size: 40, color: Colors.green),
],
),
SizedBox(height: 20), // spacing between widgets
// 2. Column Layout (Text vertically)
Column(
children: [
Text("Welcome", style: TextStyle(fontSize: 24)),
Text("to", style: TextStyle(fontSize: 24)),
Text("Flutter!", style: TextStyle(fontSize: 24)),
],
),
SizedBox(height: 20), // spacing between widgets
// 3. Stack Layout (Overlapping containers and text)
Stack(
alignment: Alignment.center,
children: [
Container(width: 200, height: 200, color: Colors.yellow),
Container(width: 120, height: 120, color: Colors.red),
Text('Stacked', style: TextStyle(fontSize: 20, color: Colors.white)),
],
),
],
),
),
);
}
}

11
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

12
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

3. a) Design a responsive UI that adapts to different screen sizes.

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

class ResponsiveApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive UI',
home: Scaffold(
appBar: AppBar(
title: Text('Responsive Layout'),
),
body: ResponsiveLayout(),
),
);
}
}

class ResponsiveLayout extends StatelessWidget {

@override
Widget build(BuildContext context) {
// MediaQuery gives us the width of the screen
double screenWidth = MediaQuery.of(context).size.width;

return LayoutBuilder(
builder: (context, constraints) {
// If screen width is less than 600, use Column (mobile)
if (screenWidth < 600) {
return Column(
children: [
buildBox(Colors.blue, 'Box 1'),
buildBox(Colors.green, 'Box 2'),
buildBox(Colors.red, 'Box 3'),
],
);
} else {
// If screen width >= 600, use Row (tablet/desktop)
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(child: buildBox(Colors.blue, 'Box 1')),
Flexible(child: buildBox(Colors.green, 'Box 2')),
Flexible(child: buildBox(Colors.red, 'Box 3')),
],
);
}
},
);
}

13
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

Widget buildBox(Color color, String label) {

return Container(
margin: EdgeInsets.all(10),
height: 150,
color: color,
child: Center(
child: Text(label, style: TextStyle(fontSize: 24, color: Colors.white)),
),
);
}
}

14
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

15
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

3 b) Implement media queries and breakpoints for responsiveness.

import 'package:flutter/material.dart';
void main() => runApp(MyResponsiveApp());
class MyResponsiveApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive App with Breakpoints',
home: ResponsiveHomePage(),
);
}
}
class ResponsiveHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Get screen width using MediaQuery
double screenWidth = MediaQuery.of(context).size.width;

// Set breakpoints for different layouts

if (screenWidth < 600) {
return MobileLayout();
} else if (screenWidth >= 600 && screenWidth < 1024) {
return TabletLayout();
} else {
return DesktopLayout();
}
}
}

// Layout for Mobile Screens

class MobileLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Mobile Layout')),
body: Center(
child: Text(
'This is a Mobile Layout',
style: TextStyle(fontSize: 20),
),
),
);
}
}

16
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

// Layout for Tablet Screens

class TabletLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Tablet Layout')),
body: Row(
children: [
Expanded(
child: Container(color: Colors.blue, child: Center(child: Text('Sidebar'))),
),
Expanded(
flex: 3,
child: Container(color: Colors.white, child: Center(child: Text('Main Content'))),
),
],
),
);
}
}

// Layout for Desktop Screens

class DesktopLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Desktop Layout')),
body: Row(
children: [
Expanded(
child: Container(color: Colors.blueGrey, child: Center(child: Text('Sidebar'))),
),
Expanded(
flex: 2,
child: Container(color: Colors.grey[200], child: Center(child: Text('Main Area'))),
),
Expanded(
child: Container(color: Colors.blueGrey, child: Center(child: Text('Extra Panel'))),
),
],
),
);
}
}

17
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

18
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

4. a) Set up navigation between different screens using Navigator.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation Example',
home: FirstScreen(), // Start from FirstScreen
);
}
}
// First Screen
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("First Screen")),
body: Center(
child: ElevatedButton(
child: Text('Go to Second Screen'),
onPressed: () {
// Navigate to SecondScreen
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
),
),
);
}
}
// Second Screen
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Second Screen")),
body: Center(
child: ElevatedButton(
child: Text('Go Back'),
onPressed: () {
// Go back to FirstScreen
Navigator.pop(context);
},
),
),
);
}
}

19
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

20
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

4 b) Implement navigation with named routes.

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
// Main app class
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Named Route Demo',
// Define routes here
initialRoute: '/',
routes: {
'/': (context) => FirstScreen(),
'/second': (context) => SecondScreen(),
}, ); } }
// First screen
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("First Screen")),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/second'); // Navigate using route name
},
child: Text("Go to Second Screen"),
), ), ); } }
// Second screen
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Second Screen")),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context); // Go back to previous screen
},
child: Text("Go Back"),
),
),
);
}
}

21
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

22
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

5. a) Learn about stateful and stateless widgets.

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stateful and Stateless Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int counter = 0;
void incrementCounter() {
setState(() {
counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stateful and Stateless Example'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CounterDisplay(counter),
SizedBox(height: 20),
CounterButton(incrementCounter),
],
),
);
}
}
class CounterDisplay extends StatelessWidget {
final int count;
CounterDisplay(this.count);

23
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

@override
Widget build(BuildContext context) {
return Text(
'Counter Value: $count',
style: TextStyle(fontSize: 20),
);
}
}
class CounterButton extends StatelessWidget {
final VoidCallback onPressed;
CounterButton(this.onPressed);
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text('Increment Counter'),
);
}
}

24
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT :

25
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

5 b) Implement state management using set State and Provider.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (_) => CounterModel(),
child: MyApp(),
),
);
}
// �Global Counter using Provider
class CounterModel extends ChangeNotifier {
int _globalCount = 0;
int get count => _globalCount;
void increment() {
_globalCount++;
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Counter App',
initialRoute: '/',
routes: {
'/': (context) => CounterScreen(),
'/second': (context) => SecondScreen(),
},
);
}
}
// ✅First Screen with Local + Global Counter
class CounterScreen extends StatefulWidget {
@override
_CounterScreenState createState() => _CounterScreenState();
}
class _CounterScreenState extends State<CounterScreen> {
int _localCount = 0;
@override
Widget build(BuildContext context) {
final globalCounter = Provider.of<CounterModel>(context);
return Scaffold(
appBar: AppBar(title: Text("First Screen")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("� Global Counter: ${globalCounter.count}",
style: TextStyle(fontSize: 24)),

26
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

ElevatedButton(
onPressed: () => globalCounter.increment(),
child: Text("Increment Global"),
),
SizedBox(height: 20),
Text("� Local Counter: $_localCount",
style: TextStyle(fontSize: 24)),
ElevatedButton(
onPressed: () {
setState(() {
_localCount++;
});
},
child: Text("Increment Local"),
),
SizedBox(height: 30),
ElevatedButton(
onPressed: () => Navigator.pushNamed(context, '/second'),
child: Text("Go to Second Screen"),
),
],
),
),
);
}
}
// ✅Second Screen (shows same global, resets local)
class SecondScreen extends StatefulWidget {
@override
_SecondScreenState createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
int _localCount = 0;
@override
Widget build(BuildContext context) {
final globalCounter = Provider.of<CounterModel>(context);
return Scaffold(
appBar: AppBar(title: Text("Second Screen")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("� Global Counter: ${globalCounter.count}",
style: TextStyle(fontSize: 24)),
ElevatedButton(
onPressed: () => globalCounter.increment(),
child: Text("Increment Global"),
),
SizedBox(height: 20),
Text("� Local Counter: $_localCount",
style: TextStyle(fontSize: 24)),

27
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

ElevatedButton(
onPressed: () {
setState(() {
_localCount++;
});
},
child: Text("Increment Local"),
),
SizedBox(height: 30),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text("Back to First Screen"),
),
],
),
),
);
}
}

28
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

29
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

30
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

6. a) Create custom widgets for specific UI elements.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// Main App Widget
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Custom Widgets')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CustomTitle('Welcome to ACSESS!'),
SizedBox(height: 20),
CustomCard('This is a custom card.'),
SizedBox(height: 20),
CustomButton('Click Me', () {
print('Button clicked!');
}),
],
),
),
),
);
}
}

// Custom Title Widget

class CustomTitle extends StatelessWidget {

final String text;
CustomTitle(this.text);
@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
);
}
}

// Custom Card Widget

class CustomCard extends StatelessWidget {

final String content;
CustomCard(this.content);

31
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Text(content),
),
);
}
}

// Custom Button Widget

class CustomButton extends StatelessWidget {

final String label;
final VoidCallback onPressed;
CustomButton(this.label, this.onPressed);

@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text(label),
);
}
}

32
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

33
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

6 b) Apply styling using themes and custom styles.

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// Define the overall theme of the app
primaryColor: Colors.red,
fontFamily: 'Roboto',
textTheme: TextTheme(
headlineLarge: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
bodyMedium: TextStyle(fontSize: 16),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
textStyle: TextStyle(fontSize: 18),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Styling Using Themes and Custom Styles')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Welcome to SSIT',
style: Theme.of(context).textTheme.headlineLarge,
),
SizedBox(height: 20),
ElevatedButton(onPressed: () {}, child: Text('Get Started')),
],
),
),
); } }

34
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

35
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

7. Design a form with various input fields and Implement form validation and error
handling.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Form Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyForm(),
); } }
class MyForm extends StatefulWidget {
@override
_MyFormState createState() => _MyFormState();
}
class _MyFormState extends State<MyForm> {
final _formKey = GlobalKey<FormState>();
TextEditingController _nameController = TextEditingController();
TextEditingController _emailController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Form Example'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextFormField(
controller: _nameController,
decoration: InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your name';
}
return null;
},
),
SizedBox(height: 16),

36
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

TextFormField(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email';
} else if (!RegExp(r'^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$')
.hasMatch(value)) {
return 'Please enter a valid email address';
}
return null;
},
),
SizedBox(height: 16),
TextFormField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your password';
} else if (value.length < 6) {
return 'Password must be at least 6 characters long';
}
return null;
},
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// Form is valid, process the data
print('Name: ${_nameController.text}');
print('Email: ${_emailController.text}');
print('Password: ${_passwordController.text}');
}
},
child: Text('Submit'),
),
],
),
),
),
); } }

37
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

38
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

8. Add animations to UI elements using Flutter's animation framework.

Experiment with different types of animations (fade, slide, etc.).

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Animations Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: FirstScreen(),
routes: {
'/second': (context) => SecondScreen(),
},
);
}
}
class FirstScreen extends StatefulWidget {
@override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen>
with TickerProviderStateMixin {
late AnimationController _fadeController;
late AnimationController _rotationController;
late AnimationController _colorController;
@override
void initState() {
super.initState();
_fadeController = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
)..repeat(reverse: true);
_rotationController = AnimationController(
vsync: this,
duration: Duration(seconds: 5),
)..repeat();
_colorController = AnimationController(
vsync: this,
duration: Duration(seconds: 4),
)..repeat(reverse: true);
}
@override
void dispose() {
_fadeController.dispose();
_rotationController.dispose();
_colorController.dispose();
super.dispose();
}

39
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animated Screen 1')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FadeTransition(
opacity: _fadeController,
child: Text(
'I Fade In & Out',
style: TextStyle(
fontSize: 28, fontWeight: FontWeight.bold, color: Colors.black),
),
),
SizedBox(height: 20),
RotationTransition(
turns: _rotationController,
child: Icon(Icons.refresh, size: 50, color: Colors.blue),
),
SizedBox(height: 20),
AnimatedBuilder(
animation: _colorController,
builder: (context, child) {
return Container(
width: 100,
height: 100,
color: Color.lerp(
Colors.red, Colors.green, _colorController.value),
);
},
),
SizedBox(height: 30),
ElevatedButton(
child: Text("Go to Second Screen"),
onPressed: () {
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(seconds: 1),
pageBuilder: (_, __, ___) => SecondScreen(),
transitionsBuilder: (_, animation, __, child) {
return SlideTransition(
position:
Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0))
.animate(animation),
child: child,
);
},
),
);
},

40
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

),
],
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Animated Screen'),
),
body: Center(
child: Text(
'Welcome to Screen 2!',
style: TextStyle(fontSize: 24, color: Colors.blue),
),
),
);
}
}

41
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

42
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

9. Fetch data from a REST API and display the fetched data in a meaningful
way in the UI.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: PostList(),
);
}
}
class PostList extends StatefulWidget {
@override
_PostListState createState() => _PostListState();
}

class _PostListState extends State<PostList> {

List posts = [];
@override
void initState() {
super.initState();
fetchPosts();
}
void fetchPosts() async {
var url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
var response = await http.get(url);
if (response.statusCode == 200) {
setState(() {
posts = json.decode(response.body);
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Posts')),
body: ListView.builder(
itemCount: posts.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(posts[index]['title']),
);
},
),
);
}
}

43
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

44
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

10. a) Write unit tests for UI components.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
// UI Component (Counter Widget)
class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Counter')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Count: $_counter', style: TextStyle(fontSize: 24)),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
),
),
);
}
}

// Main Function (App Entry Point)

void main() {
runApp(MaterialApp(
home: Counter(),
));
// Running the unit tests
testWidgets('Counter starts at 0 and increments by 1 when button is clicked', (WidgetTester tester)
async {
// Build the Counter widget.
await tester.pumpWidget(MaterialApp(
home: Counter(),
));
// Verify that the counter starts at 0.
expect(find.text('Count: 0'), findsOneWidget);

45
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

// Tap the increment button and trigger a frame.

await tester.tap(find.text('Increment'));
await tester.pump();

// Verify that the counter increments by 1.

expect(find.text('Count: 1'), findsOneWidget);
// Tap again and trigger a frame.
await tester.tap(find.text('Increment'));
await tester.pump();
// Verify that the counter is now 2.
expect(find.text('Count: 2'), findsOneWidget);
}
);
}

46
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

47
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

10. b) Use Flutter's debugging tools to identify and fix issues.

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Debugging Example',
home: DebuggingExample(),
);
}
}
class DebuggingExample extends StatefulWidget {
@override
_DebuggingExampleState createState() => _DebuggingExampleState();
}
class _DebuggingExampleState extends State<DebuggingExample> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Debugging Example')),
body: Center(
child: SingleChildScrollView(
child: Counter(counter: _counter, onIncrement: _incrementCounter),
),
),
);
}
}

class Counter extends StatelessWidget {

final int counter;
final VoidCallback onIncrement;
const Counter({Key? key, required this.counter, required this.onIncrement})
: super(key: key);

48
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pressed the button $counter times.',
style: TextStyle(fontSize: 20),
),
ElevatedButton(
onPressed: onIncrement,
child: Text('Increment'),
),
],
);
}
}

49
FLUTTER –UI DESIGN Lab
UI DESIGN-FLUTTER LAB III B.TECH – I SEM 2024-25
2025-26

OUTPUT:

50