一、使用插件库

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,

)

],

)),

),

);

}

}