Course Details
Duration: 4 days /28 hours; Instructor-led/ remote online training
Audience
This program is suitable for employees of all level including Front liners, Line Leaders, and Supervisors from all Departments.
Prerequisites
Knowledge of a programming language is recommended
Methodology
This program will be conducted with interactive lectures, PowerPoint presentation, discussion, and practical exercise.
Course Objectives
Upon completion of this program, participants should be able to:
- Create a reasonably complex Flutter application, using widgets, packages, icons, interactivity, navigation, themes, Material design, animations and themes.
Outlines
Module 1: A Dart tour
- Hello World
- Variables
- Control flow statements
- Functions
- Comments
- Imports
- Classes
- Inheritance
- Mixins
- Interfaces and abstract classes
- Async
- Exceptions
Module 2: Write your first Flutter app, part 1
- Create the starter Flutter app
- Use an external package
- Add a stateful widget
- Create an infinite scrolling ListView
Module 3: Write your first Flutter app, part 2
- Add icons to the list
- Add interactivity
- Navigate to a new screen
- Change the UI using themes
Module 4: Basic Flutter Layout concepts
- Row and column classes
- Axis size and alignment
- Flexible widget
- Expanded widget
- Sizedbox widget
- Spacer widget
- Text widget
- Icon widget
- Image widget
- Putting it all together
Module 5: Material components basics
- Introduction
- Add Textfield widgets
- Add buttons
Module 6: Material structure and layout
- Introduction
- Add a top app bar
- Add a card in a grid
- Make a card collection
Module 7: Material Theming with Color, Shape, Elevation, and Type
- Introduction
- Change the colors
- Modify typography and label styles
- Adjust elevation
- Add Shape
- Change the layout
- Try another theme
Module 8: Material advanced components
- Add the backdrop menu
- Add a shape
- Add motion
- Add a menu on the back layer
- Add a branded icon
Module 9: Implicit animations
- What are implicit animations?
- Example: Fade in text effects
- Example: Shape-shifting effect
- Using animation curves
Module 10: Building Beautiful Transitions with Material Motion for Flutter
- Get familiar with the sample app code
- Add Container Transform transition from email list to email detail page
- Add Container Transform transition from FAB to compose email page
- Add Shared Z-Axis transition from search icon to search view page
- Add Fade Through transition between mailbox pages
- Add Fade Through transition between compose and reply FAB
- Add Fade Through transition between disappearing mailbox title
- Add Fade Through transition between bottom app bar actions
