Flutter HeroMode Widget animation transition component

original

https://medium.com/flutterdevs/heromode-widget-in-flutter-9fac046fbf86

Code

https://github.com/flutter-devs/flutter_heromode_demo

refer to

https://flutter.dev

text

In Flutter, each component on the Flutter application screen is a small tool. The perspective of the screen is completely dependent on the selection and grouping of the widgets used to build the application. In addition, the structure of the application code is a tree of widgets.

In this blog, we will learn about HeroMode widgets and their functions in flutter. We will see in the implementation of the demo program of this HeroMode widget.

"Flutter is Google's UI toolkit. It can help you build beautiful native composite applications for mobile devices, the web, and the desktop with a code base in record time."

It is free and open source. It was originally developed by Google and is currently regulated by ECMA standards. Flutter applications use the Dart programming language to make applications. This dart programming has some of the same highlights as other programming languages, such as Kotlin and Swift, and can be converted into JavaScript code.

If you want to explore more about Flutter, please visit Flutter's official website for more information. Flutter's official website
The following companies and products are using Flutter-Flutter display

HeroMode widget

The Hero widget is a great out-of-the-box animation for communicating the navigation actions of widgets flying from one page to another. Hero animation is a transition (animation) of elements shared between two different pages. Now let’s look at this and imagine a superhero flying in action. For example, you must have a list of images. When we wrap it with a hero label. Now we click on a list of items. And when it's knocked. Then the image list item lands its location on the detail page. When we cancel it and return to the list page, then the hero widget returns to its page.

The HeroMode widget has an animation function that can enable or disable elements between two screens. Basically, this widget is necessary when you want to disable the animation function of the Hero widget. If you want to learn about Hero mode widgets, first you need to learn about Hero widgets.

It is part of the Hero widget. The purpose of introducing this widget is to enable and disable the animation of the Hero widget. If you don’t want to animate elements between the two screens, then use the HeroMode widget to wrap the Hero widget, we can By using their static properties or dynamically enabling and disabling them, and then by wrapping this widget, when you take a closer look at what happens in the example video below, then you can see the measurable difference in this animation.

Demo module:

How to implement the code in the dart file:

You need to implement it in your code separately:

First, I created a ViewModel class for the collection and got a boolean value on the switch button. This is what I passed in HeroMode Widget.

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

When we run the application, we should get the output of the screen, just like the screenshot below.

Then, I had to add a text and a switch button to display the enable and disable functions 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 created a list view with the movie title API, but you can use a list of virtual images for testing purposes as needed. After this, I use Hero widgets to wrap images and HeroMode widgets to wrap Hero widgets. Disable animation of Hero widgets. Basically, this is a medium to enable and disable animated hero widgets. You cannot disable animation directly from 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 should get the output of the screen, just like the screenshot below.

Finally, I created a second provincial highway file, in this file, I made a method to display the image animation. Then use the Hero widget with the same mark to wrap the image. When you have multiple images, then 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.

In this article, I have briefly introduced the basic overview of HeroMode widgets, you can modify this code according to your choice. This is a small introduction to HeroMode widget user interaction from my side, it works using Flutter.

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

I hope this blog will provide you with plenty of information about the HeroMode widget that you try to explore in your Flutter project.

❤ ❤ Thanks for reading this article ❤❤

❤ Thanks for reading this article ❤❤

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

If I did something wrong, please let me know in the comments and I am happy to improve.

Clap 👏 If this article helps you.

Applause if this article is helpful to you.