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.

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