flutter motion transitions
a fultter app to demonstrate material motion system.
material motion system
the four main material transition patterns are as follows:
container transform:
transitions between ui elements that include a container; creates a visible connection between two distinct ui elements by seamlessly transforming one element into another.
shared axis:
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.
fade through:
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.
fade:
used for ui elements that enter or exit within the bounds of the screen.
app’s functionality
-
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.
transition animations
| animation name | screenshot |
|---|---|
| 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 |  |
| theme transition |  |
ui is inspired from reply app
