[animations] new animation sample: Hero Animation Demo (#364)

pull/386/head
Jaideep Prasad 6 years ago committed by GitHub
parent a165fb98ad
commit b1a4a24f64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -23,7 +23,6 @@ Building blocks and patterns
6. **CustomTweenDemo** Demonstrates how to extend `Tween`. 6. **CustomTweenDemo** Demonstrates how to extend `Tween`.
7. **TweenSequenceDemo** Demonstrates how to use `TweenSequence` to build a 7. **TweenSequenceDemo** Demonstrates how to use `TweenSequence` to build a
button that changes between different colors. button that changes between different colors.
8. **AnimatedList** Demonstrates how to use `AnimatedList`
### Misc ### Misc
@ -39,6 +38,8 @@ it using a `PageRouteBuilder`.
spring simulation. spring simulation.
- **CardSwipeDemo** A swipeable card that demonstrates how to use gesture - **CardSwipeDemo** A swipeable card that demonstrates how to use gesture
detection to drive an animation. detection to drive an animation.
- **AnimatedList** Demonstrates how to use `AnimatedList`
- **HeroAnimationDemo** Demonstrates how to use `Hero` animation.
## Other Resources ## Other Resources

@ -11,6 +11,7 @@ import 'src/basics/04_tweens.dart';
import 'src/basics/05_animated_builder.dart'; import 'src/basics/05_animated_builder.dart';
import 'src/basics/06_custom_tween.dart'; import 'src/basics/06_custom_tween.dart';
import 'src/basics/07_tween_sequence.dart'; import 'src/basics/07_tween_sequence.dart';
import 'src/misc/hero_animation.dart';
import 'src/misc/animated_list.dart'; import 'src/misc/animated_list.dart';
import 'src/misc/card_swipe.dart'; import 'src/misc/card_swipe.dart';
import 'src/misc/carousel.dart'; import 'src/misc/carousel.dart';
@ -89,6 +90,10 @@ final miscDemos = [
name: 'AnimatedList', name: 'AnimatedList',
route: AnimatedListDemo.routeName, route: AnimatedListDemo.routeName,
builder: (context) => AnimatedListDemo()), builder: (context) => AnimatedListDemo()),
Demo(
name: 'Hero Animation',
route: HeroAnimationDemo.routeName,
builder: (context) => HeroAnimationDemo()),
]; ];
final basicDemoRoutes = final basicDemoRoutes =

@ -0,0 +1,60 @@
// Copyright 2019 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
class HeroAnimationDemo extends StatelessWidget {
static const String routeName = '/misc/hero_animation';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: GestureDetector(
child: Hero(
tag: 'hero-page-child',
child: _createHeroContainer(
size: 50.0,
color: Colors.grey[300],
),
),
onTap: () => Navigator.of(context)
.push<void>(MaterialPageRoute(builder: (context) => HeroPage())),
),
);
}
}
class HeroPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlue,
appBar: AppBar(),
body: Center(
child: Hero(
tag: 'hero-page-child',
child: _createHeroContainer(
size: 100.0,
color: Colors.white,
),
),
),
);
}
}
StatelessWidget _createHeroContainer({double size, Color color}) {
return Container(
height: size,
width: size,
padding: EdgeInsets.all(10.0),
margin: size < 100.0 ? EdgeInsets.all(10.0) : EdgeInsets.all(0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
),
child: FlutterLogo(),
);
}
Loading…
Cancel
Save