HeroMode Widget in Flutter
By: Nilu Modanwal
Tags: Flutter, Mobile App Development, Flutter App Development, Dart, Flutter Widget

Hero Widget:

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.

HeroMode Widget:

HeroMode widget has animation power to enable or disable the element between two screens. basically, this widget is required, when you want to disable the animation functionality of the Hero widget. If you want to know about the Hero Mode widget, then first you need to understand the Hero widget.

HeroMode widget is the part of the Hero widget, and the purpose of introducing this widget is to enable and disable the animation of the hero widgets, if you don’t want to animate the element between two screens then wrap the Hero widget with the HeroMode Widget and we can enable and disable by using their static properties or dynamically, and then by wrapping this widget what happened when you see carefully below example video, then you can see what is the measurable difference in this animation.

Demo Module :

How to implement code in dart file :

You need to implement it in your code respectively:

First, I have created a ViewModel class for the set and get a boolean value on the switch button. Which I passed in HeroMode Widget.

bool _isHeroModeEnable= true;

bool get isHeroModeEnable => _isHeroModeEnable; set isHeroModeEnable(bool value) {

_isHeroModeEnable = value;

}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Then, I have to add a text and switch button for showing enable and disable the functionality of the HeroMode widget.

Widget buildCategoriesSection() {

return Container(

padding: EdgeInsets.only(left: 20),

child: Row(

//mainAxisAlignment: MainAxisAlignment.center,

children: [

Container(

child: Text("Hero Mode",

style: TextStyle(

color: Colors.white,

fontSize: 18,

fontWeight: FontWeight.bold

),),

),

Switch(

value: model!=null && model!.isHeroModeEnable,

onChanged:(value){

print("value:$value");

model!.isHeroModeEnable=value;

},

activeTrackColor: Color(ColorConstants.light_blue),

activeColor: Color(ColorConstants.pure_white),

),



],

),

);

}

Then, I have created a listview with movie banner API, but you can use a dummy images list for test purposes according to your requirement. and after that, I have wrap images with the Hero widget, and Hero widget wrap with the HeroMode widget. for disabling the animation of Hero Widget. basically, this is a medium to enable and disable the animation of Hero Widget .you can not disable animation directly from the Hero Widget.

Widget _buildPopularSection() {

return Container(

height: 300,

padding: EdgeInsets.only(left: 20, top: 5),

width: MediaQuery.of(context).size.width,

child: model != null && model!.isPopularLoading

? Center(child: CircularProgressIndicator())

: Provider.value(

value: Provider.of<HomeViewModel>(context),

child: Consumer(

builder: (context, value, child) => Container(

child: ListView.builder(

shrinkWrap: true,

itemCount: model != null && model!.popularMovies != null

? model!.popularMovies!.results!.length : 0,

scrollDirection: Axis.horizontal,

itemBuilder: (context, index) {

return _buildPopularItem(

index, model!.popularMovies!.results![index]);

},

),

),

),

),

);

} Widget _buildPopularItem(int index, Results result) {

return GestureDetector(

onTap: () {

Navigator.push(

context,

MaterialPageRoute(

builder: (context) => MovieDetailView(movieDataModel: result)),

);

},

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Container(

height: 200,

width: 150,

margin: EdgeInsets.only(right: 16),

child: HeroMode(

child: Hero(

tag: '${result.id}',

child: ClipRRect(

borderRadius: BorderRadius.circular(25.0),

child: Image.network(

Constants.IMAGE_BASE_URL +

Constants.IMAGE_SIZE_1 +

'${result.posterPath}',

fit: BoxFit.cover,

),

),

),

enabled: true,

//enabled:model.isHeroModeEnabled,

),

),

SizedBox(

height: 18,

),

Container(

child: Text(

result.title!,

style: TextStyle(color: Colors.white, fontSize: 15),

),

),

SizedBox(

height: 5,

),

Container(

child: GFRating(

value: _rating,

color: Color(ColorConstants.orange),

size: 16,

onChanged: (value) {

setState(() {

_rating = value;

});

},

),

)

],

),

);

}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Last, I have created a second dart file and in this file, I have made a method for showing images animation here. and then images wrap with the Hero widget with the same tag. When you have multiple images then you pass the image list id.

Widget _buildMovieBanner(Results movieItems) {

return Container(

height: 380,

child: Stack(

children: [

Positioned(

top: 20,

child: Container(

height: 350,

width: 240,

margin: EdgeInsets.only(left: 28, right: 30),

decoration: BoxDecoration(

borderRadius: BorderRadius.circular(22),

color: Color(ColorConstants.saphire_blue2),

),

),

),

Positioned(

top: 10,

child: Container(

height: 350,

width: 250,

margin: EdgeInsets.only(left: 22, right: 25),

decoration: BoxDecoration(

borderRadius: BorderRadius.circular(22),

color: Color(ColorConstants.cobaltBlue),

),

),

),

Container(

height: 350,

width: 260,

margin: EdgeInsets.only(left: 16, right: 16),

decoration: BoxDecoration(

borderRadius: BorderRadius.circular(20),

),

child: ClipRRect(

borderRadius: BorderRadius.circular(24),

child: Hero(

tag: '${widget.movieDataModel.id}',

child: Image.network(

Constants.IMAGE_BASE_URL +

Constants.IMAGE_SIZE_1 +

widget.movieDataModel.posterPath!,

fit: BoxFit.cover,

),

),

),

),

],

),

);

}

Conclusion:

In this article, I have explained the basic overview of the HeroMode Widget in a flutter, you can modify this code according to your choice. This was a small introduction to HeroMode Widget On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Explore, HeroMode Widget in your flutter projects.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.