Flutter使用Swiper编写多张图片

一、使用插件库

地址：https://pub.dev/

d1.png

选择第三方插件

t2.png

t4.png

在flutter的pubspec.yaml配置引入Swiper

t3.png

将第三方资源下载到本地--->到项目根目录运行命令行
flutter packages get

效果图

swiper.png

//  引入    UI库
import 'package:flutter/material.dart';
//  引入Swiper插件
import 'package:flutter_swiper/flutter_swiper.dart';
//主入口

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  //定义图片存储的数组
  List _imageUrls = [
    'https://pics1.baidu.com/feed/08f790529822720e6aa6f6410a5a4d43f31fabb3.jpeg?token=8fb7f32253df1531c46bfa67fe21cc75&s=EC836E99524B10E7113DF0C1030070D0',
    'https://pics7.baidu.com/feed/9213b07eca80653884f4b8bfe74ce641ac348292.jpeg?token=f1c223af398963687fc1d41ca058526b&s=5A25A944114213E7D66D0917030040C9',
    'https://pics4.baidu.com/feed/3b87e950352ac65caf49b4788863f51492138a80.jpeg?token=a7dd7eb878a6fbb92255c263cac17547&s=6BA00D89440B0AEF5180B9930100E081',
    'https://pics7.baidu.com/feed/f11f3a292df5e0fea0f01a102ef173ad5fdf7249.jpeg?token=1908e5b736e045888160bf77893ac19e&s=EE924C83428A3EE50894C09303004093',
    ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            title: new Text("轮播图"), //标题内容
            centerTitle: true //标题是否居中
            ),
        body: Container(
            child: ListView(
          children: [
            Container(              //第一个盒子
                child: new Swiper(      
              itemBuilder: (BuildContext context, int index) {    //定义播放图片构造器
                return  Image.network(_imageUrls[index], fit: BoxFit.fill);
               
              },
              autoplay: true,       //自动播放
              itemCount: _imageUrls.length,        //设置长度
              pagination: SwiperPagination(),     //小圆点
              viewportFraction: 0.8,
              scale: 0.9,
            ),
            width: double.infinity,
            height: 200,
            )
          ],
        )),
      ),
    );
  }
}