HeroMode Widget in Flutter
In Flutter every component on a screen of the Flutter application is a widget. The screen’s perspective entirely relies on the choice and grouping of the widgets used to build the application. Also, the structure of the code of an application is a tree of widgets.
In this blog, we will understand the HeroMode widget and its functionality in the flutter. and We will see in this implementation of a demo program on the HeroMode Widget.
Table Contents:
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 ”
It is free and open-source. It was at first evolved from Google and is presently overseen by an ECMA standard. Flutter applications utilize the Dart programming language for making an application. The dart programming shares a few same highlights as other programming dialects, like Kotlin and Swift, and can be trans-arranged into JavaScript code.
If you want to explore more about Flutter, please visit Flutter’s official website to get more information.
Flutter Is Proudly Entrusted By These Organizations For their Products : — Flutter Showcase
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.
GitHub Link:
find the source code of the Flutter HeroMode Demo:
GitHub – flutter-devs/flutter_heromode_demo: A new Flutter project for HeroMode Demo
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
