From cd6b2a35431b1d2fab29ad0c5fc587b28aa4ed22 Mon Sep 17 00:00:00 2001 From: Taha Tesser Date: Fri, 6 May 2022 09:39:10 +0300 Subject: [PATCH] Improve `Hero` examples (#103095) --- examples/api/lib/widgets/heroes/hero.0.dart | 78 +++++++------- examples/api/lib/widgets/heroes/hero.1.dart | 107 ++++++++++++-------- 2 files changed, 100 insertions(+), 85 deletions(-) diff --git a/examples/api/lib/widgets/heroes/hero.0.dart b/examples/api/lib/widgets/heroes/hero.0.dart index 2adce8d6762c..7b68724777b0 100644 --- a/examples/api/lib/widgets/heroes/hero.0.dart +++ b/examples/api/lib/widgets/heroes/hero.0.dart @@ -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(), ); } } @@ -29,31 +24,24 @@ class HeroExample extends StatelessWidget { @override Widget build(BuildContext context) { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - 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: [ + 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, + ], + ), ); } @@ -63,18 +51,28 @@ class HeroExample extends StatelessWidget { appBar: AppBar( title: const Text('Second Page'), ), - body: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - 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, + ); + } +} diff --git a/examples/api/lib/widgets/heroes/hero.1.dart b/examples/api/lib/widgets/heroes/hero.1.dart index 94255a886363..bbb5ad1c09b4 100644 --- a/examples/api/lib/widgets/heroes/hero.1.dart +++ b/examples/api/lib/widgets/heroes/hero.1.dart @@ -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(), ); } } @@ -34,43 +29,45 @@ class HeroExample extends StatelessWidget { @override Widget build(BuildContext context) { - return Column( - children: [ - 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: [ + 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), + ], + ), ); } @@ -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), ), ), @@ -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, + ); + } +}