There are many Animations in Flutter, and today we will see one of the animation called Hero Animation.
Flying an image from one screen to another is called a hero animation in Flutter, You can create this animation in Flutter with Hero widgets. As the hero animates from the source to the destination route, the destination route (minus the hero) fades into view.
Let's Start
Step 1: Create a new Flutter Application.
Step 2: On Screen One Define a starting Hero widget and as a child have an image that will have the animation.
for example:
|
Hero( tag: 'hero', child: , ) |
Note: The Starting Hero Widget and End Hero Widget must have the same tag.
Step 3: Now in Second Screen define the ending hero widget which has the same image/any widget that is in starting hero widget with the same tag for example
|
Hero( tag: 'hero', child: Center( child: Image.asset(MyAssets.cracker), ), ), |
Create a route that contains the destination hero i.e screen one has a route that will navigate to the second screen. so, when we navigate to the second screen we will see our Hero Animation in Flutter.
Full Source Code to try
|
import 'package:flutter/material.dart'; import 'package:flutter_diwali_store_ui/value/my_assets.dart';
void main() { runApp(const MaterialApp( debugShowCheckedModeBanner: false, home: Home(), )); }
class Home extends StatelessWidget { const Home({Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.black, title: const Text('First Screen'), ), body: Column( children: [ const SizedBox( height: 20, ), Hero( tag: 'hero', child: GestureDetector( onTap: () { Navigator.push(context, MaterialPageRoute(builder: (context) => const Second())); }, child: Image.asset( MyAssets.cracker, height: 100, ), ), ) ], ), ); } }
class Second extends StatelessWidget { const Second({Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.orange, title: const Text('Second Screen'), ), body: Hero( tag: 'hero', child: Center( child: Image.asset(MyAssets.cracker), ), ), ); } }
|
Output:
 |
 |
Conclusion: In this tutorial, we learned how we can get Hero Animation in Flutter.
|
Article Contributed By :
|
|
|
|
|
655 Views |
|