Flutter Motion Transitions
A fultter app to demonstrate Material motion system.
Material Motion System
The four main Material transition patterns are as follows:
Transitions between UI elements that include a container; creates a visible connection between two distinct UI elements by seamlessly transforming one element into another.
Transitions between UI elements that have a spatial or navigational relationship; uses a shared transformation on the x, y, or z axis to reinforce the relationship between elements.
Transitions between UI elements that do not have a strong relationship to each other; uses a sequential fade out and fade in, with a scale of the incoming element.
Used for UI elements that enter or exit within the bounds of the screen.
Show a dummy list of messages in Home page.
Implement an animated bottom app bar.
- Change app’s theme dynamically from settings bottom sheet.
- Change app’s animation speed from settings.
- Implement bottom drawer menu.
|Container Transform transition (List to detail page)|
|Container Transform transition from FAB to create page|
|Shared Z-Axis transition from search icon to search page|
|Fade through transition|
UI is inspired from Reply App