DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

LAB MANUAL

UI DESIGN – FLUTTER

CS506PC AM507PC
III B Tech I Semester

Academic Year: 2025-26

INDRANEEL K
Assistant Professor
 PROGRAM OUTCOMES
Program Outcomes represent the knowledge, skills and attitudes the students should have at the
end of a four year engineering program.
Apply the knowledge of mathematics, science, engineering
Engineering
fundamentals, and an engineering specialization to the solution
PO1 knowledge
of complex engineering problems.
Identify, formulate, review research literature, and analyze
complex engineering problems reaching substantiated
PO2 Problem analysis conclusions using first principles of mathematics, natural
sciences, and engineering sciences.
Design solutions for complex engineering problems and
Design / design system components or processes that meet the specified
development of needs with appropriate consideration for the public health and
PO3
solutions safety, and the cultural, societal, and environmental
considerations.
Conduct Use research-based knowledge and research methods including
investigations of design of experiments, analysis and interpretation of data, and
PO4 complex synthesis of the information to provide valid conclusions.
problems
Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and
Modern tool
PO5 modeling to complex engineering activities with an
usage
understanding of the limitations.
Apply reasoning informed by the contextual knowledge to assess
The engineer and societal, health, safety, legal and cultural issues and the
PO6 society consequent responsibilities relevant to the professional
engineering practice.

INDRANEEL K 2 | Page
 Understand the impact of the professional engineering solutions
Environment and
in societal and environmental contexts, and demonstrate the
PO7 sustainability
knowledge of, and need for sustainable development.
Apply ethical principles and commit to professional ethics and
PO8 Ethics
responsibilities and norms of the engineering practice.
Function effectively as an individual, and as a member or leader
Individual and
in diverse teams, and in multidisciplinary settings. and receive
PO9 team work
clear instructions.
Communicate effectively on complex engineering activities with
the engineering community and with society at large, such as,
being able to comprehend and write effective reports and design
PO10 Communication
documentation, make effective presentations, and give and
receive clear instructions.
Demonstrate knowledge and understanding of the engineering
Project
and management principles and apply these to one’s own work,
management and
PO11 as a member and leader in a team, to manage projects and in
finance
multidisciplinary environments.
Recognize the need for, and have the preparation and ability to
engage in independent and life-long learning in the broadest
PO12 Life-long learning
context of technological change.

PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

PEO 1: Become entrepreneurs, employees of reputed organizations and pursue higher studies
and research for developing advanced skills in Information Technology.
PEO 2: Possess managerial skills, maintain ethical conduct, sense of responsibility to serve the
society and to protect the environment.
PEO 3: Design and develop interdisciplinary and innovative systems with life-long learning skills.

INDRANEEL K 3 | Page
 PROGRAM SPECIFIC OBJECTIVES (PSOs)

PSO 1: To demonstrate basic knowledge in the areas such as Software Engineering, Data
communication and Networking, Data base management, Web Technology and Operating
Systems for building IT applications.
PSO 2: To analyze common business functions and identify, design and develop appropriate
information technology solutions and integrate into the user environment.
PSO 3: The ability to develop software projects using standard practices and suitable programming
environment and to apply knowledge in exploring and adopting latest technologies

COURSE OBJECTIVES

➢ Learns to Implement Flutter Widgets and Layouts

➢ Understands Responsive UI Design and with Navigation in Flutter
➢ Knowledge on Widges and customize widgets for specific UI elements, Themes
➢ Understand to include animation apart from fetching data

COURSE OUTCOMES

➢ Implements Flutter Widgets and Layouts

➢ Responsive UI Design and with Navigation in Flutter
➢ Create custom widgets for specific UI elements and also Apply styling using themes and
custom styles.
➢ Design a form with various input fields, along with validation and error handling
➢ Fetches data and write code for unit Test for UI components and also animation

INDRANEEL K 4 | Page
 COURSE OUTCOMES – PROGRAM OUTCOMES & PROGRAM SPECIFIC OUTCOMES
MAPPING

COs PO1 PO2 PO3 PO 4 P O 5 PO6 PO 7 P O 8 P O9 PO 10 PO 11 PO1 2 PSO1 PSO2 PSO3

CO1 3 2 1 1 1 1 3 3 2 1

CO2 2 2 3 2 2 2 2 2 2

CO3 2 3 2 2 2 2 2 2 2 3

CO4 2 2 2 3 2 3 3 2 1 2 2

CO5 2 2 2 3 2 1 1 2 2 1 2

INDRANEEL K 5 | Page
 SYLLABUS

SKILL DEVELOPMENT COURSE (UI DESIGN- FLUTTER)

III Year [Link]. I - Sem L T P C
0 0 2 1

List of Experiments: Students need to implement the following experiments

1. a) Install Flutter and Dart SDK.

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

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

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

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

b) Implement media queries and breakpoints for responsiveness.

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

b) Implement navigation with named routes.

5. a) Learn about stateful and stateless widgets.

b) Implement state management using set State and Provider.

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

b) Apply styling using themes and custom styles.

7. a) Design a form with various input fields.

b) Implement form validation and error handling.

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

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

9. a) Fetch data from a REST API.

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

10. a) Write unit tests for UI components.

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

TEXT BOOK:
1. Marco L. Napoli, Beginning Flutter: A Hands-on Guide to App Development.

INDRANEEL K 6 | Page
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.

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.

INDRANEEL K 7 | Page
Practical Experience: Provide hands-on experience to students in designing user interfaces using
Flutter widgets, layouts, and components.

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.

INDRANEEL K 8 | Page
 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 problem- solving 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.

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.

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.
INDRANEEL K 9 | Page
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.

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

INDRANEEL K 10 | P a g e
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:
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

INDRANEEL K 11 | P a g e
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.

INDRANEEL K 12 | P a g e
 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).

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

INDRANEEL K 13 | P a g e
 b) Write a simple dart program to understand the language basics

void main() My name is: INDRA

{ Age is: 19
int age=19; Height is : 5.9
String name='INDRA'; I am Vegetarian: true
double height=5.9;
bool veg=true;

print('My name is: $name');

print('Age is: $age');
print('Height is : $height');
print('I am Vegetarian: $veg');
}

//Arithmetic calculations Sum= 13

void main() { Subtraction= 7
int a=10; Multiplication= 30
int b=3; Division= 3.3333333333333335
int sum=a+b; Integer Division= 3
int dif=a-b; Remainder= 1
int m=a*b; Thank you
double d=a/b;
int d1=a ~/ b;
int rem=a%b;

print('Sum= $sum');
print('Subtraction= $dif');
print('Multiplication= $m');
print('Division= $d');
print('Integer Division= $d1');
print('Remainder= $rem');
print('Thank you');
}

INDRANEEL K 14 | P a g e
 //Using functions Sum= 18
void greet() Hello World!
{ Thank you
print('Hello World!');
print('Thank you');
}
int add(int a,int b)
{
int sum=a+b;
return sum;
}

void main() {
int x=10;
int y=8;
int total=add(x,y);
print('Sum= $total');
greet();
}

//using for loop

void main() {
for (var i = 0; i < 10; i++) {
print('hello ${i + 1}');
}
}

hello 1
hello 2
hello 3
hello 4
hello 5
hello 6
hello 7
hello 8
hello 9
hello 10

INDRANEEL K 15 | P a g e
//getting input from keyboard
import 'dart:io'
void main()
{
print('Enter Your name: ');
String? name=[Link]();

print('Enter Your Age: ');

int? age=[Link]([Link]()!);

print('Enter Your Height: ');

double? h=[Link]([Link]()!);

print('My name is: $name');

print('Age is: $age');
print('Height is : $h');
}

//a simple dart program to understand the language basics

void main() {
// Variables and data types

int a = 10;

double d = 3.14;
String s = 'Hello World';

bool b = true;

// Printing variables
print('My number is: $a);

print('My double is: $d);

print('My string is: $s);

print('Are you paid Fee: $b);

// Basic arithmetic operations

int result = a + 5;

print('Result of addition: $result');

// Conditional statements
INDRANEEL K 16 | P a g e
 if (b)

{ print('myBool is true');

} else {

print('myBool is false');

// Loops

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

print('Iteration $i');

// Lists
List<int> n = [1, 2, 3, 4, 5];

print('First element of the list: ${n[0]}');

print('Length of the list: ${[Link]}');

// Maps

Map<String, int> ages = {

'Kiran': 30,

'Raj': 25,

'Alekya': 35,

};

print('Kiran\'s age: ${ages['Kiran']}');

INDRANEEL K 17 | P a g e
 Lab Session 2:

a) Explore various flutter widgets

Flutter provides a rich set of widgets to build user interfaces for mobile, web and desktop
applications. These 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.
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:

INDRANEEL K 18 | P a g e
 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.

INDRANEEL K 19 | P a g e
 b) User implement different layout structures using Row, Column and
Stack widgets
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('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:

INDRANEEL K 20 | P a g e
 Column 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('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:

INDRANEEL K 21 | P a g e
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,
),
Container(
color: [Link],
width: 150,
height: 150,
),
Container(
color: [Link],
width: 100,
height: 100,
),
],
),
),
);
}
}
Output:

INDRANEEL K 22 | P a g e
 Lab Session 3:

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

import 'package:flutter/[Link]';

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

class MyApp2 extends StatelessWidget {

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

class ResponsiveHomePage extends StatefulWidget {

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

class _ResponsiveHomePageState extends State<ResponsiveHomePage> {

bool _isNarrow = true;

void _toggleLayout() {
setState(() {
_isNarrow = !_isNarrow;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Responsive UI Demo'),
),
body: _isNarrow ? _buildNarrowLayout() : _buildWideLayout(),
floatingActionButton: FloatingActionButton(
onPressed: _toggleLayout,
child: Icon(Icons.swap_horiz),
tooltip: 'Toggle Layout',
),

INDRANEEL K 23 | P a g e
 );
}

Widget _buildNarrowLayout() {
return Center(
child: Column(
mainAxisAlignment: [Link],
children: <Widget>[
[Link]('assets/images/[Link]', width: 300, height: 300),

SizedBox(height: 20),
FlutterLogo(size: 100),
SizedBox(height: 20),
Text(
'Narrow Layout',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
),
);
}

Widget _buildWideLayout() {
return Center(
child: Row(
mainAxisAlignment: [Link],
children: <Widget>[
[Link]('assets/images/[Link]', width: 100, height: 100),

SizedBox(width: 20),
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'),

INDRANEEL K 24 | P a g e
 ),
],
),
],
),
);
}
}
Output:

INDRANEEL K 25 | P a g e
Lab Session 4:
a) Setup navigation between different screens using navigator

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

INDRANEEL K 26 | P a g e
 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'),
),
),
);
}
}

Output:

INDRANEEL K 27 | P a g e
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(),
},
);
}
}

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

INDRANEEL K 28 | P a g e
 ),
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'),
),
),
);
}
}
Output :

INDRANEEL K 29 | P a g e
INDRANEEL K 30 | P a g e
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.
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',
);
},
INDRANEEL K 31 | P a g e
 );
}
}

class CardItem extends StatelessWidget {

final String title;
final String subtitle;

const CardItem({
required [Link],
required [Link],
});

@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
},
),
);
}
}

Output:

INDRANEEL K 32 | P a g e
 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(),
);
}
}

class CounterApp extends StatefulWidget {

@override
_CounterAppState createState() => _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'),

INDRANEEL K 33 | P a g e
 ),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: <Widget>[
Text(
'Counter:',
style: TextStyle(fontSize: 24),
),
Text(
'$_counter',
style: TextStyle(fontSize: 36, fontWeight: [Link]),
),
SizedBox(height: 40), // Added SizedBox for spacing
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon([Link]),
),
);
}
}

Output:

INDRANEEL K 34 | P a g e
 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 provider package:

To organize your Flutter project with the Provider package and a Movie model, follow these steps:

1. Project Structure
First, let’s outline a typical directory structure for your project:
Ps c:\> flutter create project

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(
mainAxisAlignment: [Link],
children: <Widget>[
Padding(
padding: const [Link](8.0),
child: CustomTextField(
hintText: 'Enter your name',
onChanged: (value) {
print('Name changed: $value');
},
),
),
SizedBox(height: 20),
Padding(
padding: const [Link](8.0),
child: CustomTextField(

INDRANEEL K 35 | P a g e
 hintText: 'Enter Email',
onChanged: (value) {
print('Email changed: $value');
},
),
),
SizedBox(height: 20),
Padding(
padding: const [Link](8.0),
child: CustomTextField(
hintText: 'Enter Roll Number',
onChanged: (value) {
print('Roll Number changed: $value');
},
),
),
SizedBox(height: 20),
CustomButton(
text: 'Press Me',
onPressed: () {
print('Button pressed!');
},
),
],
),
),
);
}
}

class CustomButton extends StatelessWidget {

final String? text;
final VoidCallback? onPressed;

const CustomButton({
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 {

INDRANEEL K 36 | P a g e
 final String hintText;
final ValueChanged<String> onChanged;

const CustomTextField({
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:

INDRANEEL K 37 | P a g e
b) Apply styling using themes and custom styles
import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: [Link],
hintColor: [Link],
fontFamily: 'Roboto',
textTheme: const TextTheme(
displayLarge: TextStyle(fontSize: 24, fontWeight: [Link]),
bodyLarge: TextStyle(fontSize: 16),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: [Link](
backgroundColor: [Link],
textStyle: const TextStyle(fontSize: 18),
padding: const [Link](horizontal: 20, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: [Link](10),
),
),
),
),
home: HomePage(),
);
}
}

class HomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Styling Example'),
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: <Widget>[
Text(
'Welcome to MyApp',
style: [Link](context).[Link],

INDRANEEL K 38 | P a g e
 ),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
child: const Text('Get Started'),
),
],
),
),
);
}
}
Output:

INDRANEEL K 39 | P a g e
7. a) Design a form with various input fields.
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
_FormPageState createState() => _FormPageState();
}
class _FormPageState extends State<FormPage> {
final _formKey = GlobalKey<FormState>();

late String _name;

late 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!;
},),
SizedBox(height: 20),
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
onSaved: (value) {
_email = value!;

INDRANEEL K 40 | P a g e
 },),
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.currentState?.save();
// Submit the form data
print('Name: $_name');
print('Email: $_email');
print('Subscribe to Newsletter: $_subscribeToNewsletter');
print('Country: $_selectedCountry');
},
child: Text('Submit'),
),],),),),);}}

INDRANEEL K 41 | P a g e
OUTPUT

INDRANEEL K 42 | P a g e
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
_FormWidgetState createState() => _FormWidgetState();
}

class _FormWidgetState extends State<FormWidget> {

final _formKey = GlobalKey<FormState>();

late String _name;

late String _email;
late String _password;
late String _phone;
late String _address;

@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: [Link],
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'Name'),

INDRANEEL K 43 | P a g e
 validator: (value) {
if (value!.isEmpty) {
return 'Please enter your name';
}
return null;
},
onSaved: (value) => _name = value!,
),
SizedBox(height: 16),
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
keyboardType: [Link],
validator: (value) {
if (value!.isEmpty) {
return 'Please enter your email';
} else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
return 'Please enter a valid email address';
}
return null;
},
onSaved: (value) => _email = value!!,
),
SizedBox(height: 16),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a password';
} else if ([Link] < 6) {
return 'Password must be at least 6 characters';
}
return null;
},
onSaved: (value) => _password = value!,
),
SizedBox(height: 16),
TextFormField(
decoration: InputDecoration(labelText: 'Phone'),
keyboardType: [Link],
validator: (value) {
if (value!.isEmpty) {
return 'Please enter your phone number';
} else if (!RegExp(r'^\d{10}$').hasMatch(value!)) {
return 'Please enter a valid phone number';
}
return null;
},

INDRANEEL K 44 | P a g e
 onSaved: (value) => _phone = value!,
),
SizedBox(height: 16),
TextFormField(
decoration: InputDecoration(labelText: 'Address'),
maxLines: 3,
validator: (value) {
if (value!.isEmpty) {
return 'Please enter your address';
}
return null;
},
onSaved: (value) => _address = value!,
),
SizedBox(height: 16),
ElevatedButton(
onPressed: _submitForm,
child: Text('Submit'),
),
],
),
);
}

void _submitForm() {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();

// 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');

[Link](context).showSnackBar(
SnackBar(content: Text('Form Submitted Successfully')),
);
}
}
}

INDRANEEL K 45 | P a g e
OUTPUT:

INDRANEEL K 46 | P a g e
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
_AnimationWidgetState createState() => _AnimationWidgetState();
}

class _AnimationWidgetState extends State<AnimationWidget> with

SingleTickerProviderStateMixin {
late AnimationController _controller;
late 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) {

INDRANEEL K 47 | P a g e
 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();
} else {
_controller.forward();
}
},
child: Text(
_controller.status == [Link] ? 'Reverse Animation' :
'Start Animation',
),
),
],
),
);
}

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

INDRANEEL K 48 | P a g e
INDRANEEL K 49 | P a g e
B) Experiment with different types of animations like fade,slide,etc.

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
_FadeAnimationState createState() => _FadeAnimationState();
}

class _FadeAnimationState extends State<FadeAnimation> with

SingleTickerProviderStateMixin {
late AnimationController _controller;
late 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();
}

INDRANEEL K 50 | P a g e
 @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]();
}
}
OUTPUT:

INDRANEEL K 51 | P a g e
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
_SlideAnimationState createState() => _SlideAnimationState();
}

class _SlideAnimationState extends State<SlideAnimation> with

SingleTickerProviderStateMixin {
late AnimationController _controller;
late 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(

INDRANEEL K 52 | P a g e
 position: _animation,
child: Container(
width: 200,
height: 200,
color: [Link],
),
),
);
}

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

INDRANEEL K 53 | P a g e
SCALE 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('Scale Animation Example'),
),
body: ScaleAnimation(),
),
);
}
}

class ScaleAnimation extends StatefulWidget {

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

class _ScaleAnimationState extends State<ScaleAnimation> with

SingleTickerProviderStateMixin {
late AnimationController _controller;
late 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(

INDRANEEL K 54 | P a g e
 child: ScaleTransition(
scale: _animation,
child: Container(
width: 200,
height: 200,
color: [Link],
),
),
);
}

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

OUTPUT:

INDRANEEL K 55 | P a g e
9.a) Fetch data from REST API
import 'dart:convert';
import 'package:flutter/[Link]';
import 'package:http/[Link]' as http;
import 'package:url_launcher/url_launcher.dart';

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

class MyApp extends StatelessWidget {

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

class HomePage extends StatefulWidget {

@override
_HomePageState createState() => _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');
}
}

_launchURL() async {
const url = '[Link]
if (await canLaunch(url)) {

INDRANEEL K 56 | P a g e
 await launch(url);
} else {
throw 'Could not launch $url';
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('API Data Example'),
),
body: Column(
children: [
ElevatedButton(
onPressed: _launchURL,
child: Text('Visit GNIT Website'),
),
Expanded(
child: [Link](
itemCount: _data.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_data[index]['title']),
subtitle: Text(_data[index]['body']),
);
},
),
),
],
),
);
}
}

INDRANEEL K 57 | P a g e
OUTPUT:

INDRANEEL K 58 | P a g e
B) Display the fetched data in a meaningful way in the UI

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
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

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 {
setState(() {
_isLoading = false;

INDRANEEL K 59 | P a g e
 });
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;

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

@override
Widget build(BuildContext context) {
return Card(
margin: [Link](horizontal: 16, vertical: 8),
child: Padding(
padding: [Link](16),
child: Column(
crossAxisAlignment: [Link],
children: <Widget>[
Text(
title,

INDRANEEL K 60 | P a g e
 style: TextStyle(fontSize: 18, fontWeight: [Link]),
),
SizedBox(height: 8),
Text(
body,
style: TextStyle(fontSize: 16),
),
],
),
),
);
}
}
OUTPUT:

INDRANEEL K 61 | P a g e