diff --git a/animations/README.md b/animations/README.md index fdc981017..5bfed00d6 100644 --- a/animations/README.md +++ b/animations/README.md @@ -23,7 +23,6 @@ Building blocks and patterns 6. **CustomTweenDemo** Demonstrates how to extend `Tween`. 7. **TweenSequenceDemo** Demonstrates how to use `TweenSequence` to build a button that changes between different colors. -8. **AnimatedList** Demonstrates how to use `AnimatedList` ### Misc @@ -39,6 +38,8 @@ it using a `PageRouteBuilder`. spring simulation. - **CardSwipeDemo** A swipeable card that demonstrates how to use gesture detection to drive an animation. +- **AnimatedList** Demonstrates how to use `AnimatedList` +- **HeroAnimationDemo** Demonstrates how to use `Hero` animation. ## Other Resources diff --git a/animations/lib/main.dart b/animations/lib/main.dart index aface2c8a..8691e12ff 100644 --- a/animations/lib/main.dart +++ b/animations/lib/main.dart @@ -11,6 +11,7 @@ import 'src/basics/04_tweens.dart'; import 'src/basics/05_animated_builder.dart'; import 'src/basics/06_custom_tween.dart'; import 'src/basics/07_tween_sequence.dart'; +import 'src/misc/hero_animation.dart'; import 'src/misc/animated_list.dart'; import 'src/misc/card_swipe.dart'; import 'src/misc/carousel.dart'; @@ -89,6 +90,10 @@ final miscDemos = [ name: 'AnimatedList', route: AnimatedListDemo.routeName, builder: (context) => AnimatedListDemo()), + Demo( + name: 'Hero Animation', + route: HeroAnimationDemo.routeName, + builder: (context) => HeroAnimationDemo()), ]; final basicDemoRoutes = diff --git a/animations/lib/src/misc/hero_animation.dart b/animations/lib/src/misc/hero_animation.dart new file mode 100644 index 000000000..46b0e1b5f --- /dev/null +++ b/animations/lib/src/misc/hero_animation.dart @@ -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(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(), + ); +}