Flutter中的Hero动画

• 实现效果：

• 主页面列表页

class _TestNavigatorState extends State<TestNavigator>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动画"),
      ),
      body: Center(
        child: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,//一排两个
            crossAxisSpacing: 10,//间距
            mainAxisSpacing: 10,//间距
            childAspectRatio: 16/9
          ),
          children: List.generate(20, (index){
            final imageURL = "https://picsum.photos/500/500?random=$index";
            return GestureDetector(
              onTap: (){
                Navigator.of(context).push(PageRouteBuilder(
                  transitionDuration: Duration(seconds: 1),
                  pageBuilder: (context,animation1,animation2){
                    return FadeTransition(
                      opacity: animation1,
                      child: DetailPage(imageURL),
                    );
                  }
                ));
              },
              child: Hero(
                tag: imageURL,
                child: Image.network(imageURL,fit: BoxFit.cover),
              ),
            );
          }),
        ),
      ),
    );
  }
}

• 详情页
  使用Hero包裹，并且要保持tag与父页面一致

class DetailPage extends StatelessWidget {
  final String _imageURL;
  DetailPage(this._imageURL);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: GestureDetector(
          child: Hero(tag: _imageURL, child: Image.network(_imageURL,fit: BoxFit.cover),),
          onTap: (){
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}