Flutter Hero动画 回顾

前言：日常项目开发中，点击item跳转到下一个页面时候，经常带有那种转场动画，而不是直接切换，体验感会好很多，在Flutter中hero就可以实现这样的效果

需求：点击图片，转场滑动到下一个页面,点击文字 转场返回

1: 实现Hero组件，我们先来看一下 组件需要什么？ Hero 需要一个tag，用于标记转场widget关联， 其次我们要传入一个喵点 widget，用于执行转场，这里我还想控制他的 宽度 事件。总结下来 标记 宽度 事件 转场组件，码字环节，创建 StatelessWidget,构造函数 设置四个参数，build实现hero封装,如下:
 

class HHeroWidget extends StatelessWidget {
  //需要 标记 宽度 事件 转场组件
  VoidCallback ontap;//转场动画事件
  double width;//喵点widget 宽度
  String tag;//转场动画 widget 关联标记
  Widget child;//转场喵点 组件
  HHeroWidget({this.ontap, this.width, this.tag, this.child});

  

  @override
  Widget build(BuildContext context) {
    //喵点组件 背景设置透明
    return Container(
      width: width,
      color: Colors.transparent,
      // 实现hero动画， 添加 tag child，实现点击事件 喵点组件绘制
      child: Hero(
        tag: tag,
        child: GestureDetector(
          onTap: ontap,
          child: child,
        ),
      ),
    );
  }
}

2: 实现第一个页面，添加图片，居中显示，这里直接使用

Container 设置居中，child使用我们封装好的HHeroWidget即可，传入tag、width、child、ontap,如下：

 //添加 Container包裹hero ，主要达到剧中效果
      body: Container(
        alignment: Alignment.center,
        //增加 hero 动画 tag:标记  width 宽度
        child: HHeroWidget(
          tag: "我是一个平平无奇的Tag",
          width: 200.0,
          //喵点 组件
          child: Image.network(
              "https://img2.sycdn.imooc.com/60a1d2510001869810801440-140-140.jpg"),
          ontap: () {//点击事件，用于动画做完后跳转
           
          },
        ),
      ),

3:处理ontap点击事件&