import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoViewContent extends StatefulWidget {
  String url ="";
  PhotoViewContent({required this.url});

  @override
  State<StatefulWidget> createState() {
    return _PhotoViewState();
  }
}

class _PhotoViewState extends State<PhotoViewContent> {
  int currentIndex=0;

  @override
  void initState() {
    super.initState();
  }

  void onPageChanged(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: PhotoViewGallery.builder(
          scrollPhysics: const BouncingScrollPhysics(),
          builder: (BuildContext context, int index) {
            return PhotoViewGalleryPageOptions(
              imageProvider: Image.network(widget.url, fit: BoxFit.cover, width: 1000.0).image,
              initialScale: PhotoViewComputedScale.contained * 0.8,
              heroAttributes: PhotoViewHeroAttributes(tag: widget.url),
            );
          },
          itemCount: 1,
          loadingBuilder: (context, event) => Center(
            child: Container(
              width: 20.0,
              height: 20.0,
              child: CircularProgressIndicator(
                value: event == null
                    ? 0
                    : event.cumulativeBytesLoaded / event.expectedTotalBytes!,
              ),
            ),
          ),
        )
    );
  }


}

import 'package:flutter/material.dart';

import 'PhotoViewContent.dart';


class ImagePage extends StatefulWidget {
  const ImagePage({Key? key}) : super(key: key);

  @override
  State<ImagePage> createState() => _ImagePageState();
}

class _ImagePageState extends State<ImagePage> {

  List<String> imageSliders=[];

  @override
  void initState() {
    super.initState();
    for(int i =1;i<20;i++){
      imageSliders.add("https://picsum.photos/250?image=$i");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Photo gallery')),
      body: GridView.builder(
        padding: const EdgeInsets.all(4.0),
        gridDelegate:
        SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemCount:imageSliders.length,
        itemBuilder: (context, index) {
          String url  = imageSliders[index];
          return Hero(
            tag: url,
            child: Container(
              margin: const EdgeInsets.all(4.0),
              child: GestureDetector(
                child: Image.network(
                  url,
                  fit: BoxFit.cover,
                ),
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => PhotoViewContent(
                        url: url,
                      ),
                    ),
                  );
                },
              ),
            ),
          );
        },
      ),
    );
  }
}