当我们在 Flutter 中单击列表中的任何图像时，如何全屏打开图像？

Question

在这里image，当我点击particular image我在GridView.builder() widget. 所以当我click第一次display在其他屏幕上将它作为全屏图像时image。那么，我如何做到这一点？

我得到了image通过APIsin 的列表GridView.builder()。那么，如何open具体的image全屏幕上时，我click的任何particular image。

Answer 1

您可以按照以下代码轻松获得全屏图像。另外，奖励：英雄动画。希望这可以帮助

GestureDetector(
        onTap: () {
          Navigator.push(context,
              MaterialPageRoute(builder: (_) {
                return FullScreenImage(
                  imageUrl:
                  imageUrlHere,
                  tag: "generate_a_unique_tag",
                );
              }));
        },
        child: Hero(
          child: YourImageView,
          tag: "generate_a_unique_tag",
        ),
      ),

我使用 cached_network_image 2.0.0 来缓存和显示图像

class FullScreenImage extends StatelessWidget {
  final String imageUrl;
  final String tag;

  const FullScreenImage({Key key, this.imageUrl, this.tag}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black87,
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: tag,
            child: CachedNetworkImage(
              width: MediaQuery.of(context).size.width,
              fit: BoxFit.contain,
              imageUrl: imageUrl,
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}