一、使用插件库
选择第三方插件
在flutter的pubspec.yaml配置引入Swiper
将第三方资源下载到本地--->到项目根目录运行命令行
flutter packages get
效果图
// 引入 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: <Widget>[
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,
)
],
)),
),
);
}
}