輪播圖插件swiper，Futter基礎第20篇： 實現輪播圖 flutter_swiper

效果圖：

圖1

圖2

圖3

輪播圖插件swiper，圖4

圖5

第三方庫參考：https://pub.dev/packages/flutter_swiper

配置 pubspec.yaml

css實現自動輪播圖、在需要輪播的類引入，包名：

import ‘package:flutter_swiper/flutter_swiper.dart’;

圖1、圖2代碼：

import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';class SwiperPage extends StatefulWidget {@override_SwiperPageState createState() => _SwiperPageState();
}class _SwiperPageState extends State<SwiperPage> {List<Map> imgList = [     //設置: 輪播圖的圖片素材{"url":"https://www.itying.com/images/flutter/1.png"},{"url":"https://www.itying.com/images/flutter/2.png"},{"url":"https://www.itying.com/images/flutter/3.png"},{"url":"https://www.itying.com/images/flutter/4.png"},];@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('輪播圖組件演示'),),body: Column(children: <Widget>[/*** 必須要套Container，才能使用輪播圖，否則會報錯*/Container(
//           height: 150,/*** 用AspectRatio套住輪播圖組件是為了讓圖片不變形，根據手機屏幕寬高比自適應，效果最佳*/
//            width: double.infinity,   還是會變形的話就加上這句child: AspectRatio(aspectRatio: 16/9,child:    Swiper(itemBuilder: (BuildContext context,int index){    //每次循環遍歷時，將i賦值給indexreturn new Image.network(imgList[index]['url'],fit: BoxFit.fill,);},itemCount: imgList.length,pagination: new SwiperPagination(), //設置：分頁器.loop: true,   //無限循環autoplay: true, //圖片自動輪播
//                control: new SwiperControl(),   //設置：左右的箭頭),),)],));}
}

圖3代碼

import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';class SwiperPage extends StatefulWidget {@override_SwiperPageState createState() => _SwiperPageState();
}class _SwiperPageState extends State<SwiperPage> {List<Map> imgList = [     //設置: 輪播圖的圖片素材{"url":"https://www.itying.com/images/flutter/1.png"},{"url":"https://www.itying.com/images/flutter/2.png"},{"url":"https://www.itying.com/images/flutter/3.png"},{"url":"https://www.itying.com/images/flutter/4.png"},];@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('輪播圖組件演示'),),body: Column(children: <Widget>[/*** 必須要套Container，才能使用輪播圖，否則會報錯*/Container(
//           height: 150,/*** 用AspectRatio套住輪播圖組件是為了讓圖片不變形，根據手機屏幕寬高比自適應，效果最佳*/
//            width: double.infinity,   還是會變形的話就加上這句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(
//                      color: Colors.grey,   設置：輪播圖背景child: new Center(child: Image.network(imgList[index]['url'],fit: BoxFit.contain,),),);},itemCount: imgList.length)),)],));}
}

圖4、圖5代碼

import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';class SwiperPage extends StatefulWidget {@override_SwiperPageState createState() => _SwiperPageState();
}class _SwiperPageState extends State<SwiperPage> {List<Map> imgList = [     //設置: 輪播圖的圖片素材{"url":"https://www.itying.com/images/flutter/1.png"},{"url":"https://www.itying.com/images/flutter/2.png"},{"url":"https://www.itying.com/images/flutter/3.png"},{"url":"https://www.itying.com/images/flutter/4.png"},];@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('輪播圖組件演示'),),body: Swiper(itemBuilder: (BuildContext context,int index){    //每次循環遍歷時，將i賦值給indexreturn new Image.network(imgList[index]['url'],fit: BoxFit.fill,);},itemCount: imgList.length,
//        pagination: new SwiperPagination(), 設置：分頁器
//        control: new SwiperControl(),   設置：左右的箭頭),);}
}