SAMSKRUTI COLLEGE OF ENGINEERING &

TECHNOLOGY
Approved by AICTE | Affiliated to JNTU Hyderabad | NAAC 'A' Grade | NBA Accredited | An Autonomous Institution

UI Design — Flutter Lab

Lesson Plan — AUTONOMOUS [Link] III Year I Semester (R22), Course Code CS506PC
Academic Year 2026-27 | 10 Sessions x 2 Hours — Full Syllabus Coverage
CSM Section A — Tuesday | CSM Section B — Thursday
This lesson plan operationalises the AUTONOMOUS R22 UI Design - Flutter skill development lab (CS506PC, III Year I
Semester) as ten 2-hour lab sessions, mapped onto the actual dates from the Academic Calendar 2026-27. Each session
covers one stage of the official syllabus - from environment setup through widgets, layouts, responsiveness, navigation,
theming, forms, API integration, animation, and testing - culminating in an integrated mini-project. The calendar's First
Mid Term break falls naturally right after Session 8, so all 10 core experiments finish by the fourth week of September,
well ahead of the Second Mid Term.

Course Outcomes
• Install and configure the Flutter/Dart development environment.
• Implement Flutter widgets and layout structures (Row, Column, Stack, Container).
• Design responsive UIs and implement multi-screen navigation.
• Create custom widgets and apply themes/styles consistently.
• Design forms with input validation and error handling.
• Fetch and display data from external APIs.
• Add basic animations and write simple unit tests for UI components.
 S CSM-A (Tue) CSM-B (Thu) Suggested Use

11 29-09-2026 01-10-2026 Doubt-clearing & re-submission of pending records (Sessions 1-5)

12 06-10-2026 08-10-2026 Extra practice: Layouts, Responsive UI, Navigation (peer-assisted)

13 13-10-2026 15-10-2026 Mini-project enhancement: add a second API screen or improved theme

14 27-10-2026 29-10-2026 Mock viva + code review for Mini-Project (Session 10 app)

15 03-11-2026 05-11-2026 Second Mid Term revision buffer / catch-up for absentees

16 10-11-2026 12-11-2026 Final record completion, file checking & practical-exam readiness check

Session-by-Session Roadmap with Actual Dates

S CSM-A CSM-B Focus Key Outcome
(Tue) (Thu)

1 14-07-2026 16-07-2026 Environment Setup & Dart Install and configure the Flutter/Dart toolchain; write
Fundamentals and run basic Dart programs.

2 21-07-2026 23-07-2026 Flutter Widgets — Stateless vs Differentiate StatelessWidget and StatefulWidget;

Stateful build a simple interactive widget tree.

3 28-07-2026 30-07-2026 Layouts — Row, Column, Stack, Compose UI layouts using Flutter's core layout
Container widgets.

4 04-08-2026 06-08-2026 Responsive UI Design Design a UI that adapts to different screen sizes
using MediaQuery, Expanded, and Flexible.

5 11-08-2026 13-08-2026 Navigation & Multi-Screen Apps Implement navigation between multiple screens,
passing data forward and back.

6 18-08-2026 20-08-2026 Custom Widgets, Theming & Styling Create reusable custom widgets and apply
consistent theming across an app.

7 25-08-2026 27-08-2026 Forms, Input Validation & Error Design a form with multiple input fields, client-side
Handling validation, and error messages.

8 01-09-2026 03-09-2026 Fetching & Displaying Data from an Fetch JSON data from a REST API and render it in
API the UI using FutureBuilder.

9 15-09-2026 17-09-2026 Animation Basics in Flutter Add simple implicit and explicit animations to a
Flutter UI.

10 22-09-2026 24-09-2026 Widget Testing & Mini-Project Write a basic widget test and integrate all learned
Integration concepts into one cohesive mini-app.
Buffer / Revision Weeks (extra slots available on the calendar)
Your calendar allows 16 lab slots per section before the Second Mid Term/practical exam window, but the official syllabus
needs only 10. The remaining 6 slots are best used as shown below rather than left idle.
Detailed Session Plans
Session 1: Environment Setup & Dart Fundamentals
CSM-A (Tue): 14-07-2026 | CSM-B (Thu): 16-07-2026

Learning Outcome: Install and configure the Flutter/Dart toolchain; write and run basic Dart programs.
Prerequisite: Basic programming logic (any language).
Resources Needed: Flutter SDK, Dart SDK, VS Code / Android Studio, internet access for SDK download.
Time Activity Details
0:00-0:15 Intro & Overview of Flutter, cross-platform UI development, and the lab's 10-experiment roadmap for
Orientation the semester.

0:15-0:45 Guided Demo Install Flutter SDK & Dart SDK (Windows/Linux), configure PATH, run 'flutter doctor', set up
VS Code/Android Studio with Flutter & Dart plugins.

0:45-1:15 Hands-on Lab Students install Flutter on their own machines; run 'flutter doctor' and resolve flagged issues;
create/run the default counter app via 'flutter create' + 'flutter run'.

1:15-1:45 Dart Basics Write simple Dart programs: variables & data types, string interpolation, arithmetic, a simple
Exercise function (e.g., print full name from first/last name).

1:45-2:00 Wrap-up & Viva Quick viva confirming each student's environment works; assign Experiment 1 write-up
(installation steps + first Dart program).
Session 2: Flutter Widgets — Stateless vs Stateful
CSM-A (Tue): 21-07-2026 | CSM-B (Thu): 23-07-2026

Learning Outcome: Differentiate StatelessWidget and StatefulWidget; build a simple interactive widget tree.
Prerequisite: Session 1 completed; working Flutter environment.
Resources Needed: Flutter SDK, code editor, sample counter app template.
Time Activity Details
0:00-0:15 Recap & Widget tree concept; StatelessWidget vs StatefulWidget; build/rebuild lifecycle; the role of
Theory setState().

0:15-0:45 Guided Demo Build a 'Hello World' Scaffold + AppBar app, then convert it into a Stateful counter app, tracing
how setState() triggers a rebuild.

0:45-1:30 Hands-on Lab Students build their own StatefulWidget app (e.g., toggling text color / incrementing a
counter); identify which widgets are stateless vs stateful.

1:30-1:50 Peer Review Pair students to review each other's widget trees and identify one improvement each.

1:50-2:00 Wrap-up Recap key differences; preview next session on layouts.

 Session 3: Layouts — Row, Column, Stack, Container
CSM-A (Tue): 28-07-2026 | CSM-B (Thu): 30-07-2026

Learning Outcome: Compose UI layouts using Flutter's core layout widgets.

Prerequisite: Session 2 completed.
Resources Needed: Flutter SDK, code editor, sample UI mock image/wireframe.
Time Activity Details
0:00-0:15 Theory Layout model (constraints flow down, sizes flow up); Row/Column main-axis & cross-axis
alignment; Container padding/margin/decoration; Stack for overlapping widgets.

0:15-0:45 Guided Demo Build a profile-card layout combining Row, Column, Container, and a Stack-based badge
overlay.

0:45-1:30 Hands-on Lab Students implement a given layout mock (e.g., a product card or login screen skeleton) using
Row/Column/Container/Stack only.

1:30-1:50 Debug Clinic Common layout errors (overflow, unbounded height) diagnosed as a group using student
screens.

1:50-2:00 Wrap-up & Viva Short viva on alignment properties; assign record write-up.
Session 4: Responsive UI Design
CSM-A (Tue): 04-08-2026 | CSM-B (Thu): 06-08-2026

Learning Outcome: Design a UI that adapts to different screen sizes using MediaQuery, Expanded, and Flexible.
Prerequisite: Session 3 completed.
Resources Needed: Flutter SDK, Android emulator or Chrome ('flutter run -d chrome') for quick resizing tests.
Time Activity Details
0:00-0:15 Theory Why responsiveness matters across phones/tablets/web; MediaQuery, LayoutBuilder,
Expanded vs Flexible.

0:15-0:45 Guided Demo Convert a fixed-size layout into a responsive one using [Link](context).size and
Expanded/Flexible; test on two simulated screen sizes.

0:45-1:30 Hands-on Lab Students take their Session 3 layout and make it responsive so it renders correctly on both
phone-sized and tablet-sized emulator/window.

1:30-1:50 Testing Resize the emulator/browser window live and verify no overflow errors.

1:50-2:00 Wrap-up Recap responsive patterns; preview navigation.

Session 5: Navigation & Multi-Screen Apps
CSM-A (Tue): 11-08-2026 | CSM-B (Thu): 13-08-2026

Learning Outcome: Implement navigation between multiple screens, passing data forward and back.
Prerequisite: Session 4 completed.
Resources Needed: Flutter SDK, code editor.
Time Activity Details
0:00-0:15 Theory Navigator stack model; [Link]/pop; named routes; passing arguments between
screens.

0:15-0:45 Guided Demo Build a two-screen app: a list screen and a detail screen, navigating with [Link] and
returning a result with [Link].

0:45-1:30 Hands-on Lab Students build a 3-screen app (Home -> Details -> Confirmation) using named routes, passing
data across at least one transition.

1:30-1:50 Peer Demo Volunteers demo their navigation flow to the class.
 1:50-2:00 Wrap-up & Viva Viva on navigation stack behaviour; assign record write-up.
Session 6: Custom Widgets, Theming & Styling

Time Activity Details

0:00-0:15 Theory Form and TextFormField widgets; GlobalKey; validator functions; showing SnackBar/dialog
errors.

0:15-0:45 Guided Demo Build a registration form (name, email, password) with validators and a submit button that only
proceeds when valid.

0:45-1:30 Hands-on Lab Students build their own form (feedback/login form) with at least 3 fields, validation rules, and
clear error handling.

1:30-1:50 Testing Students test each other's forms with invalid input to confirm validation triggers correctly.

1:50-2:00 Wrap-up & Viva Viva on validator logic; assign record write-up.
CSM-A (Tue): 18-08-2026 | CSM-B (Thu): 20-08-2026

Learning Outcome: Create reusable custom widgets and apply consistent theming across an app.
Prerequisite: Session 5 completed.
Resources Needed: Flutter SDK, code editor, existing multi-screen project from Session 5.
Time Activity Details
0:00-0:15 Theory Extracting a custom widget class; ThemeData and MaterialApp theme property; TextStyle,
colour schemes, reusable style constants.

0:15-0:45 Guided Demo Refactor a repeated card/button pattern into a custom widget class; apply a global
ThemeData with custom colours and fonts.

0:45-1:30 Hands-on Lab Students build 2 custom widgets (e.g., CustomButton, CustomCard) and apply a consistent
theme across their multi-screen app.

1:30-1:50 Code Review Instructor spot-checks reusability of the custom widgets.

1:50-2:00 Wrap-up Recap theming; preview forms.

Session 7: Forms, Input Validation & Error Handling
CSM-A (Tue): 25-08-2026 | CSM-B (Thu): 27-08-2026

Learning Outcome: Design a form with multiple input fields, client-side validation, and error messages.
Prerequisite: Session 6 completed.
Resources Needed: Flutter SDK, code editor.
Session 8: Fetching & Displaying Data from an API
CSM-A (Tue): 01-09-2026 | CSM-B (Thu): 03-09-2026

Learning Outcome: Fetch JSON data from a REST API and render it in the UI using FutureBuilder.
Prerequisite: Session 7 completed; basic understanding of JSON.
Resources Needed: Flutter SDK, http package, internet access, a public test API endpoint.
Time Activity Details
0:00-0:15 Theory http package basics; async/await in Dart; Future & FutureBuilder; JSON decoding into Dart
objects.

0:15-0:45 Guided Demo Fetch data from a public test API (e.g., JSONPlaceholder) and display it in a ListView using
FutureBuilder, with loading and error states.

0:45-1:30 Hands-on Lab Students fetch data from a given API endpoint and display it in a list/grid, handling loading,
success, and error states explicitly.

1:30-1:50 Debug Clinic Troubleshoot common async/JSON parsing errors as a group.

 1:50-2:00 Wrap-up Recap async data flow; preview animation.
Session 9: Animation Basics in Flutter
CSM-A (Tue): 15-09-2026 | CSM-B (Thu): 17-09-2026

Learning Outcome: Add simple implicit and explicit animations to a Flutter UI.
Prerequisite: Session 8 completed.
Resources Needed: Flutter SDK, code editor.
Time Activity Details
0:00-0:15 Theory Implicit animations (AnimatedContainer, AnimatedOpacity) vs explicit animations
(AnimationController + Tween); animation curves.

0:15-0:45 Guided Demo Animate a container's size/colour with AnimatedContainer, then build a fade/slide transition
using AnimationController.

0:45-1:30 Hands-on Lab Students add at least one implicit and one explicit animation to a screen from their project.

1:30-1:50 Showcase Students demo their animations to the class.

1:50-2:00 Wrap-up Recap animation types; preview final session.

Session 10: Widget Testing & Mini-Project Integration
CSM-A (Tue): 22-09-2026 | CSM-B (Thu): 24-09-2026

Learning Outcome: Write a basic widget test and integrate all learned concepts into one cohesive mini-app.
Prerequisite: Sessions 1-9 completed.
Resources Needed: Flutter SDK, flutter_test package, all prior session projects.
Time Activity Details
0:00-0:15 Theory Why test UI code; flutter_test package; WidgetTester basics; pumpWidget and find/expect.

0:15-0:45 Guided Demo Write a simple widget test verifying a button tap updates displayed text (testing the Session 2
counter app).

0:45-1:30 Mini-Project Students integrate widgets, layout, navigation, theming, forms, API data, and animation from
Work Sessions 2-9 into one small app (e.g., a 'Campus Events' app: list screen from API, detail
screen, feedback form, themed UI, one animation).

1:30-1:50 Final Demos Students demo their mini-project; instructor gives quick feedback.

1:50-2:00 Wrap-up Course recap; submission guidelines for the lab record and viva schedule.
Assessment & Record Work
• Lab record: each student documents the aim, code, and output/screenshots for every session's exercise.
• Continuous viva: 5-minute spot viva at the end of each session on that day's concepts.
• Mini-project (Session 10): integrated app assessed on functionality, code organisation, and UI polish.
• Suggested weighting: Day-to-day record & viva 40%, Mini-project 30%, End-lab practical exam 30% (adjust
toinstitutional norms).

Key Milestones from the Academic Calendar 2026-27

Milestone Date(s)

Commencement of I Semester Classwork 13-07-2026

1st Spell of Instruction 13-07-2026 to 05-09-2026

First Mid Term Examinations (no lab) 07-09-2026 to 12-09-2026

Parent Teacher Meeting 26-09-2026

2nd Spell of Instruction 14-09-2026 to 13-11-2026

Dussehra Recess (no lab) 19-10-2026 to 24-10-2026

Second Mid Term Examinations (no lab) 16-11-2026 to 21-11-2026

Preparation Holidays & Practical Examinations 23-11-2026 to 30-11-2026

End Semester Examinations 01-12-2026 to 18-12-2026

Notes for the Instructor
• Sessions assume one experiment/topic per 2-hour slot; combine or split sessions if your institution's weekly lab
slotdiffers.
• Encourage students to keep one running Flutter project from Session 5 onward so navigation, theming, forms,
andAPI/animation work integrate naturally into Session 10's mini-project.
• Use Chrome ('flutter run -d chrome') for quick layout/responsiveness demos when an emulator is slow to boot.
• Keep a shared troubleshooting doc for common 'flutter doctor' and dependency issues from Session 1 - saves
timelater.
• If a public holiday falls on a scheduled Tuesday/Thursday, shift that session into one of the 6 buffer slots
(Sessions11-16 in the roadmap table).