KGR23 B.
Tech Syllabus KGRCET Hyderabad
SKILL DEVELOPMENT COURSE (UI design-Flutter)
Course Code: KG23ASD304 L T P C
B.Tech. III Year I – Semester
0 0 2 1
Prerequisites: Programming with Problem solving
Course Objectives: The objectives of this course for the students are to:
1. Learns to Implement Flutter Widgets and Layouts
2. Understands Responsive UI Design and with Navigation in Flutter
3. Knowledge on Widgets and customize widgets for specific UI elements, Themes
4. Understand to include animation apart from fetching data
5. Understand form design, validation, error handling, and unit testing for robust UI components.
Course Outcomes: After completion of this course, the students will be able to
CO1: Implements Flutter Widgets and Layouts
CO2: Responsive UI Design and with Navigation in Flutter
CO3: Create custom widgets for specific UI elements and also Apply styling using themes and custom
styles
CO4: Design a form with various input fields, along with validation and error handling
CO5: Fetches data and write code for unit Test for UI components and also animation
PO PO PO PO PO PO PO PO PO PO PO PO PSO PSO PSO
COs
1 2 3 4 5 6 7 8 9 10 11 12 1 2 3
CO1 3 - - 2 2 - - - - - - - 3 - 2
CO2 3 2 - 2 2 - - - - - - - 3 - 3
CO3 3 - - 2 2 - - - - - - - 3 - 3
CO4 3 - - 2 - 1 - - 2 - - - 2 - 2
CO5 3 2 - 3 - - - - - - - 1 2 2 3
Note: 1 – Low, 2- Medium, 3- High
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.
KGR23 B. Tech Syllabus KGRCET Hyderabad
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.
