Skip to content

Commit cd6b2a3

Browse files
TahaTesserTahaTesser
authored
Improve Hero examples (#103095)
1 parent 13d76b2 commit cd6b2a3

File tree

2 files changed

+100
-85
lines changed

2 files changed

+100
-85
lines changed

‎examples/api/lib/widgets/heroes/hero.0.dart

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,8 @@ class HeroApp extends StatelessWidget {
1313

1414
@override
1515
Widget build(BuildContext context) {
16-
return MaterialApp(
17-
home: Scaffold(
18-
appBar: AppBar(title: const Text('Hero Sample')),
19-
body: const Center(
20-
child: HeroExample(),
21-
),
22-
),
16+
return const MaterialApp(
17+
home: HeroExample(),
2318
);
2419
}
2520
}
@@ -29,31 +24,24 @@ class HeroExample extends StatelessWidget {
2924

3025
@override
3126
Widget build(BuildContext context) {
32-
return Column(
33-
crossAxisAlignment: CrossAxisAlignment.start,
34-
children: <Widget>[
35-
const SizedBox(
36-
height: 20.0,
37-
),
38-
ListTile(
39-
leading: Hero(
40-
tag: 'hero-rectangle',
41-
child: _box(const Size(50, 50)),
42-
),
43-
onTap: () => _gotoDetailsPage(context),
44-
title: const Text(
45-
'Tap on the icon to view hero animation transition.',
27+
return Scaffold(
28+
appBar: AppBar(title: const Text('Hero Sample')),
29+
body: Column(
30+
crossAxisAlignment: CrossAxisAlignment.start,
31+
children: <Widget>[
32+
const SizedBox(height: 20.0),
33+
ListTile(
34+
leading: const Hero(
35+
tag: 'hero-rectangle',
36+
child: BoxWidget(size: Size(50.0, 50.0)),
37+
),
38+
onTap: () => _gotoDetailsPage(context),
39+
title: const Text(
40+
'Tap on the icon to view hero animation transition.',
41+
),
4642
),
47-
),
48-
],
49-
);
50-
}
51-
52-
Widget _box(Size size) {
53-
return Container(
54-
width: size.width,
55-
height: size.height,
56-
color: Colors.blue,
43+
],
44+
),
5745
);
5846
}
5947

@@ -63,18 +51,28 @@ class HeroExample extends StatelessWidget {
6351
appBar: AppBar(
6452
title: const Text('Second Page'),
6553
),
66-
body: Center(
67-
child: Column(
68-
mainAxisAlignment: MainAxisAlignment.center,
69-
children: <Widget>[
70-
Hero(
71-
tag: 'hero-rectangle',
72-
child: _box(const Size(200, 200)),
73-
),
74-
],
54+
body: const Center(
55+
child: Hero(
56+
tag: 'hero-rectangle',
57+
child: BoxWidget(size: Size(200.0, 200.0)),
7558
),
7659
),
7760
),
7861
));
7962
}
8063
}
64+
65+
class BoxWidget extends StatelessWidget {
66+
const BoxWidget({Key? key, required this.size}) : super(key: key);
67+
68+
final Size size;
69+
70+
@override
71+
Widget build(BuildContext context) {
72+
return Container(
73+
width: size.width,
74+
height: size.height,
75+
color: Colors.blue,
76+
);
77+
}
78+
}

‎examples/api/lib/widgets/heroes/hero.1.dart

Lines changed: 62 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,8 @@ class HeroApp extends StatelessWidget {
1818

1919
@override
2020
Widget build(BuildContext context) {
21-
return MaterialApp(
22-
home: Scaffold(
23-
appBar: AppBar(title: const Text('Hero Sample')),
24-
body: const Center(
25-
child: HeroExample(),
26-
),
27-
),
21+
return const MaterialApp(
22+
home: HeroExample(),
2823
);
2924
}
3025
}
@@ -34,43 +29,45 @@ class HeroExample extends StatelessWidget {
3429

3530
@override
3631
Widget build(BuildContext context) {
37-
return Column(
38-
children: <Widget>[
39-
ListTile(
40-
leading: Hero(
41-
tag: 'hero-default-tween',
42-
child: _box(size: 50.0, color: Colors.red[700]!.withOpacity(0.5)),
43-
),
44-
title: const Text(
45-
'This red icon will use a default rect tween during the hero flight.',
32+
return Scaffold(
33+
appBar: AppBar(title: const Text('Hero Sample')),
34+
body: Column(
35+
children: <Widget>[
36+
ListTile(
37+
leading: Hero(
38+
tag: 'hero-default-tween',
39+
child: BoxWidget(
40+
size: const Size(50.0, 50.0),
41+
color:Colors.red[700]!.withOpacity(0.5),
42+
),
43+
),
44+
title: const Text(
45+
'This red icon will use a default rect tween during the hero flight.',
46+
),
4647
),
47-
),
48-
const SizedBox(height: 10.0),
49-
ListTile(
50-
leading: Hero(
51-
tag: 'hero-custom-tween',
52-
createRectTween: (Rect? begin, Rect? end) {
53-
return MaterialRectCenterArcTween(begin: begin, end: end);
54-
},
55-
child: _box(size: 50.0, color: Colors.blue[700]!.withOpacity(0.5)),
48+
const SizedBox(height: 10.0),
49+
ListTile(
50+
leading: Hero(
51+
tag: 'hero-custom-tween',
52+
createRectTween: (Rect? begin, Rect? end) {
53+
return MaterialRectCenterArcTween(begin: begin, end: end);
54+
},
55+
child: BoxWidget(
56+
size: const Size(50.0, 50.0),
57+
color:Colors.blue[700]!.withOpacity(0.5),
58+
),
59+
),
60+
title: const Text(
61+
'This blue icon will use a custom rect tween during the hero flight.',
62+
),
5663
),
57-
title: const Text(
58-
'This blue icon will use a custom rect tween during the hero flight.',
64+
const SizedBox(height: 10),
65+
ElevatedButton(
66+
onPressed: () => _gotoDetailsPage(context),
67+
child: const Text('Tap to trigger hero flight'),
5968
),
60-
),
61-
const SizedBox(height: 10),
62-
ElevatedButton(
63-
onPressed: () => _gotoDetailsPage(context),
64-
child: const Text('Tap to trigger hero flight'),
65-
),
66-
],
67-
);
68-
}
69-
70-
Widget _box({double? size, Color? color}) {
71-
return Container(
72-
color: color,
73-
child: FlutterLogo(size: size),
69+
],
70+
),
7471
);
7572
}
7673

@@ -89,15 +86,15 @@ class HeroExample extends StatelessWidget {
8986
createRectTween: (Rect? begin, Rect? end) {
9087
return MaterialRectCenterArcTween(begin: begin, end: end);
9188
},
92-
child: _box(
93-
size: 400.0,
89+
child: BoxWidget(
90+
size: const Size(400.0, 400.0),
9491
color: Colors.blue[700]!.withOpacity(0.5),
9592
),
9693
),
9794
Hero(
9895
tag: 'hero-default-tween',
99-
child: _box(
100-
size: 400.0,
96+
child: BoxWidget(
97+
size: const Size(400.0, 400.0),
10198
color: Colors.red[700]!.withOpacity(0.5),
10299
),
103100
),
@@ -108,3 +105,23 @@ class HeroExample extends StatelessWidget {
108105
));
109106
}
110107
}
108+
109+
class BoxWidget extends StatelessWidget {
110+
const BoxWidget({
111+
Key? key,
112+
required this.size,
113+
required this.color,
114+
}) : super(key: key);
115+
116+
final Size size;
117+
final Color color;
118+
119+
@override
120+
Widget build(BuildContext context) {
121+
return Container(
122+
width: size.width,
123+
height: size.height,
124+
color: color,
125+
);
126+
}
127+
}

0 commit comments

Comments
 (0)