Animations in Flutter - FlutterConf LATAM 2024
- 1. John Ryan (he/him) Developer Relations Engineer Flutter and Dart Animations in Flutter How to add animated effects to your app
- 3. Agenda News and updates from the Flutter team Animations in Flutter 01. 02.
- 8. How Universal Destinations & Experiences build next generation experiences with #Flutter on YouTube
- 9. Proprietary + Confidential “By 2025, Flutter will power system apps on tens of millions of LG TVs worldwide.” From the Flutter 3.22 / Dart 3.4 release blog post
- 11. / News Impeller ● A major rewrite of Flutter's graphics engine ● Improves performance by precompiling shaders ● Flutter team is continually improving performance ● Default on Android + iOS in Flutter 3.27
- 12. / News Flutter GPU ● Low level graphics API ● In preview ● Uses impeller Getting started with Flutter GPU - Brandon DeRosier on Medium
- 13. / News WebAssembly 1x 2x 4x Web JS Web Wasm Flutter Native - Android
- 14. / flutter build web --wasm
- 15. / News Multi-view on the web docs.flutter.dev/platform-integration/web/embedding-flutter-web ● Lets you instantiate multiple Flutter views in a single web page ● You can pass initial data to each view
- 16. / News Improved emoji support on the web github.com/flutter/engine/pull/55908 ● Noto color emojis are now available by default ● It's no longer necessary to pass useColorEmoji: true to engineInitializer.initializeEngine
- 18. / News Web renderers ● There are two renderers ○ canvaskit is the default, and is more stable ○ (New) skwasm is faster and uses web workers ● Using the --web-renderer=html flag is now deprecated in Flutter 3.27 ○ See docs.flutter.dev/to/web-html-renderer-deprecation
- 19. / News Macros ● 💿 Operates on code as data ● 📚 Generates augmentation libraries ● 💨 Fast and automatic ● 🔨 IDE / Analyzer support ● 🚧 Under development ● dart.dev/language/macros
- 20. / import 'package:macro_experiment/data_class.dart'; void main() { var joe = User(age: 25, name: 'Joe', username: 'joe1234'); print(joe); } @DataClass() class User { final int age; final String name; final String username; }
- 21. / import 'package:json/json.dart'; void main(List<String> arguments) { var userJson = {'age': 5, 'name': 'Roger', 'username': 'roger1337'}; var user = User.fromJson(userJson); print(user); print(user.toJson()); } @JsonCodable() class User { final int? age; final String name; final String username; }
- 22. / News DevTools ● Inspector V2 ○ Widget attributes ○ Streamlined Widget Tree ● Improved select widget mode UX ● Wasm (enable in settings) ● More exciting features coming soon!
- 23. / News Dart ● Dart 3.6 ○ Digit separators (#2) ● Coming soon ○ Static metaprogramming (#1482) ○ Null aware elements (#323) ○ Wildcard variables (#3712) ○ Primary constructors (#2364) ○ Shorter dot syntax for enums (#357) ● Language funnel ○ https://github.com/orgs/dart-lang/projects/90 Dart 3.6
- 24. / News Flutter on Android ● Impeller ● Predictive back ● Edge-To-Edge
- 26. / Animations Implicit animations ● Subclass of ImplicitlyAnimatedWidget ● Runs an animation automatically whenever the value changes ● TweenAnimationBuilder is a general-purpose version
- 27. / class _MyAnimatedButtonState extends State<MyAnimatedButton> { double scale = 1.0; @override Widget build(BuildContext context) { return AnimatedScale( scale: scale, duration: const Duration(milliseconds: 900), curve: Curves.easeIn, child: TextButton( onPressed: () { setState(() { scale += 1; }); }, child: const Text("Press here"), ), ); } }
- 28. / Animations Tweens ● An object that can interpolate between two values ● Interpolation is a way of guessing the values that occur between other values ● Examples: ColorTween, RectTween, or Tween<T> ● Primary subclass of Animatable<T>, which is "an object that can produce a value of type T given an Animation<double> as input."
- 29. / class _MyHomePageState extends State<MyHomePage> { Color _color = Colors.blue; @override Widget build(BuildContext context) { // .. TweenAnimationBuilder<Color?>( tween: ColorTween(begin: Colors.blue, end: _color), duration: const Duration(seconds: 1), builder: (context, value, child) { return Container( height: 100, width: 100, color: value, ); }, ), // ...
- 30. / Animations Curves ● A function that maps values between 0.0 and 1.0, to a different value between 0.0 and 1.0 ● Use CurveTween.animate(), .chain(), or Animation.drive() to apply a curve to an existing animation A visualization of a Curve from the Curves class in the API documentation
- 31. / Animations Animation class ● Represents a running or stopped animation ● The value is the target value the animation is running to. ● The status is the current value the animation is displaying on screen ● Subclass of Listenable and notifies its listeners when the status changes ● GIve this object to an AnimatedWidget or AnimatedBuilder ● AnimatedSwitcher provides an Animation object in its builder callback
- 32. / // Create an Animation _controller = AnimationController( vsync: this, duration: const Duration(seconds: 2), ); // Create a Tween, which is an Animatable final curve = CurveTween(curve: Curves.easeInOut); // Use chain() to combine two Animatables final chainedCurve = curve.chain(CurveTween(curve: Curves.slowMiddle));
- 33. / // Use chain() to combine two Animatables final chainedCurve = curve.chain(CurveTween(curve: Curves.slowMiddle)); // Option 1: Use Animation.drive() to transform an Animation into another Animation _animation = _controller.drive(chainedCurve); // Option 2: Use Tween.animate() to create an Animation from another Animation _animation = chainedCurve.animate(_controller); // Run the animation _controller.repeat(reverse: true);
- 34. / Animations AnimatedSwitcher ● Animates between the previous widget and the current widget ● The transitionBuilder is a callback with a child widget and an Animation object. ● The child widget is the widget that will be displayed after switching from the previous child. ● Accepts a Curve and Duration ● (Optional) provide a layoutBuilder to customize how the widgets are laid out while animating
- 35. / AnimatedSwitcher( duration: const Duration(milliseconds: 500), transitionBuilder: (Widget child, Animation<double> animation) { return FadeTransition( opacity: animation, child: ScaleTransition(scale: animation, child: child), ); }, child: Text( '$_count', key: ValueKey<int>(_count), style: Theme.of(context).textTheme.headlineMedium, ), ),
- 36. / Animations ● An AnimationController lets you control how an animation runs ● Extends Animation, and hence Listenable ● You can use it it with subclasses of AnimatedWidget, such as AnimatedSize, AnimatedOpacity, etc. ● To configure, add the SingleTickerProviderStateMixin to your State object, and pass this to it's constructor ● Use methods such as forward() animateTo(), etc ● don't forget to dispose! Explicit animations
- 37. / Animations ● Use a PageRouteBuilder ● The pageBuilder parameter returns the widget containing the screen you want to show ● The transitionsBuilder parameter lets you wrap the child widget with an AnimatedWidget. ● The transitionsBuilder has two animations, one representing the incoming animation and one representing the outgoing animation. Navigation transitions
- 38. / ElevatedButton( onPressed: () { // Show the question screen to start the game Navigator.push( context, PageRouteBuilder( pageBuilder: (context, animation, secondaryAnimation) { return const QuestionScreen(); }, transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, ), ); }, child: Text('New Game'), ),
- 39. / Animations ● Supported in Flutter 3.27 stable and Android 14 ● Enable the feature flag for predictive back on the device under "Developer options". (unnecessary on future versions of Android.) ● Set android:enableOnBackInvokedCallback="true" in android/app/src/main/AndroidManifest.xml. If needed, refer to Android's full guide. ● Configure using PredictiveBackPageTransitionsBuilder in your app's PageTransitionsTheme ● Use PopScope instead of WillPopScope ● Learn more: docs.flutter.dev/release/breaking-changes/android-predictive-back Predictive back
- 40. / class MainApp extends StatelessWidget { const MainApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), useMaterial3: true, pageTransitionsTheme: PageTransitionsTheme( builders: { TargetPlatform.android: PredictiveBackPageTransitionsBuilder(), TargetPlatform.iOS: FadeThroughPageTransitionsBuilder(), TargetPlatform.macOS: FadeThroughPageTransitionsBuilder(), TargetPlatform.windows: FadeThroughPageTransitionsBuilder() TargetPlatform.linux: FadeThroughPageTransitionsBuilder(), }, ), ), home: HomeScreen(), );
- 41. / Animations ● PageTransitionSwitcher - an updated version of AnimatedSwitcher that provides an incoming and outgoing Animation object ● FadeThroughTransition - Applies a fade through effect ● OpenContainer Provides a container transform effect package:animations
- 42. / Animations ● New field on ModalRoute that can be overridden ● Let's you coordinate transitions between two routes with different route transitions. ● The topmost route uses this transition to animate itself off the screen, if available delegatedTransition
- 43. / Demo Shader transitions Pre-built shaders: https://gl-transitions.com/
- 44. / ● (New) Animations in Flutter codelab ● Introduction to animations on flutter.dev ● Animation deep dive on Medium ● How to Choose Which Flutter Animation Widget is Right for You? on Medium Animations More resources