Flutter中使用flutter_swiper实现轮播图

1. 安装插件

配置flutter_swiper插件。

代码语言：javascript复制

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  date_format: ^1.0.6
  flutter_cupertino_date_picker: ^1.0.26 2 

  # 配置轮播图插件
  flutter_swiper: ^1.1.6

在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

2. 引入依赖

在需要用到的该插件文件中引入插件包。

代码语言：javascript复制

import 'package:flutter_swiper/flutter_swiper.dart';

3. 使用插件

代码语言：javascript复制

List<Map> imageList = [
    {
        "url":"http://www.itying.com/images/flutter/1.png"
    },
    {
        "url":"http://www.itying.com/images/flutter/2.png"
    },
    {
        "url":"http://www.itying.com/images/flutter/3.png"
    },
    {
        "url":"http://www.itying.com/images/flutter/4.png"
    }
];

new Swiper(
    itemBuilder: (BuildContext context,int index){
        // 配置图片地址
        return new Image.network(imageList[index]["url"],fit: BoxFit.fill,);
    },
    // 配置图片数量
    itemCount: imageList.length ,
    // 底部分页器
    pagination: new SwiperPagination(),
    // 左右箭头
    control: new SwiperControl(),
    // 无限循环
    loop: true,
    // 自动轮播
    autoplay: true,
),  

4. 完整示例

代码语言：javascript复制

import 'package:flutter/material.dart';

// 引入轮播图插件
import 'package:flutter_swiper/flutter_swiper.dart';


class SwiperPage extends StatefulWidget {
    SwiperPage({Key key}) : super(key: key);
    @override
    _SwiperPageState createState() => _SwiperPageState();
}

class _SwiperPageState extends State<SwiperPage> {

    // 轮播图片
List<Map> imageList = [
    {
        "url":"http://www.itying.com/images/flutter/1.png"
    },
    {
        "url":"http://www.itying.com/images/flutter/2.png"
    },
    {
        "url":"http://www.itying.com/images/flutter/3.png"
    },
    {
        "url":"http://www.itying.com/images/flutter/4.png"
    }
];
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("Swiper")),
            body:Column(
                children:<Widget>[
                    Container(
                        width: double.infinity,
                        child: AspectRatio(
                            // 配置宽高比
                            aspectRatio: 16/9,
                            child: new Swiper(
                                itemBuilder: (BuildContext context,int index){
                                    // 配置图片地址
                                    return new Image.network(imageList[index]["url"],fit: BoxFit.fill,);
                                },
                                // 配置图片数量
                                itemCount: imageList.length ,
                                // 底部分页器
                                pagination: new SwiperPagination(),
                                // 左右箭头
                                control: new SwiperControl(),
                                // 无限循环
                                loop: true,
                                // 自动轮播
                                autoplay: true,
                            ),  
                        ),
                    )
                ]
            )
        );
    }
}

效果图如下：

实现一个扇形轮播图，代码如下：

代码语言：javascript复制

import 'package:flutter/material.dart';

// 引入轮播图插件
import 'package:flutter_swiper/flutter_swiper.dart';


class SwiperPage extends StatefulWidget {
    SwiperPage({Key key}) : super(key: key);
    @override
    _SwiperPageState createState() => _SwiperPageState();
}

class _SwiperPageState extends State<SwiperPage> {

    // 轮播图片
    List<Map> imageList = [
        {
            "url":"http://www.itying.com/images/flutter/1.png"
        },
        {
            "url":"http://www.itying.com/images/flutter/2.png"
        },
        {
            "url":"http://www.itying.com/images/flutter/3.png"
        },
        {
            "url":"http://www.itying.com/images/flutter/4.png"
        }
    ];
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("Swiper")),
            body:Column(
                children:<Widget>[
                    Container(
                        child: AspectRatio(
                            aspectRatio: 16 / 9,
                            child: new Swiper(
                                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: 200.0,
                                itemBuilder: (context, index) {
                                    return new Container(
                                        child: new Center(
                                            // 配置图片地址
                                            child: Image.network(imageList[index]['url'],fit: BoxFit.contain,)
                                        ),
                                    );
                                },
                                // 配置图片数量
                                itemCount: imageList.length
                            ),
                        ),
                    )
                ]
            )
        );
    }
}

效果图如下：

参考：https://github.com/best-flutter/flutter_swiper

flutter ios android

0 人点赞