DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
III B. TECH I SEM CSE, CSM&AIML (J23)
UI DESIGN-FLUTTER
LAB MANUAL
Academic Year 2025-2026
CS506PC: UI DESIGN-FLUTTER
B.Tech. III Year Sem. L T PC
0021
Course Objectives:
Learns to Implement Flutter Widgets and Layout
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
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.
11. a) Display Current Date and Time
Objective: Show how to use Dart’s built-in
DateTime class and update UI dynamically.
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:provider/provider.dart';
void main() {
runApp(const MyApp());
}
/// Data model for managing and providing the current date and time.
///
/// This class extends [ChangeNotifier] to allow widgets to listen for changes
/// to the current time and rebuild accordingly. It uses a [Timer.periodic]
/// to update the time every second.
2
class DateTimeData extends ChangeNotifier {
DateTime _currentDateTime;
Timer? _timer;
/// Initializes the [DateTimeData] with the current time and starts a
/// periodic timer to update it every second.
DateTimeData() : _currentDateTime = DateTime.now() {
_timer = Timer.periodic(const Duration(seconds: 1), (Timer timer) {
_currentDateTime = DateTime.now();
// Notify all listening widgets that the data has changed.
notifyListeners();
});
}
/// Provides the current date and time as a formatted string.
///
/// This getter ensures that the UI always displays the most up-to-date
/// time in a consistent format.
String get formattedCurrentTime => _currentDateTime.toString();
/// Cancels the internal timer when this [ChangeNotifier] is disposed,
/// preventing memory leaks.
@override
void dispose() {
_timer?.cancel();
super.dispose();
}
}
/// The root widget of the application.
///
/// It sets up the [MaterialApp] and provides the [DateTimeData] using
/// [ChangeNotifierProvider] to the rest of the widget tree.
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
// The home widget is wrapped in a ChangeNotifierProvider to make
// DateTimeData available to its descendants.
home: ChangeNotifierProvider<DateTimeData>(
create: (BuildContext context) => DateTimeData(),
builder: (BuildContext context, Widget? child) => const HomePage(),
),
);
3
}
}
/// The main page widget that displays the current date and time.
///
/// This is a [StatelessWidget] as all its dynamic data is provided by
/// [DateTimeData] via [Provider].
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
// Watch for changes in DateTimeData and rebuild when notified.
final DateTimeData dateTimeData = context.watch<DateTimeData>();
return Scaffold(
appBar: AppBar(title: const Text("Current Time")),
body: Center(
child: Text(
"Current Time:\n${dateTimeData.formattedCurrentTime}",
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
),
);
}
}
4
5
12. a) Simple Calculator (Add, Subtract,
Multiply, Divide)
Objective: Practice user input, buttons, and
basic logic.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Simple Calculator',
home: Calculator(),
);
}
}
class Calculator extends StatefulWidget {
@override
_CalculatorState createState() => _CalculatorState();
}
class _CalculatorState extends State<Calculator> {
TextEditingController num1Controller = TextEditingController();
TextEditingController num2Controller = TextEditingController();
String result = "";
void calculate(String op) {
double n1 = double.tryParse(num1Controller.text) ?? 0;
double n2 = double.tryParse(num2Controller.text) ?? 0;
double res = 0;
switch (op) {
case '+':
res = n1 + n2;
break;
case '-':
res = n1 - n2;
break;
6
case '*':
res = n1 * n2;
break;
case '/':
res = n2 != 0 ? n1 / n2 : 0;
break;
}
setState(() {
result = "Result: $res";
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Simple Calculator")),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: [
TextField(controller: num1Controller, decoration: InputDecoration(labelText:
"Enter first number"), keyboardType: TextInputType.number),
TextField(controller: num2Controller, decoration: InputDecoration(labelText:
"Enter second number"), keyboardType: TextInputType.number),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(onPressed: () => calculate('+'), child: Text("+")),
ElevatedButton(onPressed: () => calculate('-'), child: Text("-")),
ElevatedButton(onPressed: () => calculate('*'), child: Text("*")),
ElevatedButton(onPressed: () => calculate('/'), child: Text("/")),
],
),
SizedBox(height: 20),
Text(result, style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
],
),
),
);
}
}
7
8
9
