Flutter Theming & Animation

A talk on Flutter with Theme & Animation, in which you can find how Flutter supports theming and animation from the box itself and how simple it is.

Theme introduction and implementation and Animation understanding and standard widget were discussed.

Talk delivered at DevFest Kolkata 2018
Google Slides with Animation & Gif: https://goo.gl/jGWJMK

Transcript

1. Dhrumil Shah, Shipmnts & GDG Ahmedabad @dhuma1981 Kolkata Flutter: Theming & Animation
2. Dhrumil Shah Mobile Developer, @Shipmnts Co-organizer, @GDGAhmedabad Founder, @Flutter_Flakes
4. “Everything is Widget”
5. Theme is also a widget
6. Theme Widget Kolkata • @required data = ThemeData • @require child = Widget • Theme.of(context) • Theme.of(context).copyWith
7. ThemeData Kolkata • primarySwatch • primaryColor • accentColor • bottomAppBarColor • dividerColor • buttonTheme • textTheme • iconTheme • tabBarTheme • ...
8. Theme Demo App
17. Let’s edit Theme • Make everything with RED
18. Let’s edit FAB Theme • Using Theme Widget • Using Theme.of(context).copyWith()
19. Let’s edit Body Theme • Using Theme Widget • Using Theme.of(context).copyWith()
21. Let’s understand Animation
22. Feedback Status User education
23. Types of Animation Kolkata Tween-Based Animations Physics-Base d Animations models path between points A & B by a transform T based on range & timing models real-world behaviors like velocity, mass, friction, momentum etc.
24. Tween-Based Animations / Default Type Kolkata Duration of Animation Value of Animation Upper Bound Value Lower Bound Value Linear Animation Completed Forward
25. Tween-Based Animations / Curve Type Kolkata Duration of Animation Value of Animation Upper Bound Value Lower Bound Value non-Linear Animation Dismissed Completed
26. Different Curve Types Kolkata
27. How animation works?
28. Build Layout Paint Animate Tick animations to change widget state Rebuild widgets to account for state changes Update size and position of render objects Vsync GPU Record display lists for composited layers Layer Tree
29. Key Animation classes
30. AnimationController Kolkata • An animation itself • Play-Stop-Reverse-Repeat-Reset-Resume • AnimateTo-AnimateWith-Fling • Duration and Value
31. Animation Kolkata • Animation Status • Animation Value • AddListener • AddStatusListener • AnimateTo-AnimateWith-Fling • Duration and Value
32. ImplicitlyAnimatedWidget Kolkata • No Animation object needed • Automatically interpolate and animate • You can change the Curve and Duration • AnimatedAlign • AnimatedContainer • AnimatedDefaultTextStyle • AnimatedOpacity • AnimatedPadding • AnimatedPhysicalModel • AnimatedPositioned • AnimatedPositionedDirectional • AnimatedTheme
33. Some Examples Kolkata
34. And some more Kolkata
36. And That’s it
38. References Kolkata • Flutter.ioc - Theme & Animation • Getting Animated from with Fluttter - @nitya • Animating Flutter - @raoufrahiche • Flutter Animation: motion awakens - @jansariparth
39. Dhrumil Shah, Shipmnts & GDG Ahmedabad @dhuma1981 Kolkata Thank you!