1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Flutter code sample for Hero
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
void main() {
// Slow down time to see Hero flight animation.
timeDilation = 15.0;
runApp(const HeroApp());
}
class HeroApp extends StatelessWidget {
const HeroApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HeroExample(),
);
}
}
class HeroExample extends StatelessWidget {
const HeroExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Hero Sample')),
body: Column(
children: <Widget>[
ListTile(
leading: Hero(
tag: 'hero-default-tween',
child: BoxWidget(
size: const Size(50.0, 50.0),
color:Colors.red[700]!.withOpacity(0.5),
),
),
title: const Text(
'This red icon will use a default rect tween during the hero flight.',
),
),
const SizedBox(height: 10.0),
ListTile(
leading: Hero(
tag: 'hero-custom-tween',
createRectTween: (Rect? begin, Rect? end) {
return MaterialRectCenterArcTween(begin: begin, end: end);
},
child: BoxWidget(
size: const Size(50.0, 50.0),
color:Colors.blue[700]!.withOpacity(0.5),
),
),
title: const Text(
'This blue icon will use a custom rect tween during the hero flight.',
),
),
const SizedBox(height: 10),
ElevatedButton(
onPressed: () => _gotoDetailsPage(context),
child: const Text('Tap to trigger hero flight'),
),
],
),
);
}
void _gotoDetailsPage(BuildContext context) {
Navigator.of(context).push(MaterialPageRoute<void>(
builder: (BuildContext context) => Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: Align(
alignment: Alignment.bottomRight,
child: Stack(
children: <Widget>[
Hero(
tag: 'hero-custom-tween',
createRectTween: (Rect? begin, Rect? end) {
return MaterialRectCenterArcTween(begin: begin, end: end);
},
child: BoxWidget(
size: const Size(400.0, 400.0),
color: Colors.blue[700]!.withOpacity(0.5),
),
),
Hero(
tag: 'hero-default-tween',
child: BoxWidget(
size: const Size(400.0, 400.0),
color: Colors.red[700]!.withOpacity(0.5),
),
),
],
),
),
),
));
}
}
class BoxWidget extends StatelessWidget {
const BoxWidget({
super.key,
required this.size,
required this.color,
});
final Size size;
final Color color;
@override
Widget build(BuildContext context) {
return Container(
width: size.width,
height: size.height,
color: color,
);
}
}