2250585: Skill Development Course (UI DESIGN-FLUTTER)

B.Tech. III Year I Sem.

L	T	P	C
0	0	2	1

List of Experiments:

1. 1. Lab - Install Flutter and Dart SDK.
   2. Theory + Program - Write a simple Dart program to understand the language basics.
2. 1. Program - Explore various Flutter widgets (Text, Image, Container, etc.).
   2. Program - Implement different layout structures using Row, Column, and Stack widgets.
3. 1. Program - Design a responsive UI that adapts to different screen sizes.
   2. Program - Implement media queries and breakpoints for responsiveness.
4. 1. Program - Set up navigation between different screens using Navigator.
   2. Program - Implement navigation with named routes.
5. 1. Theory - Learn about stateful and stateless widgets.
   2. Program - Implement state management using setState and Provider.
6. 1. Program - Create custom widgets for specific UI elements.
   2. Program - Apply styling using themes and custom styles.
7. 1. Program - Design a form with various input fields.
   2. Program - Implement form validation and error handling.

---

8. 1. Program - Add animations to UI elements using Flutter's animation framework.
   2. Program - Experiment with different types of animations. (fade, slide, etc.)
9. 1. Program - Fetch data from a REST API.
   2. Program - Display the fetched data in a meaningful way in the UI.
10. 1. Program - Write unit tests for UI components.
    2. Program - Use Flutter's debugging tools to identify and fix issues.

Course Outcomes

The Student will be able to:

• Implements Flutter Widgets und Layouts
• Create Responsive UI Designs and with Navigation in Flutter
• Create custom widgets for specific Ul elements and also Apply styling using themes and custom styles
• Design a form with various input fields, along with validation and errors halting
• Fetch data and write code fur unit Test for Ut components and also animation

Note

Do not take the below Text Book as a mandatory requirement. You can always refer to the official Flutter and Dart documentation for learning.

TEXT BOOK:

1. Beginning Flutter: A Hands-On Guide to App Development by Marco L. Napoli

Tip

You can refer to the following resources for additional learning:

• Flutter CODE LABS from Google
• Flutter Documentation
• Dart Documentation
• Learn Flutter
• Material3 Design
• Material3 and Flutter

License

This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. For more details, see the LICENSE file.