Flutter中使用flutter_swiper實現輪播圖

1. 安裝插件

配置flutter_swiper插件

  # 配置輪播圖插件
  flutter_swiper: ^1.1.6

在pubspec.yaml中配置保存後，在VS Code環境中會自動下載依賴包。

如果無法正常下載，執行 flutter pub get 。

2. 引入依賴

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

import 'package:flutter_swiper/flutter_swiper.dart';

3. 使用插件

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. 完整示例

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

效果圖如下：

實現一個扇形輪播圖，代碼如下：

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

效果圖如下：


參考：GitHub - best-flutter/flutter_swiper: The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.