User Internface Design Using Flutter

Course Objectives:- 

• Learns to Implement Flutter Widgets and Layouts

• Understands Responsive UI Design and with Navigation in Flutter

• Knowledge on Widgets and customize widgets for specific UI elements, Themes

• Understand to include animation apart from fetching data

Course Outcomes: At the end of this course, the student will be able to

CO1: Apply Flutter and Dart fundamentals to design and develop interactive user interfaces.(Apply-L3)

CO2: Implement UI layouts, navigation, state management, and responsive design principles for mobile applications. (Apply-L3)

CO3: Integrate animations, API data fetching, form validation, and debugging techniques to enhance application performance and usability. (Apply-L3)

CO4: Improve individual / teamwork skills, communication & report writing skills with ethical Value

Textbooks:

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

• Rap Payne, Beginning App Development with Flutter: Create Cross-Platform Mobile Apps 151 Edition, Apres

• Richard Rose, Flutter & Dart Cookbook, Developing Full stack Applications for the Cloud, Oreilly.

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.

• Online Compiler

• Dart Language Reference

• Dart Cheat Sheet

• Dart Experiments

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) Create a scrollable List Widget in Form & Add items to it.

b) Implement the List View & Display the selected item in the prompt window.

9. 

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

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

10.

 a) Fetch data from a REST APL

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

Textbooks:

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

2. Rap Payne, Beginning App Development with Flutter: Create Cross-Platform Mobile Apps 151 Edition, Apres

3. Richard Rose, Flutter & Dart Cookbook, Developing Full stack Applications for the Cloud, Oreilly.