diff --git a/animations/README.md b/animations/README.md index aa69b1e80..f5bbb77ca 100644 --- a/animations/README.md +++ b/animations/README.md @@ -1,12 +1,31 @@ # Animation Samples Sample apps that showcasing Flutter's animation features -## Basics +## Goals + +- Demonstrate the building blocks for animations and how they work together +- Provide samples for common patterns and use-cases + +## Samples + +### Basics + +Building blocks and patterns + **AnimationControllerDemo** Demonstrates how to use an `AnimationController`. +### Misc + +Other uses-cases and examples -## Misc -**ExpandCard** +**ExpandCardDemo** Demonstrates how to use `AnimatedCrossFade` to fade between two widgets and change the size. + +## Other Resources + +- [Introduction to animations](https://flutter.dev/docs/development/ui/animations) +- [Animation widgets](https://flutter.dev/docs/development/ui/widgets/animation) +- [Flutter cookbook - Animations](https://flutter.dev/docs/cookbook/animation) +- [Animations tutorial](https://flutter.dev/docs/development/ui/animations/tutorial) diff --git a/animations/lib/main.dart b/animations/lib/main.dart index 527fa877e..06b9a174e 100644 --- a/animations/lib/main.dart +++ b/animations/lib/main.dart @@ -2,40 +2,39 @@ import 'package:flutter/material.dart'; import 'src/basics/animation_controller_demo.dart'; import 'src/misc/expand_card.dart'; -void main() => runApp(AnimationsSamples()); +void main() => runApp(AnimationSamples()); class Demo { final String name; final String route; final WidgetBuilder builder; - Demo(this.name, this.route, this.builder); + const Demo(this.name, this.route, this.builder); } -List basicDemos = [ +final basicDemos = [ Demo('Animation Controller', AnimationControllerDemo.routeName, (context) => AnimationControllerDemo()), ]; -List miscDemos = [ +final miscDemos = [ Demo('Expandable Card', ExpandCardDemo.routeName, (context) => ExpandCardDemo()), ]; -Map basicDemoRoutes = Map.fromEntries( - basicDemos.map((d) => MapEntry(d.route, d.builder))); +final basicDemoRoutes = + Map.fromEntries(basicDemos.map((d) => MapEntry(d.route, d.builder))); -Map miscDemoRoutes = Map.fromEntries( - miscDemos.map((d) => MapEntry(d.route, d.builder))); +final miscDemoRoutes = + Map.fromEntries(miscDemos.map((d) => MapEntry(d.route, d.builder))); -Map allRoutes = { +final allRoutes = { ...basicDemoRoutes, ...miscDemoRoutes, }; -class AnimationsSamples extends StatelessWidget { +class AnimationSamples extends StatelessWidget { Widget build(BuildContext context) { - return MaterialApp( title: 'Animations Samples', theme: ThemeData( @@ -48,19 +47,19 @@ class AnimationsSamples extends StatelessWidget { } class HomePage extends StatelessWidget { - final TextStyle _headerStyle = - TextStyle(fontWeight: FontWeight.bold, fontSize: 24); Widget build(BuildContext context) { + final headerStyle = + Theme.of(context).textTheme.title; return Scaffold( appBar: AppBar( title: Text('Animation Examples'), ), body: ListView( - children: [ - ListTile(title: Text('Basics', style: _headerStyle)), + children: [ + ListTile(title: Text('Basics', style: headerStyle)), ...basicDemos.map((d) => DemoTile(d)), - ListTile(title: Text('Misc', style: _headerStyle)), + ListTile(title: Text('Misc', style: headerStyle)), ...miscDemos.map((d) => DemoTile(d)), ], ), diff --git a/animations/lib/src/basics/animation_controller_demo.dart b/animations/lib/src/basics/animation_controller_demo.dart index 58411e1eb..a6440492b 100644 --- a/animations/lib/src/basics/animation_controller_demo.dart +++ b/animations/lib/src/basics/animation_controller_demo.dart @@ -33,18 +33,16 @@ class _AnimationControllerDemoState extends State body: Center( child: Column( mainAxisSize: MainAxisSize.min, - children: [ + children: [ ConstrainedBox( constraints: BoxConstraints(maxWidth: 200), - child: Text('${controller.value.toStringAsFixed(2)}', - style: TextStyle(fontSize: 24)), - ), - MaterialButton( - color: Theme.of(context).primaryColor, child: Text( - 'animate', - style: TextStyle(color: Colors.white), + '${controller.value.toStringAsFixed(2)}', + style: Theme.of(context).textTheme.display3, ), + ), + RaisedButton( + child: Text('animate'), onPressed: () { if (controller.status == AnimationStatus.completed) { controller.reverse(); diff --git a/animations/lib/src/misc/expand_card.dart b/animations/lib/src/misc/expand_card.dart index 8278a454c..d86739813 100644 --- a/animations/lib/src/misc/expand_card.dart +++ b/animations/lib/src/misc/expand_card.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; class ExpandCardDemo extends StatelessWidget { - static String routeName = '/expand_card'; + static const String routeName = '/expand_card'; Widget build(BuildContext context) { return Scaffold( @@ -24,10 +24,6 @@ class _ExpandCardState extends State double get size => expanded ? 200 : 100; - void initState() { - super.initState(); - } - void toggleExpanded() { setState(() { expanded = !expanded;