DEPARTMENT OF COMPUTER SCIENCE AND

ENGINEERING

III B. TECH I SEM CSE (R22)

UI DESIGN-

FLUTTER LAB

MANUAL

Academic Year 2023-2024

Prepared by

Asst.Professor Mr A Naveen kumar

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 statefull 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
1.a) Install Flutter and Dart SDK.
Ans) Dart SDK is a pre-compiled version so we have to download and extract it
only. For this follow the below-given instructions: Step 1: Download Dart SDK.
Download Dart SDK from the Dart SDK archive page. The URL
is: https://dart.dev/tools/sdk/archive

Click on DART SDK to download SDK for Windows 64-Bit Architecture. The
download will start and a zip file will be downloaded. Note: To download SDK for
any other OS select OS of your choice. Step 2: Extract the downloaded zip file.
Extract the contents of downloaded zip file and after extracting contents of zip file
will be as shown:
Step 3: Running Dart. Now open bin folder and type “cmd” as given below:

Command Prompt will open with our desired path of bin folder and now type dart”.
And now we are ready to use dart through bin folder but setting up the path in environment variables
will ease our task of Step3 and we can run dart from anywhere in the file system using command
prompt.
Step 4: Setting up path in environment variables. Open Environment Variables from
advanced system settings and add Path in System Variables as depicted in image:

Now we are done to use Dart from anywhere in the file system.
Step 5: Run Dart Using cmd

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

void main(){
var firstName = "John";
var lastName = "Doe";
print("Full name is $firstName $lastName");
}
Output: Full name is John Doe

void main() {
int num1 = 10; //declaring number1
int num2 = 3; //declaring number2

// Calculation
int sum = num1 + num2;
int diff = num1 - num2;
int mul = num1 * num2;
double div = num1 / num2; // It is double because it outputs number with
 decimal.

// displaying the output print("The sum is $sum");

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

Output:
The sum is 13
The diff is 7
The mul is 30
The div is 3.3333333333333335

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

Text Widget:
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyTextPage()
);
}
}
class MyTextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Text Widget Example")
),
body: Center(
child:Text(
"Hello World! This is a Text Widget.",
style: TextStyle(
fontSize: 35,
color: Colors.purple,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
 letterSpacing: 8,
wordSpacing: 20,
backgroundColor: Colors.yellow,
shadows: [
Shadow(color: Colors.blueAccent, offset: Offset(2,1), blurRadius:10)
]
),
)
),
);
}
}

Output: When we run this application in the emulator or device, we should get the UI similar to the
below screenshot:

Image Widget:
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Image Demo'),
),
body: Center(
child: Column(
children: <Widget>[
 Image.asset('assets/tablet.png'),
Text(
'A tablet is a wireless touch screen computer that is smaller than a notebook but larger than a
smartphone.',
style: TextStyle(fontSize: 20.0),
)
],
),
),
),
);
}
}

Output:

Container Widget:
import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.

class MyApp extends StatelessWidget {

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

class MyContainerWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Container Example"),
),
body: Container(
width: double.infinity,
height: 150.0,
color: Colors.green,
margin: EdgeInsets.all(25),
padding: EdgeInsets.all(35),
alignment: Alignment.center,
transform: Matrix4.rotationZ(0.1),
child: Text("Hello! I am in the container widget!!",
style: TextStyle(fontSize: 25)),
),
),
);
}
}

Output:

When we run this app, it will give the following screenshot:

2.b) Implement different layout structures using Row, Column, and Stack widgets
Row widgets:
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage()
);
}
}

class MyHomePage extends StatefulWidget {

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

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Row Example"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:<Widget>[
Container(
margin: EdgeInsets.all(12.0),
padding: EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),
),
Container(
margin: EdgeInsets.all(15.0),
padding: EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),
),
Container(
margin: EdgeInsets.all(12.0),
padding: EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),
)
]
),
);
}
}

Output:

When we run this app, we should get the UI as the below screenshot.

Column widgets:

import 'package:flutter/material.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage()
);
}
}

class MyHomePage extends StatefulWidget {

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

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Column Example"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget>[
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.red
),
child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.red
),
child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.red
),
child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
)
]
),
);
}
}
Output:
When we run this app, we should get the UI as the below screenshot.
Stack Widget:
The below code explains how to use the stack widget in Flutter. In this code, we are going to try most
of the essential attributes of the stack widget.

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(

home: MyStackWidget(),
);
}
}

class MyStackWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Stack Widget Example"),
),
body: Center(
child: Stack(
fit: StackFit.passthrough,
overflow: Overflow.visible,
children: <Widget>[
 // Max Size Widget
Container(
height: 300,
width: 400,
color: Colors.green,
child: Center(
child: Text(
'Top Widget: Green',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
Positioned(
top: 30,
right: 20,
child: Container(
height: 100,
width: 150,
color: Colors.blue,
child: Center(
child: Text(
'Middle Widget',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),

Positioned(
top: 30,
left: 20,
child: Container(
height: 100,
width: 150,
color: Colors.orange,
child: Center(
child: Text(
'Bottom Widget',
style: TextStyle(color: Colors.white, fontSize: 20),

),
),
)
),
],
),
)
),
);
}
}
Output:

When we run the app, we should get the UI of the screen similar to the below screenshot:

3.a) Implement Design a responsive UI that adapts to different screen sizes Flutter.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive UI Example',
home: ResponsiveHome(),
);
}
}
class ResponsiveHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Responsive UI')),
body: LayoutBuilder(
builder: (context, constraints) {
// Determine screen size
bool isWideScreen = constraints.maxWidth > 600;
return Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Responsive Image
Container(
width: isWideScreen ? 300 : 150,
height: isWideScreen ? 300 : 150,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://via.placeholder.com/300'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(15),
),
),
SizedBox(height: 20),
// Responsive Text
Text(
'Welcome to Responsive Flutter UI!',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: isWideScreen ? 24 : 18,
 fontWeight: FontWeight.bold,
),
),
SizedBox(height: 20),
// Responsive Button
ElevatedButton(
onPressed: () {},
child: Text('Click Me'),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
horizontal: isWideScreen ? 30 : 15,
vertical: isWideScreen ? 15 : 10,
),
),
),
],
),
);
},
),
);
}
}
Output:

3.b)Implement media queries and breakpoints for responsiveness Flutter

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive UI Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ResponsiveHome(),
);
}
}

class ResponsiveHome extends StatelessWidget {

@override
Widget build(BuildContext context) {
// Get screen size using MediaQuery
final screenSize = MediaQuery.of(context).size;
final isMobile = screenSize.width < 600; // Mobile breakpoint
final isTablet = screenSize.width >= 600 && screenSize.width < 1200; // Tablet breakpoint
final isDesktop = screenSize.width >= 1200; // Desktop breakpoint

return Scaffold(
appBar: AppBar(title: Text('Responsive UI')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Header
Container(
width: double.infinity,
padding: EdgeInsets.all(16),
color: Colors.blueAccent,
child: Text(
'Responsive Header',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: isDesktop ? 28 : isTablet ? 24 : 20,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 20),
// Content Area
Expanded(
child: Row(
children: [
// Left Column
Expanded(
child: Column(
children: [
Container(
margin: EdgeInsets.symmetric(vertical: 10),
height: isDesktop ? 200 : isTablet ? 160 : 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://via.placeholder.com/300'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(10),
 ),
),
Text(
'Image 1',
style: TextStyle(fontSize: isDesktop ? 18 : isTablet ? 16 : 14),
),
SizedBox(height: 20),
Container(
margin: EdgeInsets.symmetric(vertical: 10),
height: isDesktop ? 200 : isTablet ? 160 : 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://via.placeholder.com/300'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(10),
),
),
Text(
'Image 2',
style: TextStyle(fontSize: isDesktop ? 18 : isTablet ? 16 : 14),
),
],
),
),

// Right Column (only on tablet and desktop)

if (isTablet || isDesktop) SizedBox(width: 20),
if (isTablet || isDesktop)
Expanded(
child: Column(
children: [
Container(
 margin: EdgeInsets.symmetric(vertical: 10),
height: isDesktop ? 200 : isTablet ? 160 : 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://via.placeholder.com/300'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(10),
),
),
Text(
'Image 3',
style: TextStyle(fontSize: isDesktop ? 18 : isTablet ? 16 : 14),
),
SizedBox(height: 20),
Container(
margin: EdgeInsets.symmetric(vertical: 10),
height: isDesktop ? 200 : isTablet ? 160 : 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://via.placeholder.com/300'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(10),
),
),
Text(
'Image 4',
style: TextStyle(fontSize: isDesktop ? 18 : isTablet ? 16 : 14),
),
],
),
),
 ],
),
),
// Footer Section
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {},
child: Text('Button 1'),
),
ElevatedButton(
onPressed: () {},
child: Text('Button 2'),
),
],
),
],
),
),
);
}
}

Output: Visual Representation

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

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Navigation Example',

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: HomeScreen(),

);

}
// Home Screen

class HomeScreen extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Home Screen')),

body: Center(

child: ElevatedButton(

child: Text('Go to Second Screen'),

onPressed: () {

Navigator.push(

context,

MaterialPageRoute(builder: (context) => SecondScreen()),

);

},

),

),

);

// Second Screen

class SecondScreen extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('Second Screen')),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text('This is the Second Screen!'),

SizedBox(height: 20),

ElevatedButton(

child: Text('Go to Third Screen'),

onPressed: () {

Navigator.push(

context,

MaterialPageRoute(builder: (context) => ThirdScreen()),

);

},

),

SizedBox(height: 20),

ElevatedButton(

child: Text('Go Back to Home Screen'),

onPressed: () {

Navigator.pop(context);

},

),

],

),
 ),

);

// Third Screen

class ThirdScreen extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Third Screen')),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text('This is the Third Screen!'),

SizedBox(height: 20),

ElevatedButton(

child: Text('Go Back to Second Screen'),

onPressed: () {

Navigator.pop(context);

},

),

SizedBox(height: 20),

ElevatedButton(

child: Text('Go Back to Home Screen'),

 onPressed: () {

Navigator.popUntil(context, (route) => route.isFirst);

},

),

],

),

),

);

Output: Visual Representation

Home Screen:

Second Screen:
Third Screen:

4.b)Implement navigation with named routes.

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

class MyApp extends StatelessWidget

{ @override
Widget build(BuildContext context)
{ return MaterialApp(
title: 'Named Routes Navigation Example',
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/about': (context) =>
 AboutScreen(),
},
);
}
}

class HomeScreen extends StatelessWidget

{ @override
Widget build(BuildContext context)
{ return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Welcome to the Home Screen.',
),
SizedBox(height: 20),
ElevatedButton( onPr
essed: () {
Navigator.pushNamed(context, '/about');
},
child: Text('Go to About'),
),
 ],
),
),
);
}
}

class AboutScreen extends StatelessWidget {

@override
Widget build(BuildContext context)
{ return Scaffold(
appBar: AppBar(
title: Text('About Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'This is the About Screen.',
),
SizedBox(height: 20),
ElevatedButton( onPr
essed: () {
Navigator.pop(context);
},
child: Text('Go back to Home'),
),
],
),
),
);
}
}

Output:
5.a) Learn about statefull and stateless widgets.
1.Stateful Widget Example:

import 'package:flutter/material.dart';
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stateful Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
 ),
),

floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}

Output for Stateful Widget:

2.Stateful Widget Example:

import 'package:flutter/material.dart';
class MyStatelessWidget extends StatelessWidget {
final String title;
MyStatelessWidget({required this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
 ),
body: Center(
child: Text('This is a Stateless Widget!'),
),
);
}
}

Output for Stateless Widget:

+---------------------------+
| My Stateless Widget | <- App Bar
+---------------------------+
| |
| This is a Stateless Widget! |
| |
+---------------------------+

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

1. State Management with SetState:

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SetState Example',
home: CounterScreen(),
);
}
}
class CounterScreen extends StatefulWidget {
 @override
_CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {

int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Counter using setState')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter Value: $_counter'),
SizedBox(height: 20),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
),
),
);
}
}

Output:
After pressing the button once:
Counter Value: 1
After pressing it three times:
Counter Value: 3

2. State Management with Provider:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Provider Example',
home: CounterScreen(),
);
}
}
class Counter with ChangeNotifier {
int _counter = 0;

int get counter => _counter;

void increment() {
_counter++;
notifyListeners(); // Notifies listeners to rebuild
}
}
class CounterScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Counter using Provider')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter Value: ${Provider.of<Counter>(context).counter}'),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Provider.of<Counter>(context, listen: false).increment();
},
child: Text('Increment'),
),
],
),
),
);
}
}
Output:

6.a) Create custom widgets for specific UI elements

import 'package:flutter/material.dart';
// Custom Button Widget
class CustomButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;

// Constructor to receive text and onPressed function

CustomButton({required this.text, required this.onPressed});

@override
Widget build(BuildContext context) {
return ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blueAccent, // Background color
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
shape: RoundedRectangleBorder(
 borderRadius: BorderRadius.circular(10),
),
),
onPressed: onPressed,
child: Text(
text,
style: TextStyle(fontSize: 18, color: Colors.white),
),
);
}
}

// Main App
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: Center(
child: CustomButton(
text: "Click Me",
onPressed: () {
// Action when button is pressed
print("Button Pressed!");
},
),
 ),
),
);
}

OUTPUT:

6.b) Apply styling using themes and custom styles.

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// Define global theme properties
primaryColor: Colors.teal,
accentColor: Colors.orangeAccent,
 textTheme: TextTheme(
headline1: TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color: Colors.teal),
bodyText1: TextStyle(fontSize: 18, color: Colors.black),
),
buttonTheme: ButtonThemeData(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
buttonColor: Colors.teal,
),
),
home: HomeScreen(),
);
}
}

class HomeScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Theming Example", style: Theme.of(context).textTheme.headline1),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Hello, Flutter!",
style: Theme.of(context).textTheme.bodyText1,
),
SizedBox(height: 20),
CustomButton(text: "Press Me", onPressed: () {}),
 ],
),
),
);
}
}

// Custom Button Widget with Theme Styling

class CustomButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;

CustomButton({required this.text, required this.onPressed});

@override
Widget build(BuildContext context) {
return ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Theme.of(context).buttonTheme.buttonColor,
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
shape: Theme.of(context).buttonTheme.shape,
),
onPressed: onPressed,
child: Text(
text,
style: TextStyle(color: Colors.white, fontSize: 16),
),
);
}
}

OUTPUT:
7. a) Design a form with various input fields.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Form Example',
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(title: Text('Form Example')),
body: FormScreen(),
),
);
}
}

class FormScreen extends StatefulWidget {

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

class _FormScreenState extends State<FormScreen> {

final _formKey = GlobalKey<FormState>();
final TextEditingController _nameController = TextEditingController();
final TextEditingController _emailController = TextEditingController();
final TextEditingController _phoneController = TextEditingController();
final TextEditingController _dateController = TextEditingController();

String _selectedGender = 'Male';

List<String> _genders = ['Male', 'Female', 'Other'];

@override
void dispose() {
_nameController.dispose();
_emailController.dispose();
_phoneController.dispose();
_dateController.dispose();
super.dispose();
}

Future<void> _selectDate(BuildContext context) async {

final DateTime? picked = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(1900),
lastDate: DateTime(2100),
);
if (picked != null) {
setState(() {
 _dateController.text = "${picked.toLocal()}".split(' ')[0];
});
}
}

void _submitForm() {
if (_formKey.currentState!.validate()) {
print("Name: ${_nameController.text}");
print("Email: ${_emailController.text}");
print("Phone: ${_phoneController.text}");
print("Date of Birth: ${_dateController.text}");
print("Gender: $_selectedGender");
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Form Submitted Successfully!')),
);
}
}

@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: ListView(
children: [
TextFormField(
controller: _nameController,
decoration: InputDecoration(labelText: 'Name'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your name';
}
 return null;
},
),
TextFormField(
controller: _emailController,
decoration: InputDecoration(labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email';
} else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
return 'Please enter a valid email';
}
return null;
},
),
TextFormField(
controller: _phoneController,
decoration: InputDecoration(labelText: 'Phone Number'),
keyboardType: TextInputType.phone,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your phone number';
}
return null;
},
),
TextFormField(
controller: _dateController,
decoration: InputDecoration(
labelText: 'Date of Birth',
suffixIcon: Icon(Icons.calendar_today),
),
 readOnly: true,
onTap: () => _selectDate(context),
),
DropdownButtonFormField(
value: _selectedGender,
items: _genders.map((String gender) {
return DropdownMenuItem(
value: gender,
child: Text(gender),
);
}).toList(),
onChanged: (newValue) {
setState(() {
_selectedGender = newValue as String;
});
},
decoration: InputDecoration(labelText: 'Gender'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _submitForm,
child: Text('Submit'),
),
],
),
),
);
}
}
7b) Implement form validation and error handling.

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Form Validation Example',
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(title: Text('Form Validation')),
body: RegistrationForm(),
),
);
}
}

class RegistrationForm extends StatefulWidget {

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

class _RegistrationFormState extends State<RegistrationForm> {

final _formKey = GlobalKey<FormState>();

final TextEditingController _nameController = TextEditingController();

final TextEditingController _emailController = TextEditingController();
final TextEditingController _phoneController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();

void _submitForm() {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Form Submitted Successfully!')),
);
print("Name: ${_nameController.text}");
print("Email: ${_emailController.text}");
print("Phone: ${_phoneController.text}");
}
}

@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: ListView(
children: [
TextFormField(
controller: _nameController,
decoration: InputDecoration(labelText: 'Name'),
validator: (value) {
 if (value == null || value.isEmpty) {
return 'Please enter your name';
}
return null;
},
),
TextFormField(
controller: _emailController,
decoration: InputDecoration(labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email';
} else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
return 'Please enter a valid email';
}
return null;
},
),
TextFormField(
controller: _phoneController,
decoration: InputDecoration(labelText: 'Phone Number'),
keyboardType: TextInputType.phone,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your phone number';
} else if (!RegExp(r'^\d{10}$').hasMatch(value)) {
return 'Enter a valid 10-digit phone number';
}
return null;
},
),
TextFormField(
 controller: _passwordController,
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your password';
} else if (value.length < 6) {
return 'Password must be at least 6 characters long';
}
return null;
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _submitForm,
child: Text('Submit'),
),
],
),
),
);
}
}

OUTPUT:
8. a) Add animations to UI elements using Flutter's animation framework.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animated Container Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(title: Text('Animated UI Elements')),
body: AnimatedContainerExample(),
),
);
}
}

class AnimatedContainerExample extends StatefulWidget {

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

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {

bool _isExpanded = false;

void _toggleContainer() {
setState(() {
_isExpanded = !_isExpanded;
});
}

@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedContainer(
width: _isExpanded ? 200.0 : 100.0,
height: _isExpanded ? 200.0 : 100.0,
decoration: BoxDecoration(
color: _isExpanded ? Colors.blue : Colors.red,
borderRadius: BorderRadius.circular(_isExpanded ? 0 : 50),
),
duration: Duration(seconds: 1),
curve: Curves.easeInOut,
child: Center(
child: Text(
'Tap Me!',
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
 ),
SizedBox(height: 20),
ElevatedButton(
onPressed: _toggleContainer,
child: Text('Animate Container'),
),
],
),
);
}
}

OUTPUT:
8b) Experiment with different types of animations (fade, slide, etc.).
import 'package:flutter/material.dart';

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

}
class MyApp extends StatelessWidget
{ @override
Widget build(BuildContext context)
{ return MaterialApp(
title: 'Fade Animation
Example', theme: ThemeData(
primarySwatch: Colors.blue,
),
home: FadeAnimationWidget(),
);
}
}

class FadeAnimationWidget extends StatefulWidget

{ @override
_FadeAnimationWidgetState createState() => _FadeAnimationWidgetState();
}

class _FadeAnimationWidgetState extends

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

@override
void initState() {
super.initState();

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

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

CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
),
);

_animationController.forward();
}

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

@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}

Output:

Fade Animation
Slide Animation:

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

class MyApp extends StatelessWidget

{ @override
Widget build(BuildContext context)
{ return MaterialApp(
title: 'Slide Animation
Example', theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SlideAnimationWidget(),
);
}
}

class SlideAnimationWidget extends StatefulWidget

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

class _SlideAnimationWidgetState extends

State<SlideAnimationWidget> with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<Offset> _slideAnimation;

@override
void initState() {
super.initState();

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

_slideAnimation =
Tween<Offset>( begin: Offset(-
1.0, 0.0),
end: Offset(0.0, 0.0),
).animate( CurvedA
nimation(
parent: _animationController,
curve: Curves.easeInOut,
),
);

_animationController.forward();
}

@override
Widget build(BuildContext context)
{ return Scaffold(
appBar: AppBar(
title: Text('Slide Animation Example'),
),
body: SlideTransition(
position: _slideAnimation,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Slide Animation',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
),
);
}
 @override
void dispose() {
_animationController.dispose();
super.dispose();
}
}

Output:

Slide Animation

Scale Animation:

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget
{ @override
Widget build(BuildContext context)
{ return MaterialApp(
title: 'Scale Animation Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ScaleAnimationWidget(),
);
}
}
class ScaleAnimationWidget extends StatefulWidget
{ @override
_ScaleAnimationWidgetState createState() => _ScaleAnimationWidgetState();
}

class _ScaleAnimationWidgetState extends State<ScaleAnimationWidget>

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

@override
void initState() {
super.initState();

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

_scaleAnimation = Tween<double>(begin: 0.5, end: 1.0).animate(

CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
),
);

_animationController.forward();
}

@override
Widget build(BuildContext context)
{ return Scaffold(
appBar: AppBar(
title: Text('Scale Animation Example'),
),
body: ScaleTransition(
scale: _scaleAnimation,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Scale Animation',
style: TextStyle(
color: Colors.white,
 fontSize: 20,
),
),
),
),
),
);
}

@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}

Output:

9. a) Fetch data from a REST API.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

class MyApp extends StatelessWidget {

@override
 Widget build(BuildContext context) {
return MaterialApp(
title: 'Fetch Data Example',
home: Scaffold(
appBar: AppBar(title: Text('Fetch Data from API')),
body: PostData(),
),
);
}
}

class PostData extends StatefulWidget {

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

class _PostDataState extends State<PostData> {

Map<String, dynamic>? post;

Future<void> fetchPost() async {

final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

if (response.statusCode == 200) {
setState(() {
post = json.decode(response.body);
});
} else {
throw Exception('Failed to load post');
}
}

@override
void initState() {
super.initState();
 fetchPost();
}

@override
Widget build(BuildContext context) {
return Center(
child: post == null
? CircularProgressIndicator()
: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Title: ${post!['title']}',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
Text('Body: ${post!['body']}'),
],
),
),
);
}
}
OUTPUT:
9b) Display the fetched data in a meaningful way in the UI.
9b

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fetch Data Example',
home: Scaffold(
appBar: AppBar(title: Text('Fetched Data Display')),
body: PostDataDisplay(),
),
);
}
}

class PostDataDisplay extends StatefulWidget {

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

class _PostDataDisplayState extends State<PostDataDisplay> {

Map<String, dynamic>? post;
Future<void> fetchPost() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

if (response.statusCode == 200) {
setState(() {
post = json.decode(response.body);
});
} else {
throw Exception('Failed to load post');
}
}

@override
void initState() {
super.initState();
fetchPost();
}

@override
Widget build(BuildContext context) {
return Center(
child: post == null
? CircularProgressIndicator()
: Padding(
padding: const EdgeInsets.all(16.0),
child: Card(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
 crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Author ID: ${post!['userId']}',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.grey[700]),
),
SizedBox(height: 10),
Text(
'Title: ${post!['title']}',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
Text(
'Body:',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
SizedBox(height: 5),
Text(
post!['body'],
style: TextStyle(fontSize: 16),
),
],
),
),
),
),
);
}
}
OUTPUT:

10. a) Write unit tests for UI components.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

// Main application widget

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

// A simple application with a button

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter UI Test Example')),
body: Center(
child: MyButton(),
),
),
);
}
}
// Stateful button widget
class MyButton extends StatefulWidget {
@override
_MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {

String buttonText = "Press Me";

void _changeText() {
setState(() {
buttonText = "Pressed!";
});
}

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

// Unit test for MyButton widget

void main() {
testWidgets('MyButton changes text when pressed', (WidgetTester tester) async {
// Build the MyButton widget
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: MyButton(),
),
),
 );

// Verify the initial text is "Press Me"

expect(find.text('Press Me'), findsOneWidget);
expect(find.text('Pressed!'), findsNothing);

// Tap the button

await tester.tap(find.byType(ElevatedButton));
await tester.pump(); // Rebuild the widget after the state has changed

// Verify the text has changed to "Pressed!"

expect(find.text('Press Me'), findsNothing);
expect(find.text('Pressed!'), findsOneWidget);
});
}

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

import 'package:flutter/material.dart';

// Main application widget

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

// A simple application with a counter

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Debugging Example',
home: CounterPage(),
);
}
}

// Stateful widget for counter functionality

class CounterPage extends StatefulWidget {
@override
_CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {

int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++; // Intentional bug: Incrementing without any condition
});
}

void _decrementCounter() {
setState(() {
_counter--; // Intentional bug: Decrementing without validation
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Debugging Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
 'Button pressed this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
ElevatedButton(
onPressed: _decrementCounter,
child: Text('Decrement'),
),
ElevatedButton(
onPressed: () {
// Intentional bug: Dividing by zero
int result = _counter ~/ 0;
print('Result: $result'); // This will cause an exception
},
child: Text('Cause Error'),
),
],
),
),
);
}
}