Computer Science & Engineering

Department of CSE

Laboratory Manual

Course: [Link].

Year & Semester: III – I

Class: CSE
Subject: UI design- Flutter Lab Manual
Regulation: R22
 lOMoARcPSD|17292326

[Link]. III Year I Semester Syllabus

UI DESIGN - FLUTTER

LIST OF EXPERIMENTS

Write a Program to implement the following using Python.

1. a) Install Flutter And Dart SDK

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

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

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

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

b) Implement media queries and breakpoints for responsiveness

4. a) Setup navigation between different screens using navigator

b) Implement navigation with named routes

5. a) Learn about stateful and stateless widgets

b) Implement state management using set State and Provider

6. a) Create custom widgets for specific UI elements

b) Apply styling using themes and custom styles

7. a) Design a form with various input fields

b) Implement form validation and error handling

8. a) Add animations to UI elements using flutter's animation framework

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

9. a) Fetch data from REST API

b) Display the fetched data in a meaningful way in the UI

10. a) Write unit tests for UI components

b) Use Flutter’s debugging tools to identify and fix issues

4
TEXT BOOK:
1. A Marco [Link],Beginning Flutter:A Hands-on Guide to App Development

REFERENCE BOOKS:
1. Flutter for Beginners: An introductory guide to building cross-platform mobile applications with
Flutter and Dart 2, Packet Publishing Limited.

2. Rap Payne, Beginning App Development with Flutter: Create Cross-Platform Mobile Apps, 1stedition,
Apress.

3. Frank Zammetti, Practical Flutter: Improve your Mobile Development with Google’s Latest Open-
Source SDK, 1stedition, Apress
 lOMoARcPSD|17292326

1. Introduction

1.1 Brief overview of the lab manual

1.2 Objectives of the laboratory sessions

1.3 Prerequisites for students

1.4 Necessary software and hardware requirements

Experiments :

Lab Session 1: a) Install Flutter And Dart SDK

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

Lab Session 2: a) Explore various flutter widgets (Text, Image, Container, etc..)

b) Implement different layout structures using Row, Column, and Stack widgets Lab Session 3: a) Design

a responsive UI that adapts to different screen sizes

b) Implement media queries and breakpoints for responsiveness

Lab Session 4: a) Setup navigation between different screens using navigator

b) Implement navigation with named routes

Lab Session 5: a) Learn about stateful and stateless widgets

b) Implement state management using set State and Provider Lab Session 6: a) Create custom widgets for

specific UI elements

b) Apply styling using themes and custom styles

Lab Session 7: a) Design a form with various input fields

b) Implement form validation and error handling

6
Lab Session 8: a) Add animations to UI elements using flutter's animation framework

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

Lab Session 9: a) Fetch data from REST API

b) Display the fetched data in a meaningful way in the UI

Lab Session 10: a) Write unit tests for UI components

b) Use Flutter’s debugging tools to identify and fix issues

 lOMoARcPSD|17292326

1.1 Brief overview of the lab manual

The lab manual of UI design with Flutter typically provides a structured guide for students to learn and
practice designing user interfaces using Flutter, a popular framework for building cross-platform mobile
applications. The manual usually covers various topics, including:
Introduction to Flutter: An overview of Flutter, its features, and benefits for mobile app development.

Setting Up Development Environment: Instructions for setting up Flutter and its dependencies on different
platforms like Windows, macOS, and Linux.

Flutter Basics: Fundamentals of Flutter, including widgets, layouts, navigation, state management, and
basic UI design principles.

Building UI Components: Step-by-step tutorials for creating common UI components such as buttons,
text fields, lists, and forms using Flutter widgets.

Styling and Theming: Guidelines for applying styles, themes, colors, fonts, and other visual elements to
enhance the appearance of the app.

Responsive Design: Techniques for designing responsive user interfaces that adapt to different screen
sizes and orientations.

Navigation and Routing: How to implement navigation between screens and manage application routes
using Flutter's navigation system.

State Management: Introduction to state management techniques in Flutter, including setState, Provider,
Bloc, and other state management libraries.

API Integration: Integration of RESTful APIs to fetch and display data in the app, including handling
asynchronous operations and error handling.

Testing and Debugging: Strategies for testing UI components, debugging common issues, and using
Flutter's debugging tools effectively.

The lab manual typically includes hands-on exercises, code examples, and assignments to reinforce
learning and practical skills. It may also provide additional resources such as recommended readings,
online tutorials, and reference materials for further exploration of UI design concepts and Flutter
development. Overall, the lab manual serves as a comprehensive guide for students to gain proficiency in
designing user interfaces with Flutter.

1.2 Objectives of the laboratory sessions

The objectives of laboratory sessions in UI design with Flutter typically include:
Understanding Flutter Framework: Gain familiarity with the Flutter framework, its architecture, and
key concepts for building cross-platform mobile applications.
Practical Experience: Provide hands-on experience to students in designing user interfaces using Flutter
widgets, layouts, and components.

8
Applying UI Design Principles: Apply fundamental principles of UI design, such as consistency, clarity,
and usability, to create intuitive and visually appealing user interfaces.

Implementing Responsive Design: Learn techniques for designing responsive user interfaces that adapt to
different screen sizes and orientations, ensuring a consistent user experience across devices.

Styling and Theming: Understand how to apply styles, themes, colors, and typography to enhance the
visual appearance of the app and maintain brand consistency.

Navigation and Routing: Learn how to implement navigation between screens and manage application
routes using Flutter's navigation system.

State Management: Explore various state management techniques in Flutter, such as setState, Provider,
Bloc, and others, to manage and update the state of UI components.

API Integration: Integrate RESTful APIs to fetch and display dynamic data in the app, including handling
asynchronous operations and error handling.

Testing and Debugging: Practice testing UI components, debugging common issues, and using Flutter's
debugging tools effectively to identify and fix errors.

Deployment and Publishing: Understand the process of building and deploying Flutter apps to different
platforms like Android and iOS, and publishing them to app stores.

Collaboration and Communication: Foster collaboration and communication skills by working in teams
on UI design projects, sharing ideas, and providing feedback to peers.

Problem-Solving Skills: Develop problem-solving skills by identifying UI design challenges,

brainstorming solutions, and implementing effective design solutions using Flutter.
Explore Algorithmic Complexity and Efficiency: Analyze the time and space complexity of different AI
algorithms, and develop an understanding of algorithmic efficiency and optimization strategies.

Enhance Critical Thinking and Problem-Solving Abilities: Engage in critical thinking and analytical
reasoning while designing and implementing solutions to complex AI problems, fostering problemsolving
skills essential for AI development.

Experiment with Different Approaches: Experiment with various AI approaches, including search
algorithms, heuristic methods, machine learning techniques, and optimization algorithms, to understand
their strengths, weaknesses, and applications.

Foster Collaboration and Communication: Collaborate with peers on problem-solving tasks, discuss
algorithm design choices, and communicate findings effectively, promoting teamwork and effective
communication skills.

Build a Strong Foundation in AI Theory and Practice: Develop a strong foundation in both theoretical
concepts and practical applications of artificial intelligence, preparing students for further study or
professional work in the field.
 lOMoARcPSD|17292326

Encourage Creativity and Innovation: Encourage creativity and innovation in problem-solving, allowing
students to explore alternative solutions, adapt existing algorithms, and develop novel approaches to AI
challenges.

Promote Lifelong Learning in AI: Cultivate a passion for lifelong learning and exploration in the field of
artificial intelligence, inspiring students to continue their education and pursue advancements in AI
technology throughout their careers.

1.3 Prerequisites for students

Before participating in laboratory sessions for UI design with Flutter, students should ideally have the
following prerequisites:

Basic Programming Skills: Students should have a basic understanding of programming concepts,
including variables, data types, control structures, and functions. Knowledge of object-oriented
programming (OOP) concepts like classes, objects, and inheritance would be beneficial.

Familiarity with Dart Programming Language: Flutter uses the Dart programming language, so
students should have a basic understanding of Dart syntax, features, and concepts. Topics such as
variables, functions, classes, and asynchronous programming with Future and Stream would be important.

Understanding of UI Design Principles: Familiarity with fundamental principles of user interface (UI)
design, such as consistency, simplicity, visual hierarchy, and usability, would be helpful. Students should
have a basic understanding of how to design user-friendly and visually appealing interfaces.

Experience with Mobile Development: While not mandatory, prior experience with mobile app
development using frameworks like Flutter, React Native, or native development (Android/iOS) would be
advantageous. This includes understanding app lifecycle, navigation patterns, and platform-specific
considerations.
Development Environment Setup: Students should be able to set up and configure their development
environment for Flutter development. This includes installing Flutter SDK, Dart SDK, and necessary
development tools like IDE (e.g., Android Studio, IntelliJ IDEA, Visual Studio Code) and Flutter
plugins/extensions.

Problem-Solving Skills: Students should have strong problem-solving skills and the ability to
troubleshoot issues independently. This includes debugging code, researching solutions online, and seeking
help when needed.

Critical Thinking and Creativity: UI design involves creative thinking and problem-solving to create
intuitive and aesthetically pleasing user interfaces. Students should be able to think critically, analyze
design requirements, and propose innovative solutions.

Time Management: Managing time effectively is crucial for completing lab assignments, meeting
deadlines, and optimizing productivity during lab sessions. Students should be able to prioritize tasks,
allocate time wisely, and stay organized.

Effective Communication: Communication skills, both written and verbal, are essential for collaborating
with peers, discussing design ideas, and presenting project outcomes. Students should be able to articulate
their thoughts, provide constructive feedback, and work effectively in teams.

10
While these prerequisites provide a foundation for successful participation in UI design laboratory
sessions, students with varying levels of experience and backgrounds can benefit from engaging with the
course material and actively participating in hands-on activities and projects.

1.4 Necessary software and hardware requirements

To effectively participate in UI design laboratory sessions with Flutter, students will need the following
software and hardware requirements:

Software Requirements:
Flutter SDK: Install the Flutter SDK, which includes the Flutter framework and the Dart programming
language. Flutter provides installation instructions for various platforms such as Windows, macOS, and
Linux.
Integrated Development Environment (IDE):
Recommended: Android Studio with Flutter plugin or Visual Studio Code with Flutter extension. Both
IDEs provide excellent support for Flutter development and include features

like code completion, debugging, and project management tools.

Alternatively, students can use IntelliJ IDEA with Flutter plugin or any other text editor of their choice, but
full-featured IDEs are recommended for better productivity.
Dart SDK: The Dart SDK is included with the Flutter SDK, but students can also install it separately if
needed. It provides command-line tools for Dart development and is required for
running Dart programs outside of Flutter projects.
Mobile Emulators or Devices:
Install Android Studio and set up Android Virtual Device (AVD) for running Android emulators. For iOS
development, students will need a Mac computer with Xcode installed to run the iOS simulator or test apps
on physical iOS devices.
Package Management: Flutter uses Dart's package manager, Pub, to manage dependencies. Students
should have access to the internet to download packages from Pub and add them to their Flutter projects.

Hardware Requirements:
Computer: Students will need a computer (desktop or laptop) running Windows, macOS, or Linux to
develop Flutter applications. The computer should meet the minimum system requirements for running the
chosen IDE and emulators/simulators.
Mobile Devices (Optional): While emulators/simulators are sufficient for testing and development,
students may also want to test their apps on physical Android and iOS devices. Ensure compatibility with
Flutter by enabling developer mode and USB debugging on the devices.
Internet Connection: A stable internet connection is necessary for downloading Flutter SDK, IDEs,
packages from Pub, and accessing online resources and documentation.
Storage: Sufficient storage space on the computer to install Flutter SDK, IDEs, and other development
tools, as well as to store project files and dependencies.
By meeting these software and hardware requirements, students can effectively engage in UI design
laboratory sessions with Flutter, develop mobile applications, and gain practical experience in building
user interfaces for various platforms.
Minimum System requirements:

The minimum system requirements for developing Flutter applications are relatively modest, but they may
vary slightly depending on the operating system and the specific development tools being used.
Here are the general minimum system requirements:
For Windows:
 lOMoARcPSD|17292326

Operating System: Windows 7 SP1 or later (64-bit)

Processor: Intel Core i3 or AMD equivalent (64-bit) Memory (RAM): 4GB RAM or more
Storage: 2GB of free disk space
Graphics Card: Integrated graphics or dedicated GPU with DirectX 9 support
Internet Connection: Required for downloading development tools, SDKs, and dependencies

For macOS:
Operating System: macOS 10.12 (Sierra) or later
Processor: Intel Core i3 or higher
Memory (RAM): 4GB RAM or more
Storage: 2GB of free disk space
Graphics Card: Integrated graphics or dedicated GPU
Internet Connection: Required for downloading development tools, SDKs, and dependencies

For Linux:
Operating System: Ubuntu 16.04 LTS (Xenial Xerus) or later, or another Linux distribution with similar
support
Processor: Intel Core i3 or AMD equivalent Memory (RAM): 4GB RAM or more
Storage: 2GB of free disk space
Graphics Card: Integrated graphics or dedicated GPU
Internet Connection: Required for downloading development tools, SDKs, and dependencies
These are general guidelines, and the actual system requirements may vary depending on factors such as
the size and complexity of the Flutter projects, the number of plugins and dependencies used, and the
performance of the development tools (IDEs) being used. Additionally, running emulators or simulators for
testing on mobile devices may require more system resources.

Lab Session 1:

a) Install flutter and Dart sdk

To install Flutter and the Dart SDK, you can follow these steps:
a) Download Flutter: Visit the Flutter website's Get Started page and download the Flutter SDK for your
operating system (Windows, macOS, or Linux).

12
b) Extract the Flutter SDK: After downloading, extract the contents of the compressed file to a location
on your computer where you want to store the Flutter SDK. For example, you can extract it to
C:\flutter on Windows, /Users/<your-username>/flutter on macOS, or ~/flutter on Linux.

c) Add Flutter to your PATH: Update your system's PATH variable to include the Flutter bin directory.
This step allows you to execute Flutter commands from any directory in your terminal or command
prompt. The precise steps for updating the PATH vary depending on your operating system.

Windows:
From the Start search bar, type 'env' and select 'Edit the system environment variables'.
Click on 'Environment Variables'.
Under 'System Variables', find the 'Path' variable, select it, and click 'Edit'.
Click 'New' and add the path to the bin directory inside the Flutter directory (e.g., C:\flutter\bin). Click
'OK' on all open dialogs to save your changes.

macOS and Linux:

Open a terminal window.
Run the following command to open the profile file associated with your terminal (.bash_profile, .bashrc,
.zshrc, or similar):
nano ~/.bash_profile
Add the following line at the end of the file: export PATH="$PATH:/path/to/flutter/bin"
Press Ctrl + X to exit, then Y to save changes, and Enter to confirm.
d) Verify the Flutter installation: Open a new terminal window, and run the following command to
verify that Flutter is properly installed:
flutter --version
This command should display the Flutter version and other relevant information if the installation was
successful.

e) Install Flutter dependencies: Depending on your development environment, you may need to install
additional dependencies, such as Android Studio to fully set up your Flutter development environment.

f) Download Dart SDK (if not bundled with Flutter): Flutter comes with the Dart SDK bundled, so if
you've installed Flutter, you should have the Dart SDK as well. However, if you need to install Dart
separately, you can download it from the Dart "SDK archive".

b) Write a simple dart program to understand the language basics // Define a main function, which is
the entry point of a Dart program. void main() {
// Variables and data types int myNumber = 10; double myDouble = 3.14; String myString = 'Hello World';
bool myBool = true;
// Printing variables print('My number is: $myNumber');

print('My double is: $myDouble'); print('My string is: $myString'); print('My boolean is: $myBool');

// Basic arithmetic operations int result = myNumber + 5; print('Result of addition: $result');

 lOMoARcPSD|17292326

// Conditional statements if (myBool) { print('myBool is true'); } else { print('myBool is false'); }

// Loops for (int i = 0; i< 5; i++) {

print('Iteration $i');
}

// Lists
List<int> numbers = [1, 2, 3, 4, 5]; print('First element of the list: ${numbers[0]}'); print('Length of the
list: ${[Link]}');

// Maps
Map<String, int> ages = {
'Kiran': 30,
'Raj': 25,
'Alekya': 35, }; print('Kiran\'s age: ${ages['Kiran']}'); }

Output:

14
Lab Session 2:

a) Explore various flutter widgets

Flutter provides a rich set of widgets to build user interfaces for mobile,web,and desktop
[Link] widgets help in creating visually appealing and interactive UIs. Here are some of the
commonly used Flutter widgets categorized by their functionalities:

Layout Widgets:
Container: A versatile widget that can contain other widgets and provides options for alignment,
padding,margin, and decoration.

Row and Column: Widgets that arrange their children in a horizontal or vertical line respectively.

Stack: Allows widgets to be stacked on top of each other, enabling complex layouts.

ListView and GridView: Widgets for displaying a scrollable list or grid of children, with support for
various layouts and scrolling directions.

Scaffold: Implements the basic material design layout structure, providing app bars, drawers, and floating
action buttons.

Text and Styling Widgets:

Text: Displays a string of text with options for styling such as font size, color, and alignment.

RichText: Allows for more complex text styling and formatting, including different styles within the
same text span.

TextStyle: A class for defining text styles that can be applied to Text widgets.

Input Widgets:
TextField: A widget for accepting user input as text, with options for customization and validation.
 lOMoARcPSD|17292326

Checkbox and Radio: Widgets for selecting from a list of options, either through checkboxes or radio
buttons.

DropdownButton: Provides a dropdown menu for selecting from a list of options.

Button Widgets:
ElevatedButton and TextButton: Widgets for displaying buttons with different styles and customization
options.

IconButton: A button widget that displays an icon and responds to user taps.

GestureDetector: A versatile widget that detects gestures such as taps, swipes, and drags, allowing for
custom interactions.

Image and Icon Widgets:

Image: Widget for displaying images from various sources, including assets, network URLs, and
memory.

Icon: Displays a Material Design icon.

Navigation Widgets:
Navigator: Manages a stack of route objects and transitions between different screens or pages in the app.

PageRouteBuilder: A customizable widget for building page transitions and animations.

Animation Widgets:
AnimatedContainer: An animated version of the Container widget, with support for transitioning
properties over a specified duration.

AnimatedOpacity, AnimatedPositioned, AnimatedBuilder: Widgets for animating opacity, position,and

custom properties respectively.

Material Design Widgets:

AppBar: A material design app bar that typically contains a title, leading and trailing widgets, and actions.

BottomNavigationBar: Provides a navigation bar at the bottom of the screen for switching betwee
different screens or tabs.

Card: Displays content organized in a card-like structure with optional elevation and padding.

Cupertino (iOS-style) Widgets:

CupertinoNavigationBar: A navigation bar in the iOS style.

CupertinoButton: A button widget with the iOS style.

CupertinoTextField: A text field widget with the iOS style.

These are just a few examples of the many widgets available in Flutter. Each widget comes with its set of
properties and customization options, allowing developers to create highly customizable and responsive
user interfaces.

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

16
1. Row Layout: void main() { runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(
title: Text('Row Layout'),
),
body: Row(
mainAxisAlignment: [Link],
children: <Widget>[ Container( color: [Link],

width: 100,
height: 100,
),
Container( color: [Link],

width: 100,
height: 100,
),

Container( color: [Link], width: 100,

height: 100,
),
],
),
),
);
}
}

Output:

2. Column Layout:

import 'package:flutter/[Link]';
void main() { runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
 lOMoARcPSD|17292326

Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(

title: Text('Column Layout'),
),
body: Column(
mainAxisAlignment: [Link],
children: <Widget>[ Container(

color: [Link], width: 100,

height: 100,
),
Container( color: [Link], width: 100,

height: 100,
),
Container( color: [Link], width: 100,
height: 100,
),
],
),
),
);
}
}
Output:

3. Stack Layout:
import 'package:flutter/[Link]'; void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget{ @override

Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(
title: Text('Stack Layout'),

),
body: Stack( alignment: [Link], children: <Widget>[

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

18
 ),

Container( color: [Link], width: 150, height: 150,

),
Container( color: [Link], width: 100, height: 100,
),
],
),
),
);
}}

Output:
 lOMoARcPSD|17292326

Lab Session 3:

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

import 'package:flutter/[Link]';
void main() { runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp( title: 'Responsive UI Demo', theme:
ThemeData( primarySwatch: [Link],
),
home: ResponsiveHomePage(),
);
}
}

class ResponsiveHomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: Text('Responsive UI Demo'),
),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) { if ([Link]< 600) {
return _buildNarrowLayout();
} else {
return _buildWideLayout();
}
},
),
);
}

Widget _buildNarrowLayout() {
return Center( child: Column(
mainAxisAlignment: [Link],
children: <Widget>[FlutterLogo(size: 100),
SizedBox(height: 20),
Text(
'Narrow Layout',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20), ElevatedButton( onPressed: () {},
child: Text('Button'),
),
],

20
 ),
);
}

Widget _buildWideLayout() { return Center( child: Row(

mainAxisAlignment: [Link],
children: <Widget>[FlutterLogo(size: 100),
SizedBox(width: 20), Column(
mainAxisAlignment: [Link],
children: <Widget>[
Text( 'Wide Layout',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20), ElevatedButton( onPressed: () {},
child: Text('Button'),
),
],
),
],
),
);
}
}

Output:

Mobile View:

Desktop View:
 lOMoARcPSD|17292326

b) Implement media queries and breakpoints for responsiveness

import 'package:flutter/[Link]';

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

}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp(
title: 'Responsive UI with Media Queries',
theme: ThemeData( primarySwatch: [Link],
),
home: ResponsiveHomePage(),
);
}
}

class ResponsiveHomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: Text('Responsive UI with Media Queries'),
),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) { if ([Link]< 600) {
return _buildMobileLayout();
} else if ([Link]< 1200) { return _buildTabletLayout();
} else {
return _buildDesktopLayout();
}
},
),
);
}

Widget _buildMobileLayout() {
22
 return Center( child: Column(
mainAxisAlignment: [Link],
children: <Widget>[FlutterLogo(size: 100),
SizedBox(height: 20),
Text(
'Mobile Layout',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20), ElevatedButton( onPressed: () {},
child: Text('Button'),
),
],
),
);
}

Widget _buildTabletLayout() {
return Center( child: Row(
mainAxisAlignment: [Link],
children: <Widget>[FlutterLogo(size: 100),
SizedBox(width: 20), Column(
mainAxisAlignment: [Link],
children: <Widget>[
Text( 'Tablet Layout',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20), ElevatedButton( onPressed: () {},
child: Text('Button'),
),
],
),
],
),
);
}

Widget _buildDesktopLayout() {
return Center( child: Row(
mainAxisAlignment: [Link],
children: <Widget>[FlutterLogo(size: 100),
SizedBox(width: 20), Column(
mainAxisAlignment: [Link],
children: <Widget>[
Text(
'Desktop Layout', style: TextStyle(fontSize: 24),
),
SizedBox(height: 20), ElevatedButton( onPressed: () {}, child: Text('Button'),
),

],
 lOMoARcPSD|17292326

),
],
),
);
}
}

Output:

Lab Session 4:

a) Setup navigation between different screens using navigator

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

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

}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp( title: 'Navigation Example', theme:
ThemeData( primarySwatch: [Link],
),
home: FirstScreen(),
);
}
}

class FirstScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( title: Text('First Screen'),
),
body: Center( child: ElevatedButton( onPressed: () {
// Navigate to the second screen
[Link]( context,
MaterialPageRoute(builder: (context) =>SecondScreen()),
);
},
child: Text('Go to Second Screen'),
),
),
);
}
}

class SecondScreen extends StatelessWidget {

@override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center( child: ElevatedButton( onPressed: () {
// Navigate back to the first screen
[Link](context);
},
child: Text('Go back to First Screen'),
),
),
);
}
}
 lOMoARcPSD|17292326

Output:

b) Implement navigation with named routes

import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp(
title: 'Named Routes Demo', initialRoute: '/', routes: {
'/': (context) =>HomeScreen(),
'/second': (context) =>SecondScreen(),
'/third': (context) =>ThirdScreen(),
},
);
}

26
}

class HomeScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: Text('Home Screen'),
),
body: Center( child: ElevatedButton( onPressed: () { [Link](context,
'/second');
},
child: Text('Go to Second Screen'),
),
),
);
}
}

class SecondScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar( title: Text('Second Screen'),
),
body: Center( child: ElevatedButton( onPressed: () {

[Link](context, '/third');
},
child: Text('Go to Third Screen'),
),
),
);
}
}

class ThirdScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: Text('Third Screen'),
),
body: Center( child: ElevatedButton( onPressed: () {
[Link](context, [Link]('/'));
},
child: Text('Go Back to Home'),
),
),
);
}
}
 lOMoARcPSD|17292326

Output:

Lab Session 5:

a) Learn about stateful and stateless widgets

In Flutter, widgets can be categorized into two main types based on their behavior regarding state
management: stateful widgets and stateless widgets.

Stateless Widgets:
Definition: Stateless widgets are widgets that do not have any mutable state. Once created, their properties
(configuration) cannot change.

Characteristics:
They are immutable and lightweight.

28
They only depend on their configuration and the build context provided during construction.
Their appearance (UI) is purely a function of their configuration.
They are ideal for UI elements that do not change over time, such as static text labels, icons, or simple
buttons. import 'package:flutter/[Link]';

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

}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(
title: Text('Cards Example'),
),
body: CardList(),
), );

}
}

class CardList extends StatelessWidget {

@override
Widget build(BuildContext context) {
return [Link]( itemCount: 10,
itemBuilder: (context, index) { return CardItem( title: 'Card $index',
subtitle: 'Subtitle $index',
);
},
);
}
}

class CardItem extends StatelessWidget{ final String title; final String subtitle;

constCardItem({
Key key,
@required [Link],
@required [Link],
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Card(
margin: [Link](horizontal: 16, vertical: 8), child: ListTile( title: Text(title),
subtitle: Text(subtitle), leading: CircleAvatar(
child: Text('${[Link](0, 1)}'),
),
onTap: () {
// Handle card tap
},
),
);
 lOMoARcPSD|17292326

Output:

b) Implement state management using set state and provider

Stateful Widgets:

Definition: Stateful widgets are widgets that maintain state, allowing them to change and update over time
in response to user actions, network events, or other factors.

Characteristics:
They have an associated mutable state that can change during the widget's lifetime.
The state is stored in a separate class that extends State and is associated with the stateful widget.
Changes to the state trigger a rebuild of the widget's UI, allowing dynamic updates.
They are ideal for UI elements that need to change or react to user interactions, such as input forms,
animations, or scrollable lists. import 'package:flutter/[Link]';

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

}

class MyApp extends StatelessWidget {

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

30
}

class CounterApp extends StatefulWidget {

@override
_CounterAppStatecreateState() => _CounterAppState();
}
class _CounterAppState extends State<CounterApp>{ int _counter = 0;

void _incrementCounter() { setState(() { _counter++;

});
}

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: Text('Counter App'),
),
body: Center( child: Column(
mainAxisAlignment: [Link], children: <Widget>[
Text(
'Counter:',
style: TextStyle(fontSize: 24),
),
Text(
'$_counter',
style: TextStyle(fontSize: 36, fontWeight: [Link]),
),
],
),
),
floatingActionButton: FloatingActionButton( onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon([Link]),
),
);
}
}

Output:
 lOMoARcPSD|17292326

Stateful widgets are composed of two classes: the stateful widget itself (which extends StatefulWidget) and
its corresponding state class (which extends State). The state class is responsible for maintaining the widget's
mutable state and updating the UI accordingly via the setState() method.

stateless widgets are static and immutable, while stateful widgets are dynamic and can change over time by
managing their internal state. Understanding the difference between these two types of widgets is essential
for designing and building efficient and responsive Flutter UIs.

State Management using setState():

import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {

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

class CounterPage extends StatefulWidget {

@override
_CounterPageStatecreateState() => _CounterPageState();
}

32
class _CounterPageState extends State<CounterPage>{ int _counter = 0;

void _incrementCounter() { setState(() { _counter++;

}); }

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: Text('Counter Example (setState)'),
),
body: Center( child: Column(
mainAxisAlignment: [Link],
children: <Widget>[
Text(
'Counter Value:',
),
Text(
'$_counter',
style: [Link](context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment',
child: Icon([Link]),
),
);
}
}

Output:

State Management using provider package:

 lOMoARcPSD|17292326

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

'provider/movie_provider.dart'; import 'screens/home_screen.dart';

void main() {
runApp(ChangeNotifierProvider<MovieProvider>(
child: constMyApp(),
create: (_) =>MovieProvider(), // Create a new ChangeNotifier object
));
}

class MyApp extends StatelessWidget{ constMyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {

return MaterialApp( // Remove the debug banner debugShowCheckedModeBanner: false,

title: 'State Management using provider',
theme: ThemeData( primarySwatch: [Link],
),

home: constHomeScreen(),
);
}
}

create a model folder for models and create file [Link] class Movie {
final String title; final String? runtime; // how long this movie is (in minute)

Movie({required [Link], [Link]}); }

Create a provider folder and create movie_provider.dart inside the provider folder
// provider/movie_provider.dart import 'package:flutter/[Link]'; import 'dart:math'; import
'../models/[Link]';

// A list of movies
final List<Movie>initialData = [Link](
50,
(index) =>Movie( title: "Moview $index", runtime: "${Random().nextInt(100) + 60}
minutes"));

class MovieProvider with ChangeNotifier {

// All movies (that will be displayed on the Home screen) final List<Movie> _movies = initialData;

// Retrieve all movies

List<Movie> get movies => _movies;

// Favorite movies (that will be shown on the MyListscreen) final List<Movie> _myList = [];

// Retrieve favorite movies

List<Movie> get myList => _myList;

34
 // Adding a movie to the favorites list void addToList(Movie movie) { _myList.add(movie);
notifyListeners(); }

// Removing a movie from the favorites list void removeFromList(Movie movie) {

_myList.remove(movie); notifyListeners();
}
}
Create a screens folder for screens
Create home_screen.dart for home screen page

// screens/home_screen.dart import 'package:flutter/[Link]'; import 'package:provider/[Link]';

import '../provider/movie_provider.dart'; import 'my_list_screen.dart';

class HomeScreen extends StatefulWidget{ constHomeScreen({Key? key}) : super(key: key);

@override
State<HomeScreen>createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

@override
Widget build(BuildContext context) {

var movies = [Link]<MovieProvider>().movies; var myList =

[Link]<MovieProvider>().myList;

return Scaffold( appBar: AppBar(

title: constText('State Management using provider'),
),
body: Padding(
padding: [Link](15), child: Column(
crossAxisAlignment: [Link], children: [ [Link](
onPressed: () {
[Link](context).push( MaterialPageRoute(
builder: (context) =>constMyListScreen(),
),
);
},
icon: constIcon([Link]), label: Text(
"Go to my list (${[Link]})",
style: constTextStyle(fontSize: 24),
),

style: [Link]( primary: [Link],

padding: [Link](vertical: 20)),
),
constSizedBox(
height: 15,
),
 lOMoARcPSD|17292326

Expanded( child: [Link]( itemCount: [Link], itemBuilder:

(_, index) {

final currentMovie = movies[index]; return Card( key:

ValueKey([Link]),
color: [Link].shade100, elevation: 4, child: ListTile(
title: Text([Link]), subtitle:
Text([Link] ?? 'No information'),
trailing: IconButton( icon: Icon( [Link],
color: [Link](currentMovie)
? [Link]
: [Link],

size: 30,
), onPressed: () {
if () {
context
.read<MovieProvider>()
.addToList(currentMovie);
} else { context
.read<MovieProvider>()
.removeFromList(currentMovie);
}
},
),
),
);
}),
),
],
),
),
);
}
}
create my_list_screen.dart inside the screens folder

// screens/my_list_screen.dart import 'package:flutter/[Link]'; import

'package:provider/[Link]'; import '../provider/movie_provider.dart';

class MyListScreen extends StatefulWidget{ constMyListScreen({Key? key}) : super(key: key);

@override
State<MyListScreen>createState() => _MyListScreenState();
}

class _MyListScreenState extends State<MyListScreen> {

@override
Widget build(BuildContext context) {
final myList = [Link]<MovieProvider>().myList; return Scaffold( appBar: AppBar(

36
 title: Text("My List (${[Link]})"),
),
body: [Link]( itemCount: [Link], itemBuilder: (_, index) {
final currentMovie = myList[index];

return Card(
key: ValueKey([Link]), elevation: 4,

child: ListTile(
title: Text([Link]), subtitle: Text([Link] ?? ''),
trailing: TextButton( child: const Text( 'Remove',
style: TextStyle(color: [Link]),
), onPressed: () {
[Link]<MovieProvider>().removeFromList(currentMovie);
},
),
),
);
}),
);
}
}

Output:
 lOMoARcPSD|17292326

we use the provider package to manage state. We define a Counter class that extends ChangeNotifier, and
the counter value is stored inside it. Whenever the counter is incremented, we call notifyListeners() to inform
the listeners about the change.
Lab Session 6:

a) Create custom widgets for specific UI elements

import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp( home:
Scaffold( appBar: AppBar(
title: Text('Custom Widget Example'),
),
body: Column(

38
mainAxisAlignment: [Link],
children: <Widget>[ Padding( padding: [Link](8.0), child:
CustomTextField( hintText: 'Enter your name', onChanged: (value) {
print('Name changed: $value');
},
),
),
SizedBox(height: 20),
Padding( padding: [Link](8.0), child: CustomTextField( hintText:
'Enter Email', onChanged: (value) {
print('Name changed: $value');
},
),
),
SizedBox(height: 20),
Padding( padding: [Link](8.0), child: CustomTextField( hintText:
'Enter Roll Number', onChanged: (value) {
print('Name changed: $value');
},
),
),
SizedBox(height: 20), CustomButton( text: 'Press Me', onPressed: () {

print('Button pressed!');
},
),
],
),
),
);
}
}

class CustomButton extends StatelessWidget {

final String? text; final VoidCallback? onPressed;

constCustomButton({ Key? key,

@required [Link],
@required [Link],
}) : super(key: key);

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

class CustomTextField extends StatelessWidget{ final String hintText; final

ValueChanged<String>onChanged;
 lOMoARcPSD|17292326

constCustomTextField({ Key? key, required [Link], required [Link], }) :

super(key: key);

@override
Widget build(BuildContext context) {
return TextField( onChanged: onChanged, decoration: InputDecoration( hintText: hintText,
border: OutlineInputBorder(),
),
);
}
}

Output:

b) Apply styling using themesand custom styles

In Flutter, you can apply styling toyour widgets using themes

and custom styles to maintain consistencyand make your
UI more visually appealing.
import'package:flutter/[Link]';

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

}

class MyAppextendsStatelessWidget {
@override
Widget build(BuildContext context){ return
MaterialApp( theme: ThemeData(
// Define the overall theme of the app primaryColor:
[Link], accentColor: [Link],
fontFamily: 'Roboto', textTheme: TextTheme(
headline1: TextStyle(fontSize: 24, fontWeight:
[Link]), bodyText1: TextStyle(fontSize: 16),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: [Link]( primary: [Link],
textStyle: TextStyle(fontSize: 18),
padding: [Link](horizontal: 20, vertical: 15), shape:
RoundedRectangleBorder(
borderRadius: [Link](10),
),

),
),
),
home: HomePage(),
);
}
40
}

class HomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: Text('Styling Example'),
),
body: Center( child: Column(
mainAxisAlignment: [Link], children: <Widget>[
Text(
'Welcome to MyApp',
style: [Link](context).textTheme.headline1,
),
SizedBox(height: 20), ElevatedButton( onPressed: () {},
child: Text('Get Started'),
),
],
),
),
);
}
}

Output:

In this example:
We define a custom theme using ThemeData and apply it to the entire app using the theme property of
MaterialApp.

The theme specifies primary and accent colors, a custom font family, and text styles for different text
elements (headline6 and bodyText2).

We customize the appearance of the elevated buttons using ElevatedButtonThemeData and

[Link].

In the HomePage widget, we use [Link](context) to access the custom theme properties and apply them
to various widgets such as Text and ElevatedButton.
We also demonstrate custom styling for a Container widget with a custom background color and border
radius.
 lOMoARcPSD|17292326

Using themes and custom styles like this helps maintain a consistent visual identity throughout your app
and makes it easier to manage and update styling across multiple widgets.
Lab Session 7:

a) Design a form with various input fields

form with various input fields such as text fields, checkboxes, radio buttons, and a dropdown menu import
'package:flutter/[Link]';

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

}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp( title: 'Form Example',
theme: ThemeData(
primarySwatch: [Link],
),
home: FormPage(),
);
}
}

class FormPage extends StatefulWidget {

@override
_FormPageStatecreateState() => _FormPageState();
}

class _FormPageState extends State<FormPage>{ final _formKey = GlobalKey<FormState>();

String _name; String _email;

bool _subscribeToNewsletter = false; String _selectedCountry = 'USA';

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

body: Padding( padding: [Link](20.0), child: Form( key: _formKey,

child: Column(
crossAxisAlignment: [Link],
children: <Widget>[TextFormField(

decoration: InputDecoration(labelText: 'Name'),

onSaved: (value) {
_name = value;
},
),

42
SizedBox(height: 20), TextFormField(
decoration: InputDecoration(labelText: 'Email'),
onSaved: (value) {
_email = value;
},
),
SizedBox(height: 20), Row( children: <Widget>[ Checkbox(
value: _subscribeToNewsletter, onChanged: (value) {
setState(() {
_subscribeToNewsletter = value;
});
},
),
Text('Subscribe to Newsletter'),
],
),
SizedBox(height: 20), Row( children: <Widget>[ Text('Country: '),
SizedBox(width: 20), DropdownButton<String>( value: _selectedCountry,
onChanged: (value) { setState(() {
_selectedCountry = value;
}); },

items: <String>['USA', 'Canada', 'UK', 'Australia']

.map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
), ],

),
SizedBox(height: 20), ElevatedButton( onPressed: () {
_formKey.[Link](); // Submit the form data print('Name:
$_name'); print('Email: $_email');
print('Subscribe to Newsletter: $_subscribeToNewsletter'); print('Country: $_selectedCountry');
},
child: Text('Submit'),
),
],
),
),
),
);
}
}
Output:
 lOMoARcPSD|17292326

b) Implement form validation and error handling

import 'package:flutter/[Link]';

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

}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(
title: Text('Form Example'),
),

body: SingleChildScrollView( padding: [Link](16),

child: FormWidget(),
),
),
);
}
}

class FormWidget extends StatefulWidget {

@override
_FormWidgetStatecreateState() => _FormWidgetState();
} class _FormWidgetState extends State<FormWidget>{ final _formKey = GlobalKey<FormState>();

String _name;
String _email;
String _password;
String _phone;
44
 String _address;

@override
Widget build(BuildContext context) {
return Form( key: _formKey, child: Column(
crossAxisAlignment: [Link],
children: <Widget>[TextFormField(
decoration: InputDecoration(labelText: 'Name'),
validator: (value) { if ([Link]) {
return 'Please enter your name';
} return null;
},
onSaved: (value) => _name = value,
),
SizedBox(height: 16), TextFormField( decoration: InputDecoration(labelText: 'Email'),
keyboardType: [Link], validator: (value) { if ([Link]) {
return 'Please enter your email';
}
// Add more complex email validation logic if needed return null;
},

onSaved: (value) => _email = value,

),
SizedBox(height: 16), TextFormField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true, validator: (value) { if ([Link]) {

return 'Please enter a password';

}
// Add more complex password validation logic if needed return null;
},
onSaved: (value) => _password = value,
),
SizedBox(height: 16), TextFormField(
decoration: InputDecoration(labelText: 'Phone'), keyboardType: [Link],
validator: (value) { if ([Link]) {
return 'Please enter your phone number';
}
// Add more complex phone number validation logic if needed return null;
},
onSaved: (value) => _phone = value,
),
SizedBox(height: 16), TextFormField(
decoration: InputDecoration(labelText: 'Address'), maxLines: 3, validator: (value) {
if ([Link]) {
return 'Please enter your address';
} return null;
},
onSaved: (value) => _address = value,
 lOMoARcPSD|17292326

),
SizedBox(height: 16), ElevatedButton( onPressed: _submitForm,
child: Text('Submit'),
),
],
),
);
}

void _submitForm() { if (_formKey.[Link]()) { _formKey.[Link]();

// Perform form submission with the saved form data

print('Form submitted:'); print('Name: $_name');

print('Email: $_email'); print('Password: $_password'); print('Phone: $_phone');

print('Address: $_address');
}
}
}

Output:

46
Lab Session 8:

a) Add animations to UI elements using flutter's animation framework

import 'package:flutter/[Link]';

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

}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(
title: Text('Animation Example'),
),
body: AnimationWidget(),
),
);
}
}

class AnimationWidget extends StatefulWidget {

@override
_AnimationWidgetStatecreateState() => _AnimationWidgetState();
}

class _AnimationWidgetState extends State<AnimationWidget>

with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;

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

_controller = AnimationController( duration: Duration(seconds: 1),
vsync: this,
);
_animation = Tween<double>(begin: 0, end: 300).animate(_controller)
..addListener(() {
setState(() {}); // Trigger rebuild when animation value changes
}); }

@override
Widget build(BuildContext context) {
return Center( child: Column(
mainAxisAlignment: [Link], children: <Widget>[
Container( width: _animation.value, height: _animation.value, color: [Link],
child: FlutterLogo(size: 100),
),
SizedBox(height: 20), ElevatedButton( onPressed: () {
if (_controller.status == [Link]) {
_controller.reverse();
 lOMoARcPSD|17292326

} else {
_controller.forward();
} },
child: Text(
_controller.status == [Link]
? 'Reverse Animation'
: 'Start Animation',
),
),
],
),
);
}

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

}
}

Output:

We define an Animation object with Tween to define the range of values for the animation.
I
nside the initState() method, we initialize the animation controller and define the animation. We use
addListener() to trigger a rebuild when the animation value changes.

In the build method, we use the animated value _animation.value to control the size of the Container,
which contains the FlutterLogo.

The ElevatedButton toggles the animation between forward and reverse based on the status of the
animation controller.
You can customize the animation further by adjusting the duration, adding curves, or chaining multiple
animations together.

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

48
Fade Animation:
import 'package:flutter/[Link]';

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

}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(
title: Text('Fade Animation Example'),
),
body: FadeAnimation(),
),
);
}
}

class FadeAnimation extends StatefulWidget {

@override
_FadeAnimationStatecreateState() => _FadeAnimationState();
}

class _FadeAnimationState extends State<FadeAnimation>

with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;

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

_controller = AnimationController( vsync: this,
duration: Duration(seconds: 2),
);
_animation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(_controller);

_controller.forward();
}

@override
Widget build(BuildContext context) {
return Center( child: FadeTransition( opacity: _animation, child: Container( width:
200, height: 200,
color: [Link],
),
),
);
}

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

 lOMoARcPSD|17292326

}
}

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

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

}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(
title: Text('Slide Animation Example'),
),
body: SlideAnimation(),
),
);
}
}

class SlideAnimation extends StatefulWidget {

@override
_SlideAnimationStatecreateState() => _SlideAnimationState(); }
class _SlideAnimationState extends State<SlideAnimation>
with SingleTickerProviderStateMixin{ AnimationController _controller;
Animation<Offset> _animation;
@override void initState() { [Link]();
_controller = AnimationController( vsync: this,
duration: Duration(seconds: 2),
);
_animation = Tween<Offset>( begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0),
).animate(_controller);
_controller.forward();
}

@override
Widget build(BuildContext context) {
return Center( child: SlideTransition( position: _animation, child: Container( width:
200, height: 200,
color: [Link],
),
),
); }

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

}
}

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

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

50
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(
title: Text('Scale Animation Example'),
),
body: ScaleAnimation(),
), );

}
}

class ScaleAnimation extends StatefulWidget {

@override
_ScaleAnimationStatecreateState() => _ScaleAnimationState();
}

class _ScaleAnimationState extends State<ScaleAnimation>

with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;

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

_controller = AnimationController( vsync: this,
duration: Duration(seconds: 2),
);
_animation = Tween<double>(
begin: 0.0, end: 1.0,
).animate(_controller);
_controller.forward();
}

@override
Widget build(BuildContext context) {
return Center( child: ScaleTransition( scale: _animation, child: Container( width:
200, height: 200,
color: [Link],
),
),
); }

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

}
}
Output:
 lOMoARcPSD|17292326

52
Lab Session 9:

a) Fetch data from REST API add dependancy in [Link]: dependencies: flutter:
sdk: flutter
http: ^0.13.3

enable internet permissions in your [Link] file for Android apps like below.
<uses-permission android:name="[Link]"

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

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

}

class MyApp extends StatelessWidget {

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

class HomePage extends StatefulWidget {

@override
_HomePageStatecreateState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

List<dynamic> _data = [];
@override
void initState() {
[Link]();
_fetchDataFromApi();
}

Future<void> _fetchDataFromApi() async { final response = await

[Link]([Link]('[Link]

if ([Link] == 200) {
setState(() {
_data = [Link]([Link]);
});
} else {
throw Exception('Failed to load data');
}
}
@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
 lOMoARcPSD|17292326

title: Text('API Data Example'),

),
body: [Link]( itemCount: _data.length, itemBuilder: (context, index) { return
ListTile( title: Text(_data[index]['title']),
subtitle: Text(_data[index]['body']),
);
},
),
);
}

Output:

b)Display the fetched data in a meaningful way in the UI

display the fetched data in a meaningful way in the UI, we can use a more structured layout rather than just
displaying the data in a list. We'll create a custom widget to represent each post fetched from the API, and
display them in a scrollable list. import 'dart:convert'; import 'package:flutter/[Link]'; import
'package:http/[Link]' as http;

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

}

class MyApp extends StatelessWidget {

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

class HomePage extends StatefulWidget {

@override
_HomePageStatecreateState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

54
 List<dynamic> _data = []; bool _isLoading = false;

@override void initState() {

[Link]();
_fetchDataFromApi();
}

Future<void> _fetchDataFromApi() async { setState(() { _isLoading = true;

});

final response = await [Link]([Link]('[Link]

if ([Link] == 200) {
setState(() {
_data = [Link]([Link]);
_isLoading = false;
});
} else {
throw Exception('Failed to load data');
}
}

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: Text('API Data Example'),
),
body: _isLoading ?Center(
child: CircularProgressIndicator(),
)
: [Link]( itemCount: _data.length, itemBuilder: (context, index) {
return PostCard( title: _data[index]['title'],
body: _data[index]['body'],
);
},
),
);
}
}

class PostCard extends StatelessWidget{ final String title; final String body;

constPostCard({ Key key,

@required [Link],
@required [Link],
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Card(
 lOMoARcPSD|17292326

margin: [Link](horizontal: 16, vertical: 8), child: Padding( padding:

[Link](16),

child: Column(
crossAxisAlignment: [Link],
children: <Widget>[ Text( title,
style: TextStyle(fontSize: 18, fontWeight: [Link]),
),
SizedBox(height: 8), Text( body,
style: TextStyle(fontSize: 16),
), ],

),
),
);
}
}

Output:

We've added a loading indicator (CircularProgressIndicator) to indicate when data is being fetched.
The fetched data is displayed as a list of PostCard widgets, each representing a post from the API.
The PostCard widget displays the title and body of each post in a structured manner using a Card layout.
Lab Session 10:
a) Write unit tests for UI components
Unit tests for UI components in Flutter typically involves using the flutter_test package along with the test
package for writing tests.
Here's how we can write unit tests for the PostCard widget:

56
 import 'package:flutter/[Link]'; import 'package:flutter_test/flutter_test.dart'; import
'package:your_app/post_card.dart'; // Import your widget file

void main() { testWidgets('PostCard displays title and body', (WidgetTester tester) async { // Build our
widget and trigger a frame. await [Link]( MaterialApp( home: PostCard(
title: 'Test Title',
body: 'Test Body',
),
), );

// Verify that the title and body are displayed correctly. expect([Link]('Test Title'), findsOneWidget);
expect([Link]('Test Body'), findsOneWidget);
});

testWidgets('PostCard widget has correct styling', (WidgetTester tester) async { // Build our widget and
trigger a frame. await [Link]( MaterialApp( home: PostCard(
title: 'Test Title',
body: 'Test Body',
),
), );

// Verify that the text styles are applied correctly. final titleText = [Link]<Text>([Link]('Test
Title')); expect([Link], 18); expect([Link], [Link]);

final bodyText = [Link]<Text>([Link]('Test Body')); expect([Link], 16);

});
}

In this test:
We use the testWidgets function from the flutter_test package to define our test cases.

In the first test case, we ensure that the PostCard widget correctly displays the provided title and body text.
In the second test case, we verify that the text styles applied to the title and body texts are as expected. We
use expect statements to assert that the expected UI elements are found on the screen and that their
properties match the expected values.
Make sure to replace your_app with the appropriate package name where your PostCard widget resides.

Run the tests using the following command: flutter test

This will execute all the tests defined in your project, including the ones written for the UI components.

Make sure to provide different test scenarios and edge cases to ensure comprehensive test coverage for
your UI components.

b) Use flutter's debugging tools to identify and fix issues?

demonstrate the use of Flutter's debugging tools, let's consider a scenario where we have a simple counter
app, but there's a bug where the counter is not incrementing when the "+" button is pressed. We'll use
Flutter's debugging tools to identify and fix this issue. Here's the code for the counter app: import
'package:flutter/[Link]';

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

 lOMoARcPSD|17292326

class MyApp extends StatelessWidget {

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

class CounterApp extends StatefulWidget {

@override
_CounterAppStatecreateState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp>{ int _counter = 0;

void _incrementCounter() {
_counter++; }

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: Text('Counter App'),
),
body: Center( child: Column( mainAxisAlignment: [Link],

children: <Widget>[
Text(
'Counter:',
style: TextStyle(fontSize: 24),
),
Text(
'$_counter',
style: TextStyle(fontSize: 36, fontWeight: [Link]),
),
],
),
),
floatingActionButton: FloatingActionButton( onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon([Link]),
),
);
}
}

Now, let's use Flutter's debugging tools to identify and fix the issue:
Widget Inspector: First, let's inspect the widget tree to see if the "+" button is correctly wired to the
_incrementCounter method. We can do this by running the app in debug mode and enabling the widget

58
inspector. You can do this by clicking the "Open DevTools" button in your IDE (Android Studio/IntelliJ
IDEA or Visual Studio Code) or running the following command in your terminal: flutter run –debug

Once the app is running, click on the "Toggle Widget Inspector" button in the top-right corner of your
app. Then, select the FloatingActionButton widget representing the "+" button. Ensure that the
onPressed callback is correctly set to _incrementCounter.
Debugging Console: If everything looks fine in the widget inspector, we can add some debug print
statements to the _incrementCounter method to see if it's being called when the button is pressed. Modify the
_incrementCounter method as follows: void _incrementCounter() { print('Incrementing counter');
_counter++;
}
Now, run the app again in debug mode and observe the console output when you press the "+" button. If you
don't see the "Incrementing counter" message in the console, it means the _incrementCounter method is not
being called.
Breakpoints: As a final step, let's set a breakpoint in the _incrementCounter method and debug the app to see
if it's being hit. Add a breakpoint by clicking on the left margin of the _incrementCounter method in your
code editor. Then, run the app in debug mode and press the "+" button. The app should pause at the
breakpoint, allowing you to inspect the current state and variables. You can step through the code to see if
there are any issues with the execution flow.
By using Flutter's debugging tools, you should be able to identify the issue with the counter app and fix it
accordingly. In this case, if the debugging process reveals that the _incrementCounter method is not being
called, you can double-check the onPressed callback of the FloatingActionButton to ensure it's correctly
wired to the _incrementCounter method.