Skip to content

F
Front-End
Unverified Commit cd6b2a35 authored by Taha Tesser's avatar Taha Tesser Committed by GitHub
Browse files
Options

Improve `Hero` examples (#103095)

parent 13d76b29
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 85 deletions
examples/api/lib/widgets/heroes/hero.0.dart
View file @ cd6b2a35
...@@ -13,13 +13,8 @@ class HeroApp extends StatelessWidget { ...@@ -13,13 +13,8 @@ class HeroApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return const MaterialApp(
home: Scaffold( home: HeroExample(),
appBar: AppBar(title: const Text('Hero Sample')),
body: const Center(
child: HeroExample(),
),
),
); );
} }
} }
...@@ -29,31 +24,24 @@ class HeroExample extends StatelessWidget { ...@@ -29,31 +24,24 @@ class HeroExample extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Scaffold(
crossAxisAlignment: CrossAxisAlignment.start, appBar: AppBar(title: const Text('Hero Sample')),
children: <Widget>[ body: Column(
const SizedBox( crossAxisAlignment: CrossAxisAlignment.start,
height: 20.0, children: <Widget>[
), const SizedBox(height: 20.0),
ListTile( ListTile(
leading: Hero( leading: const Hero(
tag: 'hero-rectangle', tag: 'hero-rectangle',
child: _box(const Size(50, 50)), child: BoxWidget(size: Size(50.0, 50.0)),
), ),
onTap: () => _gotoDetailsPage(context), onTap: () => _gotoDetailsPage(context),
title: const Text( title: const Text(
'Tap on the icon to view hero animation transition.', 'Tap on the icon to view hero animation transition.',
),
), ),
), ],
], ),
);
}
Widget _box(Size size) {
return Container(
width: size.width,
height: size.height,
color: Colors.blue,
); );
} }
...@@ -63,18 +51,28 @@ class HeroExample extends StatelessWidget { ...@@ -63,18 +51,28 @@ class HeroExample extends StatelessWidget {
appBar: AppBar( appBar: AppBar(
title: const Text('Second Page'), title: const Text('Second Page'),
), ),
body: Center( body: const Center(
child: Column( child: Hero(
mainAxisAlignment: MainAxisAlignment.center, tag: 'hero-rectangle',
children: <Widget>[ child: BoxWidget(size: Size(200.0, 200.0)),
Hero(
tag: 'hero-rectangle',
child: _box(const Size(200, 200)),
),
],
), ),
), ),
), ),
)); ));
} }
} }
class BoxWidget extends StatelessWidget {
const BoxWidget({Key? key, required this.size}) : super(key: key);
final Size size;
@override
Widget build(BuildContext context) {
return Container(
width: size.width,
height: size.height,
color: Colors.blue,
);
}
}
examples/api/lib/widgets/heroes/hero.1.dart
View file @ cd6b2a35
...@@ -18,13 +18,8 @@ class HeroApp extends StatelessWidget { ...@@ -18,13 +18,8 @@ class HeroApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return const MaterialApp(
home: Scaffold( home: HeroExample(),
appBar: AppBar(title: const Text('Hero Sample')),
body: const Center(
child: HeroExample(),
),
),
); );
} }
} }
...@@ -34,43 +29,45 @@ class HeroExample extends StatelessWidget { ...@@ -34,43 +29,45 @@ class HeroExample extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Scaffold(
children: <Widget>[ appBar: AppBar(title: const Text('Hero Sample')),
ListTile( body: Column(
leading: Hero( children: <Widget>[
tag: 'hero-default-tween', ListTile(
child: _box(size: 50.0, color: Colors.red[700]!.withOpacity(0.5)), leading: Hero(
), tag: 'hero-default-tween',
title: const Text( child: BoxWidget(
'This red icon will use a default rect tween during the hero flight.', 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),
const SizedBox(height: 10.0), ListTile(
ListTile( leading: Hero(
leading: Hero( tag: 'hero-custom-tween',
tag: 'hero-custom-tween', createRectTween: (Rect? begin, Rect? end) {
createRectTween: (Rect? begin, Rect? end) { return MaterialRectCenterArcTween(begin: begin, end: end);
return MaterialRectCenterArcTween(begin: begin, end: end); },
}, child: BoxWidget(
child: _box(size: 50.0, color: Colors.blue[700]!.withOpacity(0.5)), 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.',
),
), ),
title: const Text( const SizedBox(height: 10),
'This blue icon will use a custom rect tween during the hero flight.', ElevatedButton(
onPressed: () => _gotoDetailsPage(context),
child: const Text('Tap to trigger hero flight'),
), ),
), ],
const SizedBox(height: 10), ),
ElevatedButton(
onPressed: () => _gotoDetailsPage(context),
child: const Text('Tap to trigger hero flight'),
),
],
);
}
Widget _box({double? size, Color? color}) {
return Container(
color: color,
child: FlutterLogo(size: size),
); );
} }
...@@ -89,15 +86,15 @@ class HeroExample extends StatelessWidget { ...@@ -89,15 +86,15 @@ class HeroExample extends StatelessWidget {
createRectTween: (Rect? begin, Rect? end) { createRectTween: (Rect? begin, Rect? end) {
return MaterialRectCenterArcTween(begin: begin, end: end); return MaterialRectCenterArcTween(begin: begin, end: end);
}, },
child: _box( child: BoxWidget(
size: 400.0, size: const Size(400.0, 400.0),
color: Colors.blue[700]!.withOpacity(0.5), color: Colors.blue[700]!.withOpacity(0.5),
), ),
), ),
Hero( Hero(
tag: 'hero-default-tween', tag: 'hero-default-tween',
child: _box( child: BoxWidget(
size: 400.0, size: const Size(400.0, 400.0),
color: Colors.red[700]!.withOpacity(0.5), color: Colors.red[700]!.withOpacity(0.5),
), ),
), ),
...@@ -108,3 +105,23 @@ class HeroExample extends StatelessWidget { ...@@ -108,3 +105,23 @@ class HeroExample extends StatelessWidget {
)); ));
} }
} }
class BoxWidget extends StatelessWidget {
const BoxWidget({
Key? key,
required this.size,
required this.color,
}) : super(key: key);
final Size size;
final Color color;
@override
Widget build(BuildContext context) {
return Container(
width: size.width,
height: size.height,
color: color,
);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab