Flutter 实现轮播图banner

 先上效果图：

flutter的Swiper控件，实现无线轮播：

1.准备

首先打开pubspec.yaml文件，添加控件依赖

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

运行命令：flutter packages get 

2.使用

完整的dart代码

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:fluttertoast/fluttertoast.dart';

final List images = [
  'images/viewpage_ima1.jpg',
  'images/viewpage_ima2.jpg',
  'images/viewpage_ima3.jpeg',
  'images/viewpage_ima4.jpg',
  'images/icon_bg.jpg',
];

final List descriptions = [
  '莲，出淤泥而不染',
  '社会我宝姐，人美路子野',
  '周五快到了，准备追更新',
  '送你一辆奥迪',
  '我家狗狗好看吗',
];
class MySwiperPage extends StatefulWidget {
  @override
  SwiperPageState createState() {
    return SwiperPageState();
  }
}
class SwiperPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播组件'),
      ),
      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: '点击了第$index个');
                },
              )),
          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: '点击了第$index个');
                  },
                ),
              )),
          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: '点击了第$index个');
                  },
                ),
              ))
        ],
      )
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (Image.asset(
      images[index],
      fit: BoxFit.fill,
    ));
  }

  void _goOtherApp(int index) async {
    const url = 'https://www.baidu.com'; //这个url就是由scheme和host组成的 ：scheme://host
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

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

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

Swiper基本参数 

参数	默认值	描述
scrollDirection	Axis.horizontal	滚动方向，设置为Axis.vertical如果需要垂直滚动
loop	true	无线轮播模式开关
index	0	初始的时候下标位置
autoplay	false	自动播放开关
autoplayDely	3000	自动播放延迟毫秒数
autoplayDiableOnInteraction	true	当用户拖拽的时候，是否停止自动播放.
onIndexChanged	void onIndexChanged(int index)	当用户手动拖拽或者自动播放引起下标改变的时候调用
onTap	void onTap(int index)	当用户点击某个轮播的时候调用
duration	300.0	动画时间，单位是毫秒
pagination	null	设置 new SwiperPagination() 展示默认分页指示器
control	null	设置 new SwiperControl() 展示默认分页按钮

 

 

 

 

 

 

 

 

 

 

 

分页指示器 pagination

即banner下面的小圆点，随着banner轮播而滑动

参数	默认值	描述
alignment	Alignment.bottomCenter	如果要将分页指示器放到其他位置，那么可以修改这个参数
margin	const EdgeInsets.all(10.0)	分页指示器与容器边框的距离
builder	SwiperPagination.dots	目前已经定义了两个默认的分页指示器样式： SwiperPagination.dots 、 SwiperPagination.fraction，都可以做进一步的自定义.

 

 

 

 

 

 

简单的自定义

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属性，也就是banner左右两边的按钮，它是继承自 SwiperPlugin,设置 new SwiperControl() 展示默认控制按钮

 如果不想要控制按钮，swiper的control属性设置为null

参数	默认值	描述
iconPrevious	Icons.arrow_back_ios	上一页的IconData
iconNext	Icons.arrow_forward_ios	下一页的IconData
color	Theme.of(context).primaryColor	控制按钮颜色
size	30.0	控制按钮大小
padding	const EdgeInsets.all(5.0)	控制按钮与容器的距离

 

 

 

 

 

 

 

控制器(SwiperController)

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

方法	描述
void move(int index, {bool animation: true})	移动到指定下标，设置是否播放动画
void next({bool animation: true})	下一页
void previous({bool animation: true})	上一页
void startAutoplay()	开始自动播放
void stopAutoplay()	停止自动播放

 

 

 

 

 

 

Swiper的layout属性，布局

1.SwiperLayout.STACK

注意：如果使用Swiper的layout属性，必须要有itemWidth属性，否则会报错

在原来第二个banner的基础上加上两句代码：

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基础上加上并修改以下代码 ，注意：itemWidth和itemHeight必须设置，否则报错

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