Flutter Animation : Hero Widget Sample Code

Hero Animation is popular in which an image flies from one screen to another. This can be easily implemented in flutter app using Flutter Hero Widget. Here is the sample flutter code of Hero animation.

welcome_screen.dart

          Row(
              children: <Widget>[
                Hero(
                  tag: 'logo',
                  child: Container(
                    child: Image.asset('images/logo.png'),
                    height: 60.0,
                  ),
                ),
                Text(
                  'Welcome Page',
                  style: TextStyle(
                    fontSize: 45.0,
                    fontWeight: FontWeight.w900,
                  ),
                ),
              ],
            ),

login_screen.dart

            Hero(
              tag: 'logo',
              child: Container(
                height: 200.0,
                child: Image.asset('images/logo.png'),
              ),
            ),

Here in the above app, the user goes from the welcome page to the login page. During the transition, the logo image gets hero animation. Logo height smoothly scales from 60 to 200.