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

Question

这里，当我单击在image中设置的任何particular image时，要全屏打开GridView.builder() widget。因此，当我在第一张图像上单击click时，将其在其他屏幕上的display视为全屏image。那么，我如何做到这一点？

我在image中获得了APIs至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);
        },
      ),
    );
  }
}