mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 22:09:06 +00:00
[animations] new animation sample: Hero Animation Demo (#364)
This commit is contained in:
@@ -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 =
|
||||||
|
|||||||
60
animations/lib/src/misc/hero_animation.dart
Normal file
60
animations/lib/src/misc/hero_animation.dart
Normal file
@@ -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(),
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user