Flutter Hero/FadeTransition动画

图片列表 --> 图片详情的 Hero动画

图片列表页

return Scaffold(
      appBar: AppBar(
        title: Text("图片列表"),
      ),
      body: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 16/9,
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
        ),
        children: List.generate(30, (index) {
          String url = "https://picsum.photos/200/300?random=$index";
          return GestureDetector(
              onTap: () {
                Navigator.of(context).push(PageRouteBuilder(pageBuilder:
                    (context, anim1,anim2) {
                  return FadeTransition(opacity: anim1,child: XMImageDetailPage(url),);
                }));
              },
              child: Hero(
                  tag: url,
                  child: Image.network(url,fit: BoxFit.cover,)));
        }),
      ),
    );

图片详情页

return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
            child: Container(
                child: Hero(tag: _imageURL,
                    child: Image.network(_imageURL, fit: BoxFit.cover,)))),
      ),
    );