引入插件,注：官方的功能很多，這里只是最簡單的應用

photo_view: ^0.10.2///注：不同版本的方法可能不一樣

直接上代碼，有注釋（PhotoPreview文件）

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

typedef PageChanged = void Function(int index);
class PhotoPreview extends StatefulWidget {
  final List galleryItems; //圖片列表
  final int defaultImage; //默認第幾張
  final PageChanged pageChanged; //切換圖片回調
  final Axis direction; //圖片查看方向
  final Decoration decoration;//背景設計

  PhotoPreview(
      {this.galleryItems,
        this.defaultImage = 1,
        this.pageChanged,
        this.direction = Axis.horizontal,
        this.decoration
      })
      : assert(galleryItems != null);
  @override
  _PhotoPreviewState createState() => _PhotoPreviewState();
}

class _PhotoPreviewState extends State<PhotoPreview> {
 int tempSelect;
  @override
  void initState() {
    // TODO: implement initState
    tempSelect=widget.defaultImage+1;
  }
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Stack(
        children: [
          Container(
              child: PhotoViewGallery.builder(
                  scrollPhysics: const BouncingScrollPhysics(),
                  builder: (BuildContext context, int index) {
                    return PhotoViewGalleryPageOptions(
                      imageProvider: NetworkImage(widget.galleryItems[index]),
                    );
                  },
                  scrollDirection: widget.direction,
                  itemCount: widget.galleryItems.length,
                  backgroundDecoration: widget.decoration??BoxDecoration(color: Colors.white),
                  pageController: PageController(initialPage: widget.defaultImage),
                  onPageChanged: (index) =>setState(() {
                    tempSelect=index+1;
                    if( widget.pageChanged!=null)
                    {widget.pageChanged(index);}
                  }))),
          Positioned(///布局自己換
            right: 20,
            top: 20,
            child: Text('$tempSelect/${widget.galleryItems.length}',style: TextStyle(color:Colors.black),),
          )
        ],
      ),
    );
  }
}

使用例子

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gzzoc/utils/photo_preview.dart';

class Test extends StatelessWidget {
  List list=[
  'https://goss.cfp.cn/creative/vcg/veer/800/new/VCG41N667607058.jpg',
  'https://goss1.cfp.cn/creative/vcg/800/new/VCG41N1210205351.jpg',
  'https://goss.cfp.cn/creative/vcg/800/new/VCG211241121526.jpg',
  ];
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        child: Center(
            child:ListView.builder(
              itemCount: list.length,
                scrollDirection:Axis.horizontal,
                itemBuilder:(context,index){
                  return Container(
                    width: 140,
                    height: 140,
                    child:  InkWell(
                      onTap: (){
                        Navigator.push(context,MaterialPageRoute(builder:(_)=>PhotoPreview(
                          galleryItems:list,
                          defaultImage: index,
                        )));
                      },
                      child: Image.network(list[index]),
                    ),
                  );
                },)
        )
      ),
    );
  }
  
}

效果圖:

d478c1045f173717842bf5a0659a2583.gif