Flutter实现轮播图banner

 先上效果图&＃xff1a;

1.准备

首先打开pubspec.yaml文件&＃xff0c;添加控件依赖

flutter_swiper: ^1.0.6 //请在pub上查看最新版本


运行命令&＃xff1a;flutter packages get 

2.使用

完整的dart代码

import &＃39;package:flutter/material.dart&＃39;;
import &＃39;package:flutter_swiper/flutter_swiper.dart&＃39;;
import &＃39;package:url_launcher/url_launcher.dart&＃39;;
import &＃39;package:fluttertoast/fluttertoast.dart&＃39;;final List images &＃61; [&＃39;images/viewpage_ima1.jpg&＃39;,&＃39;images/viewpage_ima2.jpg&＃39;,&＃39;images/viewpage_ima3.jpeg?s=#39;,&＃39;images/viewpage_ima4.jpg&＃39;,&＃39;images/icon_bg.jpg&＃39;,
];final List descriptions &＃61; [&＃39;莲&＃xff0c;出淤泥而不染&＃39;,&＃39;社会我宝姐&＃xff0c;人美路子野&＃39;,&＃39;周五快到了&＃xff0c;准备追更新&＃39;,&＃39;送你一辆奥迪&＃39;,&＃39;我家狗狗好看吗&＃39;,
];
class MySwiperPage extends StatefulWidget {&＃64;overrideSwiperPageState createState() {return SwiperPageState();}
}
class SwiperPageState extends State {&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(&＃39;轮播组件&＃39;),),body: Column(children: [Container(width: MediaQuery.of(context).size.width,margin: const EdgeInsets.only(bottom: 10.0),height: 180.0,child: Swiper(itemBuilder: _swiperBuilder,itemCount: images.length,pagination: new SwiperPagination(builder: DotSwiperPaginationBuilder(color: Colors.black38,activeColor: Colors.blueAccent,)),control: null,duration: 300,
// viewportFraction: 0.9,scrollDirection: Axis.horizontal,autoplay: true,onTap: (int index){Fluttertoast.showToast(msg: &＃39;点击了第$index个&＃39;);},)),Center(child: SizedBox.fromSize(size: Size.fromHeight(180.0),child: Swiper(itemBuilder: (BuildContext context, int index) {return Padding(padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 0.0),child: GestureDetector(onTap: () {Fluttertoast.showToast(msg: descriptions[index]);},child: ClipRRect(borderRadius: BorderRadius.circular(6.0),child: Stack(fit: StackFit.expand,children: [Image.asset(images[index], fit: BoxFit.cover),],),),),);},itemCount: images.length,//选中时的指示器pagination: new SwiperPagination(builder: DotSwiperPaginationBuilder(color: Colors.black38,activeColor: Colors.white,),margin: const EdgeInsets.only(bottom: 22.0)),control: null,duration: 300,scrollDirection: Axis.horizontal,viewportFraction: 0.8,scale: 0.85,autoplay: true,onTap: (int index) {Fluttertoast.showToast(msg: &＃39;点击了第$index个&＃39;);},),)),Center(child: SizedBox.fromSize(size: Size.fromHeight(180.0),child: Swiper(itemBuilder: (BuildContext context, int index) {return Padding(padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 15.0),child: GestureDetector(onTap: () {Fluttertoast.showToast(msg: descriptions[index]);},child: ClipRRect(
// elevation: 5.0,borderRadius: BorderRadius.circular(6.0),child: Stack(fit: StackFit.expand,children: [Image.asset(images[index], fit: BoxFit.cover),
// decorationBox,],),),),);},itemCount: images.length,//选中时的指示器pagination: new SwiperPagination(builder: DotSwiperPaginationBuilder(color: Colors.black38,activeColor: Colors.white,),margin: const EdgeInsets.only(bottom: 22.0)),control: null,duration: 300,scrollDirection: Axis.horizontal,viewportFraction: 0.95,autoplay: true,onTap: (int index) {Fluttertoast.showToast(msg: &＃39;点击了第$index个&＃39;);},),))],));}Widget _swiperBuilder(BuildContext context, int index) {return (Image.asset(images[index],fit: BoxFit.fill,));}void _goOtherApp(int index) async {const url &＃61; &＃39;https://www.baidu.com&＃39;; //这个url就是由scheme和host组成的 &＃xff1a;scheme://hostif (await canLaunch(url)) {await launch(url);} else {throw &＃39;Could not launch $url&＃39;;}}
}


上面代码中用到了toast&＃xff0c;所以需要添加toast的依赖&＃xff0c;如果点击图片需要跳转H5页面还需要添加url_launcher依赖&＃xff0c;方法与swiper类似&＃xff0c;在pubspec.yaml文件中添加

fluttertoast: ^2.2.11
flutter_swiper: ^1.0.6
url_launcher: ^5.0.3

Swiper基本参数 

分页指示器 pagination

即banner下面的小圆点&＃xff0c;随着banner轮播而滑动

简单的自定义

pagination: new SwiperPagination(builder: DotSwiperPaginationBuilder(color: Colors.black38,activeColor: Colors.white,),margin: const EdgeInsets.only(bottom: 22.0))

完全自定义指示器

new Swiper(...,pagination:new SwiperCustomPagination(builder:(BuildContext context, SwiperPluginConfig config){return new YourOwnPagination();})
);


 控制按钮 control

Swiper的control属性&＃xff0c;也就是banner左右两边的按钮&＃xff0c;它是继承自 SwiperPlugin,设置 new SwiperControl() 展示默认控制按钮

 如果不想要控制按钮&＃xff0c;swiper的control属性设置为null

控制器(SwiperController)

SwiperController 用于控制 Swiper的index属性, 停止和开始自动播放. 通过 new SwiperController() 创建一个SwiperController实例&＃xff0c;并保存&＃xff0c;以便将来能使用。

Swiper的layout属性&＃xff0c;布局

1.SwiperLayout.STACK

注意&＃xff1a;如果使用Swiper的layout属性&＃xff0c;必须要有itemWidth属性&＃xff0c;否则会报错

在原来第二个banner的基础上加上两句代码&＃xff1a;

itemWidth: 300.0,
layout: SwiperLayout.STACK,

2.SwiperLayout.CUSTOM

在原来第三个banner基础上加上以下代码

layout: SwiperLayout.CUSTOM,
customLayoutOption: new CustomLayoutOption(startIndex: -1, stateCount: 3).addRotate([-45.0 / 180, 0.0, 45.0 / 180]).addTranslate([new Offset(-370.0, -40.0),new Offset(0.0, 0.0),new Offset(370.0, -40.0)
]),
itemWidth: 300.0,
itemHeight: 300.0,

3.layout: SwiperLayout.TINDER

在原来第二个banner基础上加上并修改以下代码 &＃xff0c;注意&＃xff1a;itemWidth和itemHeight必须设置&＃xff0c;否则报错

size: Size.fromHeight(280.0),//为了好看点&＃xff0c;修改下高度
//新增以下代码
itemWidth: 350.0,
itemHeight: 250.0,//高度必须设置
layout: SwiperLayout.TINDER