mirror of
https://github.com/flutter/samples.git
synced 2026-04-04 02:32:25 +00:00
address code review comments
This commit is contained in:
@@ -1,12 +1,31 @@
|
|||||||
# Animation Samples
|
# Animation Samples
|
||||||
Sample apps that showcasing Flutter's animation features
|
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**
|
**AnimationControllerDemo**
|
||||||
Demonstrates how to use an `AnimationController`.
|
Demonstrates how to use an `AnimationController`.
|
||||||
|
|
||||||
|
### Misc
|
||||||
|
|
||||||
## Misc
|
Other uses-cases and examples
|
||||||
**ExpandCard**
|
|
||||||
|
**ExpandCardDemo**
|
||||||
Demonstrates how to use `AnimatedCrossFade` to fade between two widgets and
|
Demonstrates how to use `AnimatedCrossFade` to fade between two widgets and
|
||||||
change the size.
|
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)
|
||||||
|
|||||||
@@ -2,40 +2,39 @@ import 'package:flutter/material.dart';
|
|||||||
import 'src/basics/animation_controller_demo.dart';
|
import 'src/basics/animation_controller_demo.dart';
|
||||||
import 'src/misc/expand_card.dart';
|
import 'src/misc/expand_card.dart';
|
||||||
|
|
||||||
void main() => runApp(AnimationsSamples());
|
void main() => runApp(AnimationSamples());
|
||||||
|
|
||||||
class Demo {
|
class Demo {
|
||||||
final String name;
|
final String name;
|
||||||
final String route;
|
final String route;
|
||||||
final WidgetBuilder builder;
|
final WidgetBuilder builder;
|
||||||
|
|
||||||
Demo(this.name, this.route, this.builder);
|
const Demo(this.name, this.route, this.builder);
|
||||||
}
|
}
|
||||||
|
|
||||||
List<Demo> basicDemos = [
|
final basicDemos = [
|
||||||
Demo('Animation Controller', AnimationControllerDemo.routeName,
|
Demo('Animation Controller', AnimationControllerDemo.routeName,
|
||||||
(context) => AnimationControllerDemo()),
|
(context) => AnimationControllerDemo()),
|
||||||
];
|
];
|
||||||
|
|
||||||
List<Demo> miscDemos = [
|
final miscDemos = [
|
||||||
Demo('Expandable Card', ExpandCardDemo.routeName,
|
Demo('Expandable Card', ExpandCardDemo.routeName,
|
||||||
(context) => ExpandCardDemo()),
|
(context) => ExpandCardDemo()),
|
||||||
];
|
];
|
||||||
|
|
||||||
Map<String, WidgetBuilder> basicDemoRoutes = Map.fromEntries(
|
final basicDemoRoutes =
|
||||||
basicDemos.map((d) => MapEntry(d.route, d.builder)));
|
Map.fromEntries(basicDemos.map((d) => MapEntry(d.route, d.builder)));
|
||||||
|
|
||||||
Map<String, WidgetBuilder> miscDemoRoutes = Map.fromEntries(
|
final miscDemoRoutes =
|
||||||
miscDemos.map((d) => MapEntry(d.route, d.builder)));
|
Map.fromEntries(miscDemos.map((d) => MapEntry(d.route, d.builder)));
|
||||||
|
|
||||||
Map<String, WidgetBuilder> allRoutes = <String, WidgetBuilder>{
|
final allRoutes = <String, WidgetBuilder>{
|
||||||
...basicDemoRoutes,
|
...basicDemoRoutes,
|
||||||
...miscDemoRoutes,
|
...miscDemoRoutes,
|
||||||
};
|
};
|
||||||
|
|
||||||
class AnimationsSamples extends StatelessWidget {
|
class AnimationSamples extends StatelessWidget {
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
|
||||||
return MaterialApp(
|
return MaterialApp(
|
||||||
title: 'Animations Samples',
|
title: 'Animations Samples',
|
||||||
theme: ThemeData(
|
theme: ThemeData(
|
||||||
@@ -48,19 +47,19 @@ class AnimationsSamples extends StatelessWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class HomePage extends StatelessWidget {
|
class HomePage extends StatelessWidget {
|
||||||
final TextStyle _headerStyle =
|
|
||||||
TextStyle(fontWeight: FontWeight.bold, fontSize: 24);
|
|
||||||
|
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
final headerStyle =
|
||||||
|
Theme.of(context).textTheme.title;
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
title: Text('Animation Examples'),
|
title: Text('Animation Examples'),
|
||||||
),
|
),
|
||||||
body: ListView(
|
body: ListView(
|
||||||
children: <Widget>[
|
children: [
|
||||||
ListTile(title: Text('Basics', style: _headerStyle)),
|
ListTile(title: Text('Basics', style: headerStyle)),
|
||||||
...basicDemos.map((d) => DemoTile(d)),
|
...basicDemos.map((d) => DemoTile(d)),
|
||||||
ListTile(title: Text('Misc', style: _headerStyle)),
|
ListTile(title: Text('Misc', style: headerStyle)),
|
||||||
...miscDemos.map((d) => DemoTile(d)),
|
...miscDemos.map((d) => DemoTile(d)),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -33,18 +33,16 @@ class _AnimationControllerDemoState extends State<AnimationControllerDemo>
|
|||||||
body: Center(
|
body: Center(
|
||||||
child: Column(
|
child: Column(
|
||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize: MainAxisSize.min,
|
||||||
children: <Widget>[
|
children: [
|
||||||
ConstrainedBox(
|
ConstrainedBox(
|
||||||
constraints: BoxConstraints(maxWidth: 200),
|
constraints: BoxConstraints(maxWidth: 200),
|
||||||
child: Text('${controller.value.toStringAsFixed(2)}',
|
|
||||||
style: TextStyle(fontSize: 24)),
|
|
||||||
),
|
|
||||||
MaterialButton(
|
|
||||||
color: Theme.of(context).primaryColor,
|
|
||||||
child: Text(
|
child: Text(
|
||||||
'animate',
|
'${controller.value.toStringAsFixed(2)}',
|
||||||
style: TextStyle(color: Colors.white),
|
style: Theme.of(context).textTheme.display3,
|
||||||
),
|
),
|
||||||
|
),
|
||||||
|
RaisedButton(
|
||||||
|
child: Text('animate'),
|
||||||
onPressed: () {
|
onPressed: () {
|
||||||
if (controller.status == AnimationStatus.completed) {
|
if (controller.status == AnimationStatus.completed) {
|
||||||
controller.reverse();
|
controller.reverse();
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
class ExpandCardDemo extends StatelessWidget {
|
class ExpandCardDemo extends StatelessWidget {
|
||||||
static String routeName = '/expand_card';
|
static const String routeName = '/expand_card';
|
||||||
|
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
@@ -24,10 +24,6 @@ class _ExpandCardState extends State<ExpandCard>
|
|||||||
|
|
||||||
double get size => expanded ? 200 : 100;
|
double get size => expanded ? 200 : 100;
|
||||||
|
|
||||||
void initState() {
|
|
||||||
super.initState();
|
|
||||||
}
|
|
||||||
|
|
||||||
void toggleExpanded() {
|
void toggleExpanded() {
|
||||||
setState(() {
|
setState(() {
|
||||||
expanded = !expanded;
|
expanded = !expanded;
|
||||||
|
|||||||
Reference in New Issue
Block a user