Skip to content

Commit

Permalink
Improve Hero examples (#103095)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TahaTesser
TahaTesser authored May 6, 2022
1 parent 13d76b2 commit cd6b2a3
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 85 deletions.
78 changes: 38 additions & 40 deletions examples/api/lib/widgets/heroes/hero.0.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,8 @@ class HeroApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Hero Sample')),
body: const Center(
child: HeroExample(),
),
),
return const MaterialApp(
home: HeroExample(),
);
}
}
Expand All @@ -29,31 +24,24 @@ class HeroExample extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(
height: 20.0,
),
ListTile(
leading: Hero(
tag: 'hero-rectangle',
child: _box(const Size(50, 50)),
),
onTap: () => _gotoDetailsPage(context),
title: const Text(
'Tap on the icon to view hero animation transition.',
return Scaffold(
appBar: AppBar(title: const Text('Hero Sample')),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 20.0),
ListTile(
leading: const Hero(
tag: 'hero-rectangle',
child: BoxWidget(size: Size(50.0, 50.0)),
),
onTap: () => _gotoDetailsPage(context),
title: const Text(
'Tap on the icon to view hero animation transition.',
),
),
),
],
);
}

Widget _box(Size size) {
return Container(
width: size.width,
height: size.height,
color: Colors.blue,
],
),
);
}

Expand All @@ -63,18 +51,28 @@ class HeroExample extends StatelessWidget {
appBar: AppBar(
title: const Text('Second Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Hero(
tag: 'hero-rectangle',
child: _box(const Size(200, 200)),
),
],
body: const Center(
child: Hero(
tag: 'hero-rectangle',
child: BoxWidget(size: Size(200.0, 200.0)),
),
),
),
));
}
}

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,
);
}
}
107 changes: 62 additions & 45 deletions examples/api/lib/widgets/heroes/hero.1.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,8 @@ class HeroApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Hero Sample')),
body: const Center(
child: HeroExample(),
),
),
return const MaterialApp(
home: HeroExample(),
);
}
}
Expand All @@ -34,43 +29,45 @@ class HeroExample extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ListTile(
leading: Hero(
tag: 'hero-default-tween',
child: _box(size: 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.',
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: _box(size: 50.0, color: Colors.blue[700]!.withOpacity(0.5)),
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.',
),
),
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'),
),
),
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),
],
),
);
}

Expand All @@ -89,15 +86,15 @@ class HeroExample extends StatelessWidget {
createRectTween: (Rect? begin, Rect? end) {
return MaterialRectCenterArcTween(begin: begin, end: end);
},
child: _box(
size: 400.0,
child: BoxWidget(
size: const Size(400.0, 400.0),
color: Colors.blue[700]!.withOpacity(0.5),
),
),
Hero(
tag: 'hero-default-tween',
child: _box(
size: 400.0,
child: BoxWidget(
size: const Size(400.0, 400.0),
color: Colors.red[700]!.withOpacity(0.5),
),
),
Expand All @@ -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,
);
}
}

0 comments on commit cd6b2a3

Please sign in to comment.