“This is the 10th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

Wrote a basic performance optimization article to continue our animation-related introduction. Today’s Hero is the Hero component. The Hero component is perfect for transitioning from a list or overview page to a detail page. Because you can animate the components of two pages together, the experience feels very consistent. Here is an effect we are going to do in this article.

Hero animation process

Hero is essentially a transfer layer made in different routing pages, and then completed the transition through animation. The following 4 pictures are the official demonstration process.

  • Before the animation begins, an empty Overlay is prepared. The destination routing page is not generated yet.

  • T = 0.0, that is, when the animation starts, the source page has disappeared from the screen and masks appear on the screen. At this time, the destination routing page has been built and is not visible below the mask layer. But the Flutter rendering engine has already calculated the animated path from the mask layer to the destination routing page.

  • During the animation, the hero flies up and gradually flies to the target page. Using theTween<Rect>Mode to change shape and position, default is usedMaterialRectArcTweenObject completes the animation.

  • End of animation: The mask layer disappears, leaving only the destination routing page. The source page reverts to its routing state (so that it can be animated backwards on return).

Basic Hero example

Let’s look at the realization of this animation effect. The easiest way to use Hero is to use the same tag on the Hero components of the two routing pages, and then do all the animation for the Hero — sure enough, it’s a superhero, we don’t care about anything! Of course, for the sake of the user experience, it is better to have the same content (such as images) on the components of the first and second pages, and it is better if the component tree structure is consistent.

The first page of our example is two small images. The key here is the Hero component’s tag tag. The two images use different tags because tags cannot be shared by multiple Heros on the same page.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Hero Basic Animation '),
      brightness: Brightness.dark,
    ),
    body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Hero(
            tag: 'beauty1',
            child: RoundImage(
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => HeroDetail(
                      tag: 'beauty1',
                      assetImageName: 'images/beauty.jpeg',),),); }, assetImageName:'images/beauty.jpeg',
              imageSize: 80.0,),),// omit picture 2],),),); }Copy the code

The details page only has a central image, also using the Hero component. Just to be consistent with the source page, the tag, the image resources are passed in from the source page.

class HeroDetail extends StatelessWidget {
  final String tag;
  final String assetImageName;
  const HeroDetail({Key? key, required this.tag, required this.assetImageName})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hero Basic Animation Details'),
        brightness: Brightness.dark,
      ),
      body: Center(
        child: SizedBox(
          width: 200,
          height: 200,
          child: Hero(
            tag: this.tag,
            child: RoundImage(
              onTap: () {
                Navigator.of(context).pop();
              },
              assetImageName: this.assetImageName,
              imageSize: 200.0(), ((), ((), ((); }}Copy the code

This completes our previous transition animation effect, source code has been uploaded to: animation related source code. How’s that？ With Hero, is not the feeling of Hero rescue, so that your transition is much easier!

conclusion

This article introduces the basic process and basic example of Hero animation. With Hero, we can make transitions better for many of our scenarios, such as switching from item list to item details, from information list to information details. Can bring users a better experience.

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder. If you feel you have something to gain, please give three pairs of love as follows:

👍🏻 : a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!