Get Animated With Flutter

Get Animated With Flutter

Flutter is a mobile SDK from Google for building native Android and iOS apps from a single codebase. It promises performant (60fps) user experiences, reactive UI updates and a fully-customizable open-source software stack.

In this talk, we'll explore how developers can craft expressive and custom experiences using Flutter Animations. We'll start with an introduction to Flutter and how it achieves performant rendering. Then we'll look at the Flutter animation framework, covering basic concepts, animation types and common patterns.

We'll walk through code for adding existing animations to a Flutter widget, and explore the process for creating custom animations. We'll conclude with a look at examples of Flutter animations in use today, and review resources for self-directed exploration of this space.

5b392dc79d5b6d1dab580bf60e26fb7c?s=128

Nitya Narasimhan, PhD

August 28, 2018
Tweet

Transcript

  1. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI #DCNYC18 Nitya Narasimhan DroidCon NYC Aug 28, 2018 https://dcnyc18.flutter.fyi Credit: Unsplash Get Animated With Flutter
  2. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Get Animated With Flutter | DCNYC18 Credit: Unsplash PhD & Research. Distributed, Ubiquitous Computing, 11+ patents Developer & Educator. Mobile & Web Apps, Machine Learning Community & Conference Organizer. GDG NYC, DevFestNYC Google Developer Expert. Flutter / Web About Me
  3. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Get Animated With Flutter | DCNYC18 Why use motion? Intro to Flutter Animations in Flutter
  4. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Understanding Motion Motion makes a UI expressive and easy to use Credit: https://material.io/design/motion
  5. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Informative Motion Show relationships between objects onscreen (e.g., shared transitions)
  6. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Credit: https://material.io/design/motion Focused Motion Draw attention to relevant event or information (e.g., animated lists)
  7. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Credit: https://material.io/design/motion Expressive Motion Celebrate moments or user journeys with personality (e.g., custom animations)
  8. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Transitions What should you animate? Static Does not transform Persistent Transforms, but is onscreen throughout Incoming Appears / Fades in Outgoing Disappears / Fades out https://material.io/design/motion/#transition-anatomy
  9. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Tweening seamless progression of changes Fading tweening applied to opacity Shared Transformation synchronized movements for continuity https://material.io/design/motion/#expressing-continuity Continuity Can you make it seamless?
  10. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Duration how long should the transition last? Easing how should acceleration change over time? Decelerate (in), Accelerate (out) or Standard + More ... Choreography Customization https://material.io/design/motion/speed.html#controlling-speed Speed How long? How fast? etc.
  11. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Get Animated With Flutter | DCNYC18 Why use motion? Intro to Flutter Animations in Flutter
  12. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Building mobile apps is hard ✓ Performance ✓ Reach ✓ Cost Pure Native Pure Web Hybrid Options
  13. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Get Animated With Flutter | DCNYC18 PhoneGap, Titanium, .. Android iOS React Native COMPILED INTERPRETED MV-* REACTIVE Bridges have tolls Where Flutter fits in.. Request/Response Data Models Publish/Subscribe Event Streams
  14. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    https://flutter.io Currently Release Preview 1 ✓ Open Source, Google ✓ Reactive UI framework ✓ Mobile multi-platform (native Android + iOS apps) ✓ Unified codebase (Dart programming) ✓ Performant UX (AOT compilation, 60fps render) ✓ High Velocity DX (JIT compilation, stateful hot reload)
  15. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Build beautiful apps in record time Beautiful Apps Performant User Experience Record Time High Velocity Developer Experience
  16. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Fast, smooth transitions. Custom shapes, paths Performant render (60fps) Beautiful Apps Performant UX Flutter Gallery Demo
  17. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Record Time

    High Velocity DX Hot Reload Demo
  18. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Record Time

    High Velocity Layered Arch. Engine (C++) Framework (Dart) Material Cupertino Widgets Rendering Animation Painting Gestures Foundation Skia Dart Text
  19. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Everything’s A

    Widget! StatelessWidgets are immutable => no state changes means no triggering of UI refresh here StatefulWidgets have persistent State object => widgets are immutable but changing their state can trigger UI refresh An “App” is simply a tree of widgets
  20. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 (created) initState

    dispose (dirty) build (clean) didUpdateWidget setState (defunct) ... it receives a new configuration … it changes its internal state A State<T> object can rebuild if ...
  21. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Get Animated With Flutter | DCNYC18 Why use motion? Intro to Flutter Animations in Flutter
  22. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Animation Concepts How do animations work?
  23. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Animation Types

    in Flutter Types Tween-Based Animations Physics-Based 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. Linear Curve Fling Spring
  24. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Tween-Based Animations

    / Default Types Duration of Animation Value of Animation Upper Bound Value Lower Bound Value Linear Animation Dismissed Completed Forward Reverse
  25. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Tween-Based Animations

    / Curve Types Duration of Animation Value of Animation Upper Bound Value Lower Bound Value Non-Linear Animation
  26. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Common Animation

    Curves Types https://docs.flutter.io/flutter/animation/Curves-class.html
  27. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Animation Concepts What are the key animation classes?
  28. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Animation<T> AnimationController

    Duration TickerProvider AnimationStatus Tween CurveTween CurvedAnimation Animatable<T> Animation<double> Animatable<double> Animation<double> Curve Core Animation Classes Manages State Manages Process Interpolates Value (Over Range) Transforms Value (Over Time) Listenable
  29. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Animation <T>

    • Value of type T • Status of type AnimationStatus ◦ dismissed, completed, forward, reverse • Is Listenable ◦ add/remove value listeners ◦ add/remove status listeners ◦ calls listeners prior to ‘rebuild’
  30. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 AnimationController •

    Duration defines length of animation • TickerProvider sends ticks per frame render • Is Animation<double> ◦ Has default value range [0.0 to 1.0] ◦ Has default linear progression • Does all the work .. {play, pause, stop, reverse seek} animations, set {upper, lower} bounds that impact status fling, animateWith a simulation, animateTo a value
  31. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Tween<T> •

    Linear Interpolation of value Defined by {T begin, T end} • Can transform value type {0.0 ⇒ 1.0} tweened into {Color.red ⇒ Color.blue} Animation<Color> _animation = new Tween<Color>( begin: Colors.black, end: Colors.yellow, ).animate(_controller); Multiple tweens can be chained for one animation
  32. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Curve •

    Non-linear transform of value Defined by {Curves.x} • Maintain base value range Must map t=0.0 to 0.0, and t=1.0 to 1.0 • Create custom curves Override double transform(double t) method AlignmentGeometryTween AlignmentTween BorderRadiusTween BoxConstraintsTween ColorTween DecorationTween EdgeInsetsGeometryTween EdgeInsetsTween FractionalOffsetTween IntTween MaterialPointArcTween Matrix4Tween RectTween RelativeRectTween ReverseTween ShapeBorderTween SizeTween StepTween TextStyleTween ThemeDataTween
  33. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 CurvedAnimation Apply

    non-linear function to the default linear animation AnimationController controller = new AnimationController( value: 0.0, duration: const Duration(milliseconds: 2000), vsync: this, ); Animation<double> animation = new CurvedAnimation( parent: controller, curve: Curves.bounceIn );
  34. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 CurveTween &

    Chaining But what if you wanted a non-linear transform and you wanted values interpolated (range) or typed differently? Animation<Color> anim = ColorTween( begin: Colors.black, end: Colors.yellow, ).chain( CurveTween( curve: Curves.bounceIn ) ).animate(controller);
  35. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Animation<T> AnimationController

    Duration TickerProvider AnimationStatus Tween CurveTween CurvedAnimation Animatable<T> Animation<double> Animatable<double> Animation<double> Curve Core Animation Classes Recap Manages State Manages Process Interpolates Value (Over Range) Defines Value (Over Time) Listenable
  36. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Animation In Practice Let’s walk through basic examples in code
  37. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Live Demos

    Hot Reload Image Basic Animation Tween Curve Tween <Color> Chaining ...
  38. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Live Demos

    Hot Reload Image Basic Animation Tween Curve Tween <Color> Chaining ...
  39. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Animation Patterns Commonly used animations and their Flutter implementation
  40. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Draw attention to insertion or removal of item from list Animated List (Focused Motion)
  41. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Hero Animation - “flies” from old screen to new one, adds continuity SharedElement Transition (Informative Motion)
  42. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Single controller and multiple animations. Sequential or overlapping. Staggered Animation (Co-ordinated multiple)
  43. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 @nitya #FlutterFYI

    Get Animated With Flutter | DCNYC18 Resources Nitya Narasimhan | https://nityan.me | @nitya | Get Animated With Flutter | DroidCon NYC • Flutter Doc: Animations | Tutorial | Samples • Building Native Mobile Apps With Flutter | Udacity • Dart & Flutter: Complete Developer’s Guide: Udemy • GitHub Repos: Animations 201, Awesome Flutter • FlutterFYI: Twitter | Events | People • Codelabs: Google Developers
  44. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 https://studyjams.flutter.camp Motion

    makes a UI expressive and easy to use Credit: https://studyjams.flutter.camp Kickoff Sep 10 @Google NYC Showcase Oct 1 @Google Chelsea Slack flutter-camp.slack.com Udacity Content Community Mentors
  45. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Thank You!

    Twitter | @nitya @flutterfyi Discussion | #flutterfyi Slides | dcnyc18.flutter.fyi Nitya Narasimhan | https://nityan.me | @nitya | Get Animated With Flutter | DroidCon NYC Credit: DroidConNYC / DroidConSF / @ashleymacnamara
  46. @nitya #FlutterFYI Get Animated With Flutter | DCNYC18 Image Credit:

    Noun Project Nitya Narasimhan | https://nityan.me Android Summit Keynote | Aug 17, 2018 It Takes A Village.. Emojis from Emojipedia Art from Unsplash, Nitya Fonts from Google Fonts Icons from NounProject (Pro) Additional attributions in notes, slides