• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Flutter

      • Home
      • Blog
      • Flutter
      • Flutter Hero Animation
      imageedit 19 4815260298 | Flutter Hero Animation

      Flutter Hero Animation

      • Posted by Shivam Srivastava
      • Categories Flutter, Uncategorized
      • Date September 16, 2019
      • Comments 0 comment

      Introduction

      In this tutorial I show you how to use Hero Animation in flutter it is also called Shared Transition Animation in Android.
      You will learn how to implement Hero Animation in your flutter app and make your app more attractive.

      Hero

      As you know in flutter everything is a widget. Hero also a widget in a flutter the same as other widgets, it is used to creating animation effect in the application.

      I will explain to you Hero widget using ListView.builder(). You can use it as you need, I explain like this because some beginners got confused hot to use it within a List.

      Start

      1. Create a flutter project.
      2. Add the below code in your lib folder.

      HeroAnimation.dart

      import 'package:flutter/material.dart';
      
      class HeroAnimation extends StatelessWidget {
         HeroAnimation({ Key key, this.photo, this.onTap, this.width ,this.index}) : super(key: key);
      
        final String photo;
        final VoidCallback onTap;
        final double width;
        int index;
        @override
        Widget build(BuildContext context) {
          return Container(
            height: 200,
            margin: EdgeInsets.all(5.0),
            child: Hero(
      
              tag: photo+index.toString(),
              child: Material(
                color: Colors.transparent,
                child: InkWell(
                  onTap: onTap,
                  child: Image.asset(
                    photo,
                    fit: BoxFit.contain,
                  ),
                ),
              ),
            ),
          );
        }
      }

      Animation widget has been created now you can call it where you want. For calling Animation widget to add below code where you want to add animation.

      ListView.builder(
                  itemBuilder: (context, index) {
                    return HeroAnimation(
                      index: index,
                      photo: "images/pichai.jpg",
                      onTap: () {
                        Navigator.push(
                            context,
                            PageRouteBuilder(
                                transitionDuration:
                                Duration(seconds: 1),
                                pageBuilder: (_, __, ___) =>
                                    HeroAnimation(
                                      index: index,
                                      photo: "images/pichai.jpg",
                                      onTap: (){
                                        Navigator.pop(context);
                                      },
                                    )));
                      },
                    );
                  },
                  itemCount: 10,
                ),

      Make sure you have added an image file in your images folder and also make an entry in pubspec.yaml file.

      Your animation is ready now run the project


      Output

      imageedit 24 7346209499 | Flutter Hero Animation

      There have more widgets that you can apply using flightShuttleBuilder, it provides more very cool animation on example is given below.

          flightShuttleBuilder: (
                    BuildContext flightContext,
                    Animation<double> animation,
                    HeroFlightDirection flightDirection,
                    BuildContext fromHeroContext,
                    BuildContext toHeroContext,
                    ) {
                  final Hero toHero = toHeroContext.widget;
                  return RotationTransition(
                    turns: animation,
                    child: toHero.child,
                  );
                },

      Output

      imageedit 21 5208209846 1 3 | Flutter Hero Animation

      This is only one example you can use more animation via change or Transition.
      This tutorial main purpose is to explain how to use Hero widget, so I don’t explain all the animation else tutorial get too long.
      You will easily get all transition on google if you need any help ask me to comment section.


      Get complete code click here

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      Continue with Facebook
      0

      Tag:flightshuttlebuilder, flutter animation, flutter hero listview, hero animation

      • Share:
      Shivam Srivastava
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      Flutter v/s React Native
      September 16, 2019

      Next post

      Flutter switch widget
      September 16, 2019

      You may also like

      whats-new-in-flutter-2.0.0
      Flutter 2 is here | What’s new in Flutter 2.0.0
      22 March, 2021
      Flutter Commands a Developer must know, Cheat Sheet
      14 Flutter Commands a Developer must know, Cheat Sheet
      28 January, 2021
      6 Things About HTTP Request in Dart For Beginners-min
      6 Things About HTTP Request in Dart For Beginners
      7 September, 2020

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • whats-new-in-flutter-2.0.0Flutter 2 is here | What’s new in Flutter 2.0.0
      • Flutter Commands a Developer must know, Cheat Sheet14 Flutter Commands a Developer must know, Cheat Sheet
      • 6 Things About HTTP Request in Dart For Beginners min | 6 Things About HTTP Request in Dart For Beginners6 Things About HTTP Request in Dart For Beginners

      Subscribe Now

       

      Social Connect

      Recent Courses

      Flutter App Development Course Online

      Flutter App Development Course Online

      Single and Multi Selection ListView in Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation and Variables

      Go Installation and Variables

      List in Dart Programming language

      List in Dart Programming language

      View All

      DON’T MISS A BEAT

      Be the first to know when our album is released on iTunes and Spotify

      We don’t spam! Read our privacy policy for more info.

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   [email protected]
      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google
      Continue with Facebook

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google
      Continue with Facebook

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now