I. Overview

• Hero animation is also called transition animation
• Excessive animation: When the user clicks on a picture, switch to another page, this page also has this picture.

Di Hero

2.1 Constructor

class Hero extends StatefulWidget
const Hero({
    Key? key,
    required this.tag,
    this.createRectTween,
    this.flightShuttleBuilder,
    this.placeholderBuilder,
    this.transitionOnUserGestures = false,
    required this.child,
  })

2.2 Common Properties Description

Note: 2 pages have HERO controls, andtagConsistent parameters

Three samples

3.1 code

Jump page

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue,),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
  Widget build(BuildContext context) {
    _getLocalFile();
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          backgroundColor: Colors.orange,
          centerTitle: true,
          //actions: [],
          // Leading: Text ("left component"),
        ),
		body:Column(children: [
          Hero(tag: "HeroTag", child: Image.asset("images/img_1.jpg",width: 100,height: 100,),),
                     RaisedButton (Child: Text ("Jump"), onpressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (context){
                             Return OtherPage (Title: "New Page",);
            }));
          })
        ],),
      )
}

Jump after the page

class OtherPage extends StatefulWidget{
  OtherPage({Key key,this.title}):super(key: key);
  final String title;
  @override
  State<StatefulWidget> createState() =>_OtherPageState();
}
class _OtherPageState extends State<OtherPage>
{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title),),
      body: Hero(tag: "HeroTag", child: Image.asset("images/img_1.jpg",width: 100,height: 100,),),
    );
  }
}

3.2 renderings