一、使用插件庫
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 {
//定義圖片存儲的數(shù)組
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("輪播圖"), //標(biāo)題內(nèi)容
centerTitle: true //標(biāo)題是否居中
),
body: Container(
child: ListView(
children: <Widget>[
Container( //第一個盒子
child: new Swiper(
itemBuilder: (BuildContext context, int index) { //定義播放圖片構(gòu)造器
return Image.network(_imageUrls[index], fit: BoxFit.fill);
},
autoplay: true, //自動播放
itemCount: _imageUrls.length, //設(shè)置長度
pagination: SwiperPagination(), //小圓點
viewportFraction: 0.8,
scale: 0.9,
),
width: double.infinity,
height: 200,
)
],
)),
),
);
}
}
