Flutter - Can I wrap every widget with Hero to animate them - flutter

Question

Hero widget gives animation to different widgets on its own by analyzing. So can I wrap different widgets with Hero so that they get animated and look good? Because am don't know about the outcome or what animation will it show or totally don't show, which widget will and which one not...So can I wrap most of them with her widget? If yes, then which widgets can be wrapped to get animations, and do I have to do any extra work after wrapping with the hero? an example, please.
Or is there any way to apply animations to the whole app in all possible widgets at once, which would be more efficient and tame saving?

Answer 1

Hero widget will automatically create a Hero transition between two navigator routes.
Flutter will figure out where the widget is in both routes and animate the change between locations.
Let's say you want to use a picture as your Hero.
Put it on both the page routes, the one that you'll be transitioning from and the one you'll
be transitioning to.
Then, wrap the image with a Hero widget on both pages. Add a tag. This can be any object. The important thing is to use the same tag on both pages so that Flutter knows which Hero you are animating.
And you're done.
import 'package:flutter/material.dart';
void main() => runApp(HeroApp());
class HeroApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Transition Demo',
home: MainScreen(),
);
}
}
class MainScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Main Screen'),
),
body: GestureDetector(
child: Hero(
tag: 'imageHero',
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return DetailScreen();
}));
},
),
);
}
}
class DetailScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Center(
child: Hero(
tag: 'imageHero',
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
),
onTap: () {
Navigator.pop(context);
},
),
);
}
}