Как открыть изображение в полноэкранном режиме, когда мы нажимаем на любое изображение в списке в Flutter?

Question

Здесь я хочу открыть image в полноэкранном режиме, когда я нажимаю на любой particular image, который я установил в GridView.builder() widget. Поэтому, когда я click на 1-м изображении, он display на другом экране в качестве полноэкранного image. Итак, как мне выполнить sh это?

Я получаю список от 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);
        },
      ),
    );
  }
}