CODEWITHSUNDEEP
flutterflutter-animation
Midhilaj
Midhilaj

Reputation: 4987

How to make Hero animation for two widgets

I need to make animation like Hero in two different widgets. Is that possible?
Widget a with image a and widget b with image a but widget a is inside a listview and widget b is full screen image(it hide listview)

Upvotes: 2

Views: 2872

Answers (1)

Marcos Boaventura
Marcos Boaventura

Reputation: 4741

It's very simple. You just need to wrap both widgets in a Hero widget using the same TAG property value. The snippet below is assuming you've a Image in a ListTile and after user clicks you show a new page with the same image but that image will be animated by Hero widget.

In list page the list items can be

ListTile(
      leading: Hero(
        tag: IMAGE_TAG, // must be the same in different pages
        child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
      ),
      title: Text('Anything'),
      onTap: () => // Just go to full screen page
    );

In full screen page

Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Hero(
          tag: 'IMAGE_TAG', // must be the SAME VALUE DEFINED IN list tile hero child widget.  
          child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
        ),
      ),
    );

OBS: The Hero tag property must be the same in different contexts but if you have a list with many items using Hero widget each Hero int the same context/page must have different tag values.

To deep dive concepts about Hero animations check the official doc

Upvotes: 1

Related Questions