【flutter 轮播图】

1. 安装插件

配置flutter_swiper插件。

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环境中会自动下载依赖包。

2. 引入依赖

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

import 'package:flutter_swiper/flutter_swiper.dart';

3. 完整示例

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,
                            ),  
                        ),
                    )
                ]
            )
        );
    }
}

效果图如下：