Experiment-1

1. a) Install Flutter and Dart SDK.

Aim: To 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 URL is: [Link]

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:

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 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.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 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.

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:

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Now we are done to use Dart from anywhere in the file system.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Step : Run Dart Using cmd

Result: Installation of Flutter and Dart SDK is successfully completed

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 1b) Write a simple Dart program to understand the language basics.

Aim: Write a simple Dart program to understand the language basics.

Description:

Dart is a modern, object-oriented programming language developed by Google, primarily used for
building Flutter applications. It is statically typed, meaning variable types are checked at compile
time, but it also supports type inference for simplicity. Dart combines features from many popular
languages, offering clean syntax, strong typing, and asynchronous programming capabilities.

Key concepts in Dart include variables for storing data, functions for executing reusable logic,
control flow statements like loops and conditionals for decision-making, and classes and objects
for object-oriented programming. Dart also provides collections such as lists, sets, and maps for
handling multiple values efficiently.

Dart is designed to be easy to learn, readable, and suitable for creating high-performance, cross-
platform applications.

Program:

void main(){

var firstName = "John"; var lastName = "Doe";

print("Full name is $firstName $lastName");

}

Output: Full name is John Doe

void main() {

int num1 = 10;

int num2 = 3;

// 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.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 // displaying the output

print("The sum is $sum");

print("The diff is $diff");

print("The mul is $mul");

print("The div is $div");
}

Output:

The sum is 13
The diff is 7
The mul is 30

The div is 3.3333333333333335

import 'dart:io';

void main() {

print("Enter number:");
int? number = [Link]([Link]()!);
print("The entered number is ${number}");
}

Output:

Enter number:

50
The entered number is 50

Result: A simple Dart program to understand the language basics is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 xperiment-2

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

Aim: To explore various Flutter widgets (Text, Image, Container, etc.).

Description:
Flutter uses widgets as the fundamental building blocks of its user interface. Everything in
Flutter, from text and images to buttons and containers, is a widget. Widgets can be
stateless, which do not change over time, or stateful, which can update dynamically based
on user interaction or data changes.
There are several types of widgets in Flutter:
• Structural Widgets: Define the UI structure, e.g., Scaffold, AppBar.
• Functional Widgets: Handle functionality, e.g., Button, TextField.
• Styling Widgets: Add visual styling, e.g., Container, Padding.
• Layout Widgets: Arrange other widgets, e.g., Row, Column, Stack, GridView.
• Interactive Widgets: Respond to user input, e.g., GestureDetector, InkWell.
By combining these widgets and layouts, developers can create flexible, responsive, and
visually appealing interfaces for mobile, web, and desktop applications.

Program:

Text Widget:

import 'package:flutter/[Link]';
// function to trigger build process

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

class GeeksforGeeks extends StatelessWidget {

const GeeksforGeeks({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(
home: Scaffold(

backgroundColor: [Link](255, 35, 7, 220),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 appBar: AppBar(
backgroundColor: [Link](255, 223, 27, 233),

title: const Text("Welcome Screen"),

), // AppBar

body: Container(

child: const Center(

child: Text(

"Hello world Welcome to Flutter Learning!!",

style: TextStyle(
fontSize: 26,

color: [Link],
fontWeight: [Link],
),

),

), // Center

), // Container
), // Scaffold
); // MaterialApp

Output:

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Image Widget:
import 'package:flutter/[Link]';

void main() {

runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(
home: MyHomePage(),

debugShowCheckedModeBanner: false, // removes debug banner

);

class MyHomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(

title: Text("Flutter Image Example"),

backgroundColor: [Link](255, 192, 40, 192),

),

body: Center(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 child: Column(
mainAxisAlignment: [Link],

children: [

Text(

"SUNSET",

style: TextStyle(
fontSize: 25,

fontWeight: [Link],

color: [Link](255, 175, 76, 76),

),

),

SizedBox(height: 20), // space between text and image

// Image from Internet (Network)

[Link](
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD',

height: 250,
width: 350,

fit: [Link],

),

],

),

),

);
}

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Output:

Container widget:

import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(
appBar: AppBar(

title: const Text("Container Example"),

),

body: Container(
height: 200,
width: [Link],

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 // color: [Link],
alignment: [Link],
margin: const [Link](20),

padding: const [Link](30),

decoration: BoxDecoration(
border: [Link](color: [Link](255, 244, 20, 20), width: 3),

),

child: const Text(

"Hello! This is a container!",

style: TextStyle(fontSize: 20),
),

),

),

);

}
Output:

Result: Exploring various Flutter widgets (Text, Image, Container, etc.) is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 2b) Implement different layout structures using Row, Column, and Stack widgets

Aim: Implement different layout structures using Row, Column, and Stack widgets
Description:

In Flutter, layout widgets are used to arrange other widgets on the screen. Three commonly used
layout widgets are Row, Column, and Stack.
• Row arranges its child widgets horizontally in a single line. It is useful for creating
horizontal menus, buttons, or icon layouts.
• Column arranges its child widgets vertically in a single column. It is commonly used for
forms, lists, or stacking content from top to bottom.
• Stack allows widgets to be overlapped on top of each other. It is useful for creating
complex UI designs like floating buttons, banners, or layered graphics.
By combining these layout widgets with properties like alignment, padding, and spacing,
developers can design flexible, responsive, and visually appealing user interfaces in Flutter.
Program:

Row Widget:
import 'package:flutter/[Link]';

void main() {

runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {

return MaterialApp(

home: MyHomePage(),

debugShowCheckedModeBanner: false,
);

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 }
}

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(

title: const Text("Flutter Row Example"),

backgroundColor: [Link],

),
body: Center(

child: Row(

mainAxisAlignment: [Link],

children: <Widget>[
// First Container

Container(

margin: const [Link](12.0),

padding: const [Link](8.0),

decoration: BoxDecoration(
borderRadius: [Link](8),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 color: [Link](255, 76, 78, 175),
),

child: const Text(

"[Link]",

style: TextStyle(
color: [Link](223, 255, 255, 1),

fontSize: 25,

),

),
),

// Second Container

Container(

margin: const [Link](12.0),

padding: const [Link](8.0),

decoration: BoxDecoration(
borderRadius: [Link](8),
color: [Link](255, 240, 170, 19),

),

child: const Text(

"[Link]",

style: TextStyle(
color: [Link],
fontSize: 25,

),

),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 ),

// Third Container

Container(

margin: const [Link](12.0),

padding: const [Link](8.0),

decoration: BoxDecoration(
borderRadius: [Link](8),

color: [Link](255, 168, 76, 175),

),

child: const Text(

"Flutter",
style: TextStyle(

color: [Link],

fontSize: 25,

),
),
),

],

),

),

);

}
}

Output:

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Column widget:

import 'package:flutter/[Link]';

void main() {

runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: MyHomePage(),
debugShowCheckedModeBanner: false,
);

class MyHomePage extends StatefulWidget {

@override

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text("Flutter Column Example"),

backgroundColor: [Link](255, 54, 105, 244),

),

body: Center(

child: Column(

mainAxisAlignment: [Link],
children: <Widget>[

// First Container
Container(
margin: const [Link](20.0),

padding: const [Link](12.0),

decoration: BoxDecoration(

borderRadius: [Link](8),
color: [Link](255, 42, 221, 26),

),

child: const Text(

"MySQL",
style: TextStyle(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 color: [Link],
fontSize: 20,

),

),

),

// Second Container

Container(

margin: const [Link](20.0),

padding: const [Link](12.0),
decoration: BoxDecoration(

borderRadius: [Link](8),
color: [Link](255, 49, 235, 20),

),

child: const Text(

"[Link]",
style: TextStyle(

color: [Link](255, 250, 234, 8),

fontSize: 20,

),

),

),

// Third Container

Container(
margin: const [Link](20.0),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 padding: const [Link](12.0),
decoration: BoxDecoration(
borderRadius: [Link](8),

color: [Link](255, 18, 224, 15),

),

child: const Text(

"Flutter",
style: TextStyle(

color: [Link],
fontSize: 20,

),

),

),

],

),

),
);

Output:

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Stack widget:
import 'package:flutter/[Link]';

void main() {

runApp(

MaterialApp(

home: Scaffold(

appBar: AppBar(
title: const Text('GeeksforGeeks'),
backgroundColor: [Link](255, 255, 124, 64), // Changed AppBar color

), // AppBar

body: Center(

child: SizedBox(
width: 300,

height: 300,
child: Center(
child: Stack(

// The widgets are stacked on top of each other.

children: <Widget>[

// 1. Largest container (Bottom of the stack)

Container(
width: 300,

height: 300,
color: [Link](255, 101, 102, 182), // Changed from red to Orange

), // Container

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 // 2. Middle container
Container(

width: 250,

height: 250,

color: [Link], // Changed from black to Cyan

), // Container

// 3. Smallest container (Top of the stack)

Container(
width: 200,

height: 200,

color: [Link](255, 30, 33, 233), // Changed from purple/green to Pink

), // Container

], // <Widget>[]

), // Stack

), // Center
), // SizedBox
), // Center

), // Scaffold

), // MaterialApp

);

Output:

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Result: Implementation of different layout structures using Row, Column, and Stack widgets is
successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Experiment-3

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

Aim: Implement different layout structures using Row, Column, and Stack widgets
Description:
A responsive UI automatically adjusts its layout and content to fit different screen sizes
and orientations, ensuring a consistent experience across devices like phones, tablets, and
desktops.
In Flutter, you can achieve responsiveness using:
• MediaQuery to get information about screen size, orientation, and pixel density.
• Flexible and Expanded widgets to allow widgets to resize dynamically and fill
available space.
• LayoutBuilder to adapt layouts based on the parent widget’s constraints.
• OrientationBuilder to modify UI when switching between portrait and landscape
modes.
• AspectRatio and FittedBox to maintain proportions and scale content properly.
By combining these tools with scrollable widgets and relative sizing, developers can create
flexible, adaptive, and user-friendly interfaces that look good on any device.
Program:
import 'package:flutter/[Link]';

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

class ResponsiveUIApp extends StatelessWidget {

const ResponsiveUIApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Responsive UI Demo',
// Set the overall theme primary color here
theme: ThemeData(
primarySwatch: [Link], // Overall app theme color
),
home: const ResponsiveHome(),
);
}
}

class ResponsiveHome extends StatelessWidget {

const ResponsiveHome({Key? key}) : super(key: key);

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 @override
Widget build(BuildContext context) {
// Get screen width
double screenWidth = [Link](context).[Link];

// Determine device type based on width

bool isMobile = screenWidth < 600;

// Set card width dynamically

double cardWidth = isMobile
? screenWidth * 0.9 // 90% width on mobile
: screenWidth >= 1024
? screenWidth * 0.25 // 25% width on desktop
: screenWidth * 0.45; // 45% width on tablet

return Scaffold(
// Changed Scaffold background for a slightly lighter effect
backgroundColor: [Link][50],
appBar: AppBar(
title: const Text("Responsive UI Example"),
backgroundColor: [Link], // Deep Violet/Purple for AppBar
),
body: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 20),

// Header
Container(
width: [Link],
padding: const [Link](16),
color: [Link][100], // Light Pink header background
child: const Center(
child: Text(
"Welcome to Responsive Flutter UI",
style: TextStyle(
fontSize: 24,
fontWeight: [Link],
color: [Link]), // Violet text
textAlign: [Link],
),
),
),
const SizedBox(height: 20),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 // Responsive cards using Wrap
Wrap(
spacing: 16,
runSpacing: 16,
alignment: [Link],
children: [Link](
6,
(index) => Container(
width: cardWidth,
height: 150,
decoration: BoxDecoration(
color: [Link][400], // Bright Pink for cards
borderRadius: [Link](12),
// Adding a subtle shadow with a violet hue
boxShadow: [
BoxShadow(
color: [Link](0.3),
spreadRadius: 2,
blurRadius: 5,
offset: const Offset(0, 3),
),
],
),
child: Center(
child: Text(
"Card ${index + 1}",
style: const TextStyle(
fontSize: 20,
color: [Link], // White text for contrast
fontWeight: [Link],
),
),
),
),
),
),
const SizedBox(height: 20),

// Footer
Container(
width: [Link],
padding: const [Link](16),
color: [Link][100], // Light Violet footer
child: const Center(
child: Text(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 "© 2025 Responsive UI Example",
style: TextStyle(fontSize: 16, color: Colors.black54),
),
),
),
],
),
),
);
}
}

Output:

Result: Designing a responsive UI that adapts to different screen sizes is successfully

completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 3 b) Implement media queries and breakpoints for responsiveness.

Aim: To implement media queries and breakpoints for responsiveness

Description:

In Flutter, media queries and breakpoints are used to make user interfaces responsive across
different screen sizes and orientations.
• MediaQuery provides information about the device’s screen dimensions, orientation, and
pixel density. Using this, developers can dynamically adjust widget sizes, padding, margins,
and font sizes to fit any screen.
• Breakpoints define thresholds for different screen sizes, such as mobile, tablet, or desktop.
By checking the screen width against these breakpoints, you can implement adaptive
layouts that change the UI structure or widget arrangement depending on the device.
Combining media queries and breakpoints ensures that the UI is flexible, readable, and user-
friendly on all devices, providing a consistent and optimized experience.
Program:
import 'package:flutter/[Link]';

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

class ResponsiveBreakpointsApp extends StatelessWidget {

const ResponsiveBreakpointsApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Responsive UI with Breakpoints',
home: const HomePage(),
);
}
}

class HomePage extends StatelessWidget {

const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
// Get screen width
double screenWidth = [Link](context).[Link];

// Define breakpoints

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 bool isMobile = screenWidth < 600;
bool isTablet = screenWidth >= 600 && screenWidth < 1024;
bool isDesktop = screenWidth >= 1024;
return Scaffold(
appBar: AppBar(
title: const Text("Responsive UI Example"),
backgroundColor: [Link](255, 145, 0, 150),
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
// Header
Text(
"Screen Width: ${[Link](0)} px",
style: const TextStyle(fontSize: 20),
),
const SizedBox(height: 20),

// Adaptive Layout
if (isMobile)
buildBox("Mobile Layout", [Link](255, 55, 0, 255), screenWidth *
0.8)
else if (isTablet)
buildBox("Tablet Layout", [Link](255, 243, 33, 103), screenWidth
* 0.6)
else if (isDesktop)
buildBox("Desktop Layout", [Link](255, 173, 175, 76),
screenWidth * 0.4),
],
),
),
);
}
Widget buildBox(String text, Color color, double width) {
return Container(
width: width,
height: 150,
decoration: BoxDecoration(
color: color,
borderRadius: [Link](12),
),
child: Center(
child: Text(
text,

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 style: const TextStyle(fontSize: 24, color: [Link]),
),
),
);
}
}

Output:

Result: Implementation of media queries and breakpoints for responsiveness is

successfully executed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Experiment-4
4 a) Set up navigation between different screens using Navigator.

Aim: Set up navigation between different screens using Navigator.

Description:

In Flutter, navigation between screens is managed using the Navigator widget, which maintains a
stack of routes. Each screen in the app is represented by a route, and the Navigator allows you to
move forward to a new screen or back to a previous one, maintaining the navigation history.
• Navigate to a new screen: Push a new screen onto the stack using:
[Link](context, MaterialPageRoute(builder: (context) => SecondScreen()))
This displays the new screen on top of the current one.
• Return to the previous screen: Pop the current screen from the stack using:
[Link](context)
• Passing data between screens: Navigator also allows sending and receiving data when
moving between screens, which helps in dynamic content updates and interactive UIs.
Using Navigator, developers can build multi-screen applications with smooth transitions, structured
navigation flow, and intuitive user experiences. It is a foundational tool in Flutter for managing
screen flows, handling back actions, and creating both simple and complex navigation patterns.
Program:

import 'package:flutter/[Link]';
void main() => runApp(const NavigationDemoApp());
class NavigationDemoApp extends StatelessWidget {
const NavigationDemoApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Navigator Demo',
// Set the overall theme primary color here
theme: ThemeData(
primarySwatch: [Link], // Changed primary color
),
home: const HomeScreen(),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 );
}
}
// Home Screen
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home Screen"),
backgroundColor: [Link], // Changed AppBar color
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
const Text(
"Welcome to Home Screen",
style: TextStyle(fontSize: 24),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// Navigate to Second Screen
[Link](
context,
MaterialPageRoute(builder: (context) => const SecondScreen()),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 );
},
// The button color will likely be derived from the 'primarySwatch' in MaterialApp
child: const Text("Go to Second Screen"),
),
],
),
),
);
}
}
// Second Screen
class SecondScreen extends StatelessWidget {
const SecondScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Second Screen"),
backgroundColor: [Link], // Changed AppBar color
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
const Text(
"You are on the Second Screen",
style: TextStyle(fontSize: 24),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 ),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// Go back to previous screen
[Link](context);
},
child: const Text("Go Back"),
),
],
),
),
);
}
}
Output:

Result: Setting up navigation between different screens using Navigator is successfully executed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 4 b) Implement navigation with named routes.

Aim: Implement navigation with named routes.

Description:

In Flutter, named routes provide a convenient way to navigate between screens using string
identifiers instead of directly passing widget instances. Named routes make navigation more
organized, maintainable, and scalable, especially for apps with multiple screens.
• Defining routes: All routes are declared in the MaterialApp widget using the routes
property. Each route maps a string name to a corresponding screen widget.
• Navigating to a screen: You can navigate to a screen using [Link](context,
'/routeName').
• Returning to the previous screen: Use [Link](context) as usual to go back.
• Passing arguments: Named routes can also receive data through the arguments property,
allowing dynamic content on the destination screen.
Using named routes makes it easier to manage complex navigation flows, ensures consistency
across the app, and separates route definitions from widget logic, improving code readability and
maintainability.

Program:

import 'package:flutter/[Link]';

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

class NamedRoutesApp extends StatelessWidget {

const NamedRoutesApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Named Routes Demo',
// Define a theme with a new primary color
theme: ThemeData(
primarySwatch: [Link], // Changed primary color

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 // The color for the overall app's background might be implicitly affected,
// but we'll focus on AppBars and buttons.
),
// Define routes
initialRoute: '/',
routes: {
'/': (context) => const HomeScreen(),
'/second': (context) => const SecondScreen(),
},
);
}
}

// Home Screen
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home Screen"),
backgroundColor: [Link], // Changed AppBar color from teal
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
const Text(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 "Welcome to Home Screen",
style: TextStyle(fontSize: 24),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// Navigate to Second Screen using named route
[Link](context, '/second');
},
// Button color is typically derived from the `primarySwatch` (now blue)
child: const Text("Go to Second Screen"),
),
],
),
),
);
}
}

// Second Screen
class SecondScreen extends StatelessWidget {
const SecondScreen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Second Screen"),
backgroundColor: [Link], // Changed AppBar color from orange

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 ),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
const Text(
"You are on the Second Screen",
style: TextStyle(fontSize: 24),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// Go back to previous screen
[Link](context);
},
child: const Text("Go Back"),
),
],
),
),
);
}
}
Output:

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Experiment-5
5.a) Learn about stateful and stateless widgets.

Aim: Learn about stateful and stateless widgets.

Description:

In Flutter, widgets are the fundamental building blocks of the user interface, and they come in two
main types: stateless and stateful.
1. Stateless Widgets

o Definition: A stateless widget is immutable, meaning its properties cannot change

once it is built.

o Use Case: Ideal for static UI elements that do not depend on user interaction or
dynamic data, such as labels, icons, or fixed images.

o Example Behavior: When the app’s state changes, stateless widgets do not rebuild
automatically.

2. Stateful Widgets

o Definition: A stateful widget can change its internal state over time, and the UI
updates automatically when the state changes.

o Use Case: Suitable for dynamic UI components like counters, forms, checkboxes,
sliders, and animations that respond to user interaction.

o Example Behavior: Uses a State object to manage the widget’s state, and calling
setState() triggers a rebuild of the UI.

Understanding the difference between stateless and stateful widgets is crucial for building efficient
Flutter applications. Stateless widgets are lightweight and simple, while stateful widgets provide
interactivity and dynamic behavior, allowing developers to create responsive and interactive user
interfaces.

Program:
import 'package:flutter/[Link]';

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

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 class MyApp extends StatelessWidget {
@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Stateful and Stateless Example',

theme: ThemeData(
primarySwatch: [Link],

),

home: MyHomePage(),
);

// Stateful Widget

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {

int counter = 0;
void incrementCounter() {

setState(() {
counter++;

});

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 @override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(

title: const Text('Stateful and Stateless Example'),

),

body: Center( // Center the entire column

child: Column(

mainAxisSize: [Link], // Center vertically

children: <Widget>[

CounterDisplay(counter),

const SizedBox(height: 20),

CounterButton(incrementCounter),

],

),

),
);

// ------------------- Stateless Widget for Display -------------------

class CounterDisplay extends StatelessWidget {

final int count;

const CounterDisplay([Link], {Key? key}) : super(key: key);

@override

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Widget build(BuildContext context) {
return Text(

'Counter Value: $count',

style: const TextStyle(fontSize: 24, fontWeight: [Link]),

);

// Stateless Widget for Button

class CounterButton extends StatelessWidget {
final VoidCallback onPressed;

const CounterButton([Link], {Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return ElevatedButton(
onPressed: onPressed,

child: const Text('Increment Counter', style: TextStyle(fontSize: 18)),

);

Output:

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Result: Learning about stateful and stateless widgets is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 5 b) Implement state management using set State and Provider.
Aim: Implement state management using set State and Provider.
Description:
In Flutter, state management is the process of handling data changes and updating the UI
efficiently. Proper state management ensures that the app remains responsive, consistent, and
easy to maintain.
1. setState
o Used in stateful widgets to manage local state.
o Calling setState(() { /* update state */ }) rebuilds the widget to reflect the changes.
o Best suited for simple or temporary state that only affects a single widget or its
immediate children.
o Limitation: Cannot easily share state across multiple screens or unrelated widgets.
2. Provider
o A state management library that allows global or shared state across the entire
app.
o Uses ChangeNotifier to hold state and notify listening widgets whenever changes
occur.
o Ideal for more complex scenarios where multiple screens or widgets need access to
the same data, such as user authentication, shopping carts, or theme settings.
o Helps keep code organized, scalable, and maintainable by separating UI from
business logic.
By combining setState for local updates and Provider for shared or complex state, Flutter
developers can create apps that are efficient, responsive, and scalable, providing a smooth and
consistent user experience.

Program:
import 'package:flutter/[Link]';

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

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 class MyApp extends StatefulWidget{
const MyApp({[Link]});

@override
State<MyApp> createState()=> MyAppState();
}

class MyAppState extends State<MyApp>{

//Default Theme is light
bool isDark = false;

@override
Widget build(BuildContext context){
return MaterialApp(
title: 'Theme Toggle Demo',
debugShowCheckedModeBanner: false,//Removes Debug debugShowCheckedModeBanner
theme: ThemeData(
brightness: [Link],
primarySwatch: [Link],
),
darkTheme: ThemeData(
brightness: [Link],
primarySwatch: [Link],
),
themeMode: isDark ? [Link] : [Link],//Toggle
home:Scaffold(
appBar:AppBar(
title: const Text("Theme Toggle Demo"),
actions: [

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Switch(
value: isDark,
onChanged: (value){
setState((){
isDark=value;
});
},
),
],
),
body: const Center(
child: Text(
"Hello, Flutter Themes!",
style: TextStyle(fontSize:24,fontWeight:[Link]),
),
),
),
);
}
}

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Output:

Result: Implementing state management using set State and Provider is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Experiment-6
6.a) Create custom widgets for specific UI elements.
Aim: Create custom widgets for specific UI elements.
Description:
In Flutter, custom widgets allow developers to create reusable, modular components for the user
interface. Instead of writing the same code repeatedly, you can encapsulate design and
functionality into a single widget that can be used throughout the app.
• Definition: A custom widget is a user-defined widget that combines Flutter’s built-in
widgets, styling, and behavior to create a specific UI component.
• Benefits:
o Reusability: Use the same widget in multiple places without rewriting code.
o Maintainability: Changes to the widget automatically reflect wherever it is used.
o Readability: Simplifies complex UIs by breaking them into smaller, manageable
pieces.
• Use Cases: Buttons with custom styles, card layouts, input fields, alert dialogs, profile
cards, and any consistent UI element across the app.
• Types: Custom widgets can be stateless (if they don’t change) or stateful (if they maintain
internal state).
Creating custom widgets is essential for clean, organized, and scalable Flutter apps, allowing
developers to maintain a consistent design system and improve development efficiency.
Program:
import 'package:flutter/[Link]';

// Custom Button
class CustomButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;
final Color buttonColor;
final Color textColor;

const CustomButton({
Key? key,

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 required [Link],
required [Link],
[Link] = [Link],
[Link] = [Link],
}) : super(key: key);

@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
style: ButtonStyle(
backgroundColor: [Link]<Color>(buttonColor),
foregroundColor: [Link]<Color>(textColor),
),
child: Text(text),
);
}
}

// Main App
void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 return MaterialApp(
debugShowCheckedModeBanner: false,
home: const HomeScreen(),
);
}
}

// Home Screen
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);

void _showWarning(BuildContext context) {

final snackBar = SnackBar(
content: const Text(
'Button Pressed!',
style: TextStyle(fontWeight: [Link]),
),
backgroundColor: [Link](255, 0, 0, 0),
duration: const Duration(seconds: 2),
behavior: [Link],
);

[Link](context).showSnackBar(snackBar);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 title: const Text('Custom Button Example'),
),
body: Center(
child: CustomButton(
text: 'Click Me',
onPressed: () => _showWarning(context),
),
),
);
}
}

Output:

Result: Creating custom widgets for specific UI elements is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 6.b) Apply styling using themes and custom styles.
Aim: Apply styling using themes and custom styles.
Description:
In Flutter, themes and custom styles provide a way to maintain a consistent look and feel across
the entire application. Instead of styling individual widgets repeatedly, you can define global styles
that can be applied throughout the app.
• Themes:
o Defined using the ThemeData class in the MaterialApp widget.
o Allows you to set primary colors, accent colors, text styles, button styles, and
more globally.
o Makes it easy to maintain a consistent design and quickly change the app’s
appearance.
• Custom Styles:
o Individual widgets can have customized properties like font size, font family,
colors, padding, and borders.
o Custom styles can be combined with themes to override global defaults for specific
widgets.
• Benefits:
o Consistency: Ensures uniform styling across all screens.
o Maintainability: Changing a theme or style updates all associated widgets
automatically.
o Efficiency: Reduces repetitive code and improves scalability.

Program:
import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {

const MyApp({[Link]});

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 @override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Theme & Custom Styles Demo',

// Global Theme
theme: ThemeData(
primaryColor: [Link],
colorScheme: [Link](
seedColor: [Link],
brightness: [Link],
),
textTheme: const TextTheme(
headline6: TextStyle(
fontSize: 24,
fontWeight: [Link],
color: [Link],
),
bodyText2: TextStyle(
fontSize: 16,
color: Colors.black87,
),
),
),

home: const HomeScreen(),

);
}

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 }

class HomeScreen extends StatelessWidget {

const HomeScreen({[Link]});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Theme & Custom Styles',
style: [Link](context).textTheme.headline6, // Using theme style
),
backgroundColor: [Link](context).[Link],
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
// Using global theme style
Text(
'Hello, Flutter!',
style: [Link](context).textTheme.bodyText2,
),
const SizedBox(height: 20),

// Custom style overriding the theme

Text(
'Custom Styled Text',

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 style: const TextStyle(
fontSize: 20,
fontWeight: [Link],
color: [Link],
fontStyle: [Link],
),
),
const SizedBox(height: 20),

// Button with custom style

ElevatedButton(
onPressed: () {},
style: [Link](
backgroundColor: [Link], // custom color
foregroundColor: [Link], // custom text color
padding: const [Link](horizontal: 24, vertical: 12),
),
child: const Text('Custom Button'),
),
],
),
),
);
}
}

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Output:

Result: Applying styling using themes and custom styles is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Experiment-7
7. a) Design a form with various input fields
Aim: Design a form with various input fields
Description:
In Flutter, forms are used to collect and validate user input. The Form widget acts as a container
for input fields and uses a GlobalKey for validation.
• Common Input Fields:
o TextFormField: Single or multi-line text input.
o Password Fields: Obscured text for secure entry.
o Email Fields: Text input with email-specific validation.
o Checkboxes & Radio Buttons: For selecting options.
o Dropdowns: Selecting values from a list.
o Date/Time Pickers: For choosing dates or times.
• Validation:
o Each field can have a validator to check correctness, e.g., empty fields, email
format, or password length.
o Form submission occurs only when all validations pass.
Using Flutter forms allows developers to create structured, interactive, and user-friendly input
interfaces for mobile and web applications.
Program:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Form Example',
theme: ThemeData(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 primarySwatch: [Link],
),
home: MyForm(),
debugShowCheckedModeBanner: false,
);
}
}

class MyForm extends StatefulWidget {

@override
_MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {

final _formKey = GlobalKey<FormState>();

// Controllers for all input fields

TextEditingController _nameController = TextEditingController();
TextEditingController _emailController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
TextEditingController _phoneController = TextEditingController();
TextEditingController _genderController = TextEditingController();
TextEditingController _ageController = TextEditingController();

void _submitForm() {
if (_formKey.currentState!.validate()) {
// Show SnackBar on successful submission
[Link](context).showSnackBar(
const SnackBar(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 content: Text('Form Submitted Successfully!'),
backgroundColor: [Link],
duration: Duration(seconds: 2),
),
);

// Clear all input fields after submission

_nameController.clear();
_emailController.clear();
_passwordController.clear();
_phoneController.clear();
_genderController.clear();
_ageController.clear();
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Form Example'),
),
body: SingleChildScrollView(
child: Padding(
padding: const [Link](16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: [Link],

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 children: <Widget>[
// Name
TextFormField(
controller: _nameController,
decoration: const InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {
return 'Please enter your name';
}
return null;
},
),
const SizedBox(height: 16),

// Email
TextFormField(
controller: _emailController,
keyboardType: [Link],
decoration: const InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {
return 'Please enter your email';
} else if (!RegExp(r'^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$')

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 .hasMatch(value)) {
return 'Please enter a valid email address';
}
return null;
},
),
const SizedBox(height: 16),

// Password
TextFormField(
controller: _passwordController,
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {
return 'Please enter your password';
} else if ([Link] < 6) {
return 'Password must be at least 6 characters long';
}
return null;
},
),
const SizedBox(height: 16),

// Phone
TextFormField(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 controller: _phoneController,
keyboardType: [Link],
decoration: const InputDecoration(
labelText: 'Phone',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {
return 'Please enter your phone number';
} else if (!RegExp(r'^\d{10}$').hasMatch(value)) {
return 'Enter a valid 10-digit phone number';
}
return null;
},
),
const SizedBox(height: 16),

// Gender
TextFormField(
controller: _genderController,
decoration: const InputDecoration(
labelText: 'Gender',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {
return 'Please enter your gender';
}
return null;

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 },
),
const SizedBox(height: 16),

// Age
TextFormField(
controller: _ageController,
keyboardType: [Link],
decoration: const InputDecoration(
labelText: 'Age',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {
return 'Please enter your age';
} else if ([Link](value) == null || [Link](value) <= 0) {
return 'Enter a valid age';
}
return null;
},
),
const SizedBox(height: 16),

ElevatedButton(
onPressed: _submitForm,
child: const Text('Submit'),
),
],
),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 ),
),
),
);
}
}

Output:

Result: Designing a form with various input fields is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 7. b) Implement form validation and error handling
Aim: Implement form validation and error handling
Description:
In Flutter, form validation and error handling ensure that user input is accurate, complete, and
consistent before being processed. Proper validation improves data integrity and enhances the
user experience by providing immediate feedback.
• Form Widget:
o The Form widget acts as a container for input fields and uses a GlobalKey to
manage validation state.
• Validator Functions:
o Each input field can have a validator function that checks the entered data.
o Examples include checking for empty fields, valid email formats, password
length, or custom business rules.
• Error Display:
o Validation errors are typically shown below the input field using the errorText
property in InputDecoration.
o Users can immediately see what needs correction, making the app more user-
friendly.
• Handling Submission:
o Forms should only be submitted if all validations pass, ensuring safe and correct
data is processed.
o Developers can handle additional errors (e.g., network or server errors) and display
appropriate messages using widgets like SnackBar or Dialogs.
o

Program:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 return MaterialApp(
title: 'Form Validation Example',
theme: ThemeData(
primarySwatch: [Link],
),
home: MyForm(),
debugShowCheckedModeBanner: false,
);
}
}

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();
TextEditingController _phoneController = TextEditingController();
TextEditingController _ageController = TextEditingController();
TextEditingController _genderController = TextEditingController();

void _submitForm() {
if (_formKey.currentState!.validate()) {
// Show SnackBar instead of printing to console

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 [Link](context).showSnackBar(
const SnackBar(
content: Text('Form Submitted Successfully!'),
backgroundColor: [Link],
duration: Duration(seconds: 2),
),
);

// Clear fields
_nameController.clear();
_emailController.clear();
_passwordController.clear();
_phoneController.clear();
_ageController.clear();
_genderController.clear();
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Form Validation Example'),
),
body: Padding(
padding: const [Link](16.0),
child: Form(
key: _formKey,
child: SingleChildScrollView( // ensures no overflow on small screens

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 child: Column(
crossAxisAlignment: [Link],
children: <Widget>[
// Name
TextFormField(
controller: _nameController,
decoration: const InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {
return 'Please enter your name';
}
return null;
},
),
const SizedBox(height: 16),

// Email
TextFormField(
controller: _emailController,
keyboardType: [Link],
decoration: const InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 return 'Please enter your email';
} else if (!RegExp(r'^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$')
.hasMatch(value)) {
return 'Please enter a valid email address';
}
return null;
},
),
const SizedBox(height: 16),

// Password
TextFormField(
controller: _passwordController,
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {
return 'Please enter your password';
} else if ([Link] < 6) {
return 'Password must be at least 6 characters long';
}
return null;
},
),
const SizedBox(height: 16),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 // Phone
TextFormField(
controller: _phoneController,
keyboardType: [Link],
decoration: const InputDecoration(
labelText: 'Phone',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {
return 'Please enter your phone number';
} else if (!RegExp(r'^\d{10}$').hasMatch(value)) {
return 'Enter a valid 10-digit phone number';
}
return null;
},
),
const SizedBox(height: 16),

// Age
TextFormField(
controller: _ageController,
keyboardType: [Link],
decoration: const InputDecoration(
labelText: 'Age',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 return 'Please enter your age';
} else if ([Link](value) == null || [Link](value) <= 0) {
return 'Enter a valid age';
}
return null;
},
),
const SizedBox(height: 16),

// Gender
TextFormField(
controller: _genderController,
decoration: const InputDecoration(
labelText: 'Gender',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || [Link]) {
return 'Please enter your gender';
}
return null;
},
),
const SizedBox(height: 16),

ElevatedButton(
onPressed: _submitForm,
child: const Text('Submit'),
),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 ],
),
),
),
),
);
}
}

Output:

Result: Implementing form validation and error handling is successfully completed

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Experiment-8
8. a) Add animations to UI elements using Flutter's animation framework.
Aim: Add animations to UI elements using Flutter's animation framework.
Description:
In Flutter, animations make apps interactive, engaging, and visually appealing. Flutter’s
animation framework provides powerful tools to animate widgets, transitions, and UI elements.
• AnimationController:
o The core class that controls the animation’s duration, start, stop, and repeat.
o It generates values over time that can be applied to widgets.
• Tween & CurvedAnimation:
o Tween defines the start and end values of an animation, such as opacity, size, or
position.
o CurvedAnimation adds easing effects like bounce, ease-in, or ease-out to make
animations more natural.
• Animated Widgets:
o Flutter provides built-in widgets like FadeTransition, SlideTransition,
ScaleTransition, and RotationTransition.
o These widgets simplify the process of animating changes in opacity, position, size,
or rotation.
• Benefits:
o Animations improve user experience by making interactions smoother.
o They help draw attention to important elements and provide feedback on user
actions.

Program:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Widget build(BuildContext context) {
return MaterialApp(
title: 'Animation Example',
theme: ThemeData(
primarySwatch: [Link],
),
home: MyAnimatedWidget(),
debugShowCheckedModeBanner: false,
);
}
}

class MyAnimatedWidget extends StatefulWidget {

@override
_MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>

with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _opacityAnimation;

@override
void initState() {
[Link]();

// Create an AnimationController with a duration of 1 second

_animationController = AnimationController(
vsync: this,

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 duration: const Duration(seconds: 1),
);

// Create a Tween to animate opacity from 0.0 to 1.0

_opacityAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: [Link],
),
);

// Start the animation

_animationController.forward();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Animation Example'),
),
body: Center(
child: FadeTransition(
opacity: _opacityAnimation,
child: Container(
width: 200,
height: 200,
color: [Link],
child: const Center(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 child: Text(
'Animated Widget',
style: TextStyle(
color: [Link],
fontSize: 20,
),
),
),
),
),
),
);
}

@override
void dispose() {
_animationController.dispose();
[Link]();
}
}

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Output:

Result: Adding animations to UI elements using Flutter's animation framework is successfully

completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 8. b) Experiment with different types of animations (fade, slide, etc.).
Aim: Experiment with different types of animations (fade, slide, etc.).
Description:
Flutter’s animation framework allows developers to create interactive and engaging UI effects.
• Fade Animations: Use FadeTransition to animate opacity, for gradual appearance or
disappearance.
• Slide Animations: Use SlideTransition to move widgets on or off screen, ideal for page
transitions or menus.
• Scale Animations: Use ScaleTransition to animate size, useful for buttons or popups.
• Rotation Animations: Use RotationTransition to rotate widgets, like loading indicators or
icons.
• Combination Animations: Combine multiple animations with AnimatedBuilder for
complex effects.
Experimenting with these animations enhances visual appeal, user interaction, and overall app
experience.
Program:
Fade Animation:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fade Animation Example',
theme: ThemeData(
primarySwatch: [Link],
),
home: FadeAnimationWidget(),
debugShowCheckedModeBanner: false,

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 );
}
}
class FadeAnimationWidget extends StatefulWidget {
@override
_FadeAnimationWidgetState createState() => _FadeAnimationWidgetState();
}

class _FadeAnimationWidgetState extends State<FadeAnimationWidget>

with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _opacityAnimation;

@override
void initState() {
[Link]();

_animationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 10),
);

_opacityAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(

CurvedAnimation(
parent: _animationController,
curve: [Link],
),
);

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 _animationController.forward();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Fade Animation Example'),
),
body: Center(
child: FadeTransition(
opacity: _opacityAnimation,
child: Container(
width: 200,
height: 200,
color: [Link],
child: const Center(
child: Text(
'Fade Animation',
style: TextStyle(
color: [Link],
fontSize: 20,
),
),
),
),
),
),
);

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 }

@override
void dispose() {
_animationController.dispose();
[Link]();
}
}
Output:

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Slide Animation:
import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Slide Animation Example',
theme: ThemeData(
primarySwatch: [Link],
),
home: SlideAnimationWidget(),
debugShowCheckedModeBanner: false,
);
}
}

class SlideAnimationWidget extends StatefulWidget {

@override
_SlideAnimationWidgetState createState() => _SlideAnimationWidgetState();
}

class _SlideAnimationWidgetState extends State<SlideAnimationWidget>

with SingleTickerProviderStateMixin {
late AnimationController _animationController;

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 late Animation<Offset> _slideAnimation;

@override
void initState() {
[Link]();

_animationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);

_slideAnimation = Tween<Offset>(
begin: const Offset(-1.0, 0.0),
end: const Offset(0.0, 0.0),
).animate(
CurvedAnimation(
parent: _animationController,
curve: [Link],
),
);

_animationController.forward();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Slide Animation Example'),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 ),
body: Center(
child: SlideTransition(
position: _slideAnimation,
child: Container(
width: 200,
height: 200,
color: [Link],
child: const Center(
child: Text(
'Slide Animation',
style: TextStyle(
color: [Link],
fontSize: 20,
),
),
),
),
),
),
);
}

@override
void dispose() {
_animationController.dispose();
[Link]();
}
}

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Output:

Scale Animation:
import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Rotation Animation',
theme: ThemeData(primarySwatch: [Link]),
home: RotationAnimationWidget(),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 );
}
}

class RotationAnimationWidget extends StatefulWidget {

@override
_RotationAnimationWidgetState createState() => _RotationAnimationWidgetState();
}

class _RotationAnimationWidgetState extends State<RotationAnimationWidget>

with SingleTickerProviderStateMixin {
late AnimationController _animationController;

@override
void initState() {
[Link]();

// Initialize the animation controller

_animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 3),
);

// Repeat the animation indefinitely

_animationController.repeat();
}

@override
Widget build(BuildContext context) {

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 return Scaffold(
appBar: AppBar(title: Text('Rotation Animation')),
body: Center(
child: RotationTransition(
turns: _animationController,
child: Container(
width: 150,
height: 150,
color: [Link],
child: Center(
child: Text(
'Rotate',
style: TextStyle(color: [Link], fontSize: 20),
),
),
),
),
),
);
}

@override
void dispose() {
_animationController.dispose();
[Link]();
}
}

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Output:

Result: Experimenting with different types of animations (fade, slide, etc.) is successfully
completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 EXPERIMENT-9
9a) Fetch data from a REST API
Aim:
To fetch data from a REST API in Flutter.

Description:
In Flutter, REST APIs allow apps to communicate with backend servers to retrieve or send data.
The http package provides easy-to-use methods like get(), post(), etc., for making HTTP requests.
When an API request is made, the response is received in JSON format, which can be parsed and
displayed in the UI. Using asynchronous programming (async and await), Flutter ensures that the
app remains responsive while waiting for data from the server.

Program:
import 'package:flutter/[Link]';
import 'dart:convert';

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

class RestApiApp extends StatelessWidget {

const RestApiApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: FetchDataScreen(),
);
}
}
class FetchDataScreen extends StatefulWidget {
const FetchDataScreen({Key? key}) : super(key: key);

@override
State<FetchDataScreen> createState() => _FetchDataScreenState();
}

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 class _FetchDataScreenState extends State<FetchDataScreen> {
List<dynamic> users = [];
bool isLoading = true;

Future<void> fetchData() async {

await [Link](const Duration(seconds: 2)); // simulate delay

// Mock JSON data

const mockJson = '''
[
{"name": "Saraswati ", "email": "saraswati@[Link]"},
{"name": "Ananya Reddy", "email": "ananya@[Link]"},
{"name": "Rahul Varma", "email": "rahul@[Link]"}
]
''';

setState(() {
users = [Link](mockJson);
isLoading = false;
});
}

@override
void initState() {
[Link]();
fetchData();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Fetch Data Example")),
body: isLoading
? const Center(child: CircularProgressIndicator())
: [Link](
itemCount: [Link],
itemBuilder: (context, index) {
return ListTile(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 leading: const Icon([Link]),
title: Text(users[index]['name']),
subtitle: Text(users[index]['email']),
);
},
),
);
}
}Output:

Result: Fetch data from a REST API is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 9b) Display fetched data in the UI
Aim:
To display the fetched API data in a user-friendly format in the Flutter UI.

Description:
After retrieving JSON data, Flutter widgets like ListView, Card, and ListTile can be used to display it
attractively. By decoding JSON data and mapping it into a list, we can dynamically build UI
elements that reflect the API content in real-time.

Program:

import 'package:flutter/[Link]';

import 'dart:convert';

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

class DisplayApiApp extends StatelessWidget {

const DisplayApiApp({[Link]});

class ApiDataScreen extends StatefulWidget {

const ApiDataScreen({[Link]});

@override

State<ApiDataScreen> createState() => _ApiDataScreenState();

class _ApiDataScreenState extends State<ApiDataScreen> {

List posts = [];

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 @override

void initState() {

[Link]();

loadMockData();

void loadMockData() async {

await [Link](const Duration(seconds: 1)); // simulate API delay

const mockJson = '''

{"title": "Flutter Rocks!", "body": "Flutter makes UI building fun."},

{"title": "Learn Dart", "body": "Dart powers Flutter beautifully."},

{"title": "Widgets Everywhere", "body": "Everything in Flutter is a widget!"}

''';

setState(() => posts = [Link](mockJson));

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text("Display API Data")),

body: [Link]

? const Center(child: CircularProgressIndicator())

: [Link](

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 itemCount: [Link],

itemBuilder: (context, i) => Card(

margin: const [Link](8),

child: ListTile(

leading: CircleAvatar(child: Text('${i + 1}')),

title: Text(posts[i]['title']),

subtitle: Text(posts[i]['body']),

),

),

),

);

}Output:

Result: Display fetched data in the UI is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 EXPERIMENT-10

10a) Write unit tests for UI components

Aim:
To write unit tests for verifying Flutter widget functionality.

Description:
Testing ensures code correctness and reliability. Flutter provides the flutter_test package for
writing widget tests that simulate user actions and validate UI outputs. Unit testing verifies small
parts of the app logic in isolation, improving maintainability and performance.

Program:
import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {

const MyApp({[Link]});

@override

Widget build(BuildContext context) {

return const MaterialApp(

debugShowCheckedModeBanner: false,

home: GreetingScreen(),

);

class GreetingScreen extends StatelessWidget {

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 const GreetingScreen({[Link]});

final String name = 'Flutter'; // Change this to test other names

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text('Greeting Test')),

body: Center(

child: Column(

mainAxisAlignment: [Link],

children: [

Text('Hello, $name!', style: const TextStyle(fontSize: 24)),

const SizedBox(height: 20),

Text(name == 'Flutter' ? 'Test Passed ⬛' : 'Test Failed +'),

],

),

),

);

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 Output:

Result: Write unit tests for UI components is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 10b) Use Flutter’s debugging tools
Aim:
To identify and fix errors using Flutter’s debugging tools.

Description:
Flutter provides tools like Flutter DevTools, Dart Analyzer, and Hot Reload to diagnose layout,
logic, and performance issues. These tools allow developers to inspect widget trees, check
memory usage, set breakpoints, and view console logs in real-time.

Program:

import 'package:flutter/[Link]';

void main() {

runApp(const DebugDemo());

class DebugDemo extends StatelessWidget {

const DebugDemo({[Link]});

@override

Widget build(BuildContext context) {

int value = 10;

debugPrint("Value before increment: $value");

value++;

debugPrint("Value after increment: $value");

return const MaterialApp(

home: Scaffold(

body: Center(child: Text("Debug Example")),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 ),

);

Output:

Result: Use Flutter’s debugging tools is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 EXPERIMENT-11

11) Real-Time Weather App Using External REST API

Aim:
To develop a real-time weather app using an external REST API.

Description:
This app retrieves live weather data (temperature, humidity, etc.) from OpenWeatherMap API
based on the user’s city input. Using TextField for input and http for API calls, it displays weather
details dynamically with icons and loading indicators.

Program:
import 'package:flutter/[Link]';

import 'dart:convert';

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

class WeatherApp extends StatelessWidget {

const WeatherApp({[Link]});

@override

Widget build(BuildContext context) {

return const MaterialApp(

debugShowCheckedModeBanner: false,

home: WeatherScreen(),

);

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 class WeatherScreen extends StatefulWidget {

const WeatherScreen({[Link]});

@override

State<WeatherScreen> createState() => _WeatherScreenState();

class _WeatherScreenState extends State<WeatherScreen> {

TextEditingController cityController = TextEditingController();

Map<String, dynamic>? weatherData;

// Simulated API call

Future<void> fetchWeather(String city) async {

await [Link](const Duration(seconds: 1)); // simulate network delay

// Mock weather data

const mockJson = '''

"name": "London",

"main": {"temp": 22},

"weather": [{"main": "Cloudy"}]

''';

setState(() {

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 weatherData = [Link](mockJson);

// Replace city name with user input

weatherData!['name'] = [Link] ? "Unknown" : city;

});

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text("Weather App (Mock)")),

body: Padding(

padding: const [Link](16),

child: Column(

children: [

TextField(

controller: cityController,

decoration: const InputDecoration(

hintText: "Enter City Name",

border: OutlineInputBorder(),

),

),

const SizedBox(height: 10),

ElevatedButton(

onPressed: () => fetchWeather([Link]),

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 child: const Text("Get Weather"),

),

const SizedBox(height: 20),

weatherData == null

? const Text("No data yet")

: Column(

children: [

Text("City: ${weatherData!['name']}"),

Text("Temperature: ${weatherData!['main']['temp']}°C"),

Text("Condition: ${weatherData!['weather'][0]['main']}"),

],

),

],

),

),

);

Output:

Result: Real-Time Weather App Using External REST API is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 EXPERIMENT-12
12) Counter App with Reset Button
Aim:
To create a simple counter app that can increment and reset the counter value.

Description:
A StatefulWidget is used to maintain the changing count value. Using FloatingActionButton for
increment and a regular button for reset demonstrates basic use of Flutter state management
with setState().

Program:

import 'package:flutter/[Link]';

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

class CounterApp extends StatefulWidget {

const CounterApp({[Link]});

@override

State<CounterApp> createState() => _CounterAppState();

class _CounterAppState extends State<CounterApp> {

int count = 0;

void increment() {

setState(() {
count++;

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 });

void reset() {

setState(() {

count = 0;

});

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(title: const Text("Counter App")),

body: Center(

child: Column(

mainAxisAlignment: [Link],

children: [

Text("Count: $count", style: const TextStyle(fontSize: 30)),

const SizedBox(height: 20),

ElevatedButton(onPressed: reset, child: const Text("Reset")),

],

),

),

floatingActionButton: FloatingActionButton(

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501
 onPressed: increment,

child: const Icon([Link]),

),

),

);

Output:

Result: Counter App with Reset Button is successfully completed.

ADITYA UNIVERSITY (Formerly Aditya Engineering College (A)) Roll No: 23A91A0501