Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter Theming & Animation

Dhrumil Shah
November 04, 2018

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

Dhrumil Shah

November 04, 2018
Tweet

More Decks by Dhrumil Shah

Other Decks in Programming

Transcript

  1. Theme Widget Kolkata • @required data = ThemeData • @require

    child = Widget • Theme.of(context) • Theme.of(context).copyWith
  2. ThemeData Kolkata • primarySwatch • primaryColor • accentColor • bottomAppBarColor

    • dividerColor • buttonTheme • textTheme • iconTheme • tabBarTheme • ...
  3. 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.
  4. Tween-Based Animations / Default Type Kolkata Duration of Animation Value

    of Animation Upper Bound Value Lower Bound Value Linear Animation Completed Forward
  5. Tween-Based Animations / Curve Type Kolkata Duration of Animation Value

    of Animation Upper Bound Value Lower Bound Value non-Linear Animation Dismissed Completed
  6. 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
  7. Animation Kolkata • Animation Status • Animation Value • AddListener

    • AddStatusListener • AnimateTo-AnimateWith-Fling • Duration and Value
  8. 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
  9. References Kolkata • Flutter.ioc - Theme & Animation • Getting

    Animated from with Fluttter - @nitya • Animating Flutter - @raoufrahiche • Flutter Animation: motion awakens - @jansariparth