How to get Hero Animation in Flutter

Published November 03, 2021

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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

881 Views