Flutter 仿朋友圈查看大图，Swiper支持滑动

Swiper支持多图片预览、左右切换

flutter_swiper插件传送地址

先上效果图

1.导入引用到pubspec.yaml文件里面，引入后记得pub get

flutter_swiper: ^1.1.6

2.写一个图片的集合，可以使用本地的，也可以使用网络的，我本次使用的是网络图片

List<Map> imgList=[
    {
      "url":"https://pic2.zhimg.com/v2-848ed6d4e1c845b128d2ec719a39b275_b.jpg"
    },
    {
      "url":"https://pic2.zhimg.com/80/v2-40c024ce464642fcab3bbf1b0a233174_hd.jpg"
    },
    {
      "url":"https://pic4.zhimg.com/80/v2-9cf53967a3825fb27b4199b771cb692b_720w.jpg"
    },
    {
      "url":"https://pic3.zhimg.com/80/v2-130838b9c036021e3656b30b01e55ce2_720w.jpg"
    },
    {
      "url":"http://picture.name/images/2019/01/24/21515938.jpg"
    }
  ];

3.把图片放到swiper上显示出来

Swiper(
          itemBuilder: (BuildContext context,int index){
            return Container(
                width: double.infinity,
                child:Image.network(imgList[index]["url"],fit: BoxFit.contain,)
            );
          },
          itemCount: imgList.length,
          pagination: SwiperPagination(),//下面的分页小点
//        control: new SwiperControl(),  //左右的那个箭头,在某模拟器中会出现蓝线
        )

 4.基本上就运行就可以实现查看大图了，然后你们说了，这也不能关闭页面啊，没有跟微信朋友圈一样，点击任意地方让其消失，别急，马上奉上完成代码。

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

///查看大图使用
class SwiperPage extends StatefulWidget {
  const SwiperPage({Key? key}) : super(key: key);

  @override
  State<SwiperPage> createState() => _SwiperPageState();
}

class _SwiperPageState extends State<SwiperPage> {
  List<Map> imgList=[
    {
      "url":"https://pic2.zhimg.com/v2-848ed6d4e1c845b128d2ec719a39b275_b.jpg"
    },
    {
      "url":"https://pic2.zhimg.com/80/v2-40c024ce464642fcab3bbf1b0a233174_hd.jpg"
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      backgroundColor: Colors.black87,
      body:GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: ((){
          //点击任意地方都能关闭页面，并且不影响你的滑动查看  
          Navigator.pop(context);
        }),
        child: Swiper(
          itemBuilder: (BuildContext context,int index){
            return Container(
                width: double.infinity,
                child:Image.network(imgList[index]["url"],fit: BoxFit.contain,)
            );
          },
          itemCount: imgList.length,
          pagination: SwiperPagination(),//下面的分页小点
//        control: new SwiperControl(),  //左右的那个箭头,在某模拟器中会出现蓝线
        ),
      ),
    );
  }
}