In this blog, we will explore the Hero Animations in a flutter. We will be using some core functions available in a flutter to achieve this without any third party application. We will implement a demo of theHero Animation in your flutter applications.

Table of Contents :

• Flutter
• Hero Animation
• Code Implementation
• Code File
• Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time_”_

Hero Animation :

Hero widget is a great out-of-the-box animation for communicating the navigation action of a widget flying from page to page. Hero animation is a shared element transition (animation) between two different pages. Now to See this, Imagine a superhero flying in action. For example, you must have an image list. As we wrap it with a hero tag. Now we tap on an item list. and when tapped. Then the images list item lands its position on the detail page. when we cancel it and come back to the list page, then the hero widget returns to its page.

Demo Module :

Code Implementation

Create a new dart file called_hero_animation_list_ inside the _lib_ folder.

In this screen use the PageRouteBuilder class to create a custom root. It Provides animation object. The PageViewBuilder has a transitionDuration function that sets animation durations. Builder function is used to create route content add the transition builder function.

Navigator.push(
    context,
    PageRouteBuilder(
      transitionDuration: Duration(milliseconds:900),
      pageBuilder: (_, __, ___) => ListDetail(index: index),
      settings: RouteSettings(
        arguments: heroAnimationListModel[index],
      ),
    ));

The Hero widget is the marked for hero animations. when the naviagator push or pop pageroot,the entire screen content changes.But it displays and resizes from page to another page.

//Hero Animation list page.
Hero(
  tag: "ImageTag" + index.toString(),
  child: ClipRRect(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(15.0),
      topRight: Radius.circular(15.0),
    ),
    child: Image.asset(
      item.img,
      width: _width,
      fit: BoxFit.fill,
    ),
  ),
),

In this Detail Screen, we have used the same tag of the hero widget from the list page (Main Page) which transitions the hero animation.

Hero(
    tag: "ImageTag" + widget.index.toString(),
    child: Image.asset(
      heroAnimationListModel.img,
      fit: BoxFit.cover,
    )),

#flutter #mobile-apps #programming #developer