功能说明：
本文介绍如何实现以下场景的快速应用实现：
- App 启动后展示的全屏轮播图（常见用于介绍App新版功能），左右滑动切换图片；
- 基于 swiper 的Banner 轮播图（也叫轮播头图）；
使用 apifm 插件，快速实现云开发：
- 登录开发者后台，添加 / 管理你的 Banner 图片；
- 使用 apifm 插件读取后台的配置内容；
后台配置
免费开通开发者后台
《使用 apifm 插件进行 Flutter 云开发——安装篇》
开启 “App Banner管理接口” 模块
- 登录 “第一步” 注册的后台，左侧菜单 --> 工厂设置 --> 模块管理
- 找到 “App Banner管理接口” 模块，点击 “启用模块” ，然后 F5 刷新一下后台界面
apifm 使用说明
读取 Banner 列表
1Apifm.banners([Map<String, String> params])读取后台设置的Banner数据，可用于展示App启动图、轮播图等
Flutter 源码
1import 'package:flutter/material.dart'; 2import 'package:flutter_swiper/flutter_swiper.dart'; 3import 'package:apifm/apifm.dart' as Apifm; 4import 'package:loading/loading.dart'; 5import 'package:loading/indicator/ball_pulse_indicator.dart'; 6import './auth/index.dart'; 7 8void main() => runApp(new StartPage()); 9 10class StartPage extends StatelessWidget { 11 @override 12 Widget build(BuildContext context) { 13 return new MaterialApp( 14 title: 'Apifm HelloWorld', 15 theme: new ThemeData( 16 primarySwatch: Colors.blue, 17 ), 18 home: new MyHomePage(), 19 ); 20 } 21} 22 23class MyHomePage extends StatefulWidget { 24 25 @override 26 _MyHomePageState createState() => new _MyHomePageState(); 27} 28 29class _MyHomePageState extends State<MyHomePage> { 30 List<String> imagesList = []; 31 32 @override 33 void initState () { 34 super.initState(); 35 // 初始化 apifm 插件 36 Apifm.init("gooking"); 37 // 读取启动图片数据 38 banners(); 39 } 40 41 banners () async { 42 var res = await Apifm.banners(); 43 if (res['code'] == 0) { 44 List<String> _imagesList = []; 45 res['data'].forEach((pic) { 46 _imagesList.add(pic['picUrl']); 47 }); 48 setState(() { 49 imagesList = _imagesList; 50 }); 51 } 52 } 53 54 @override 55 Widget build(BuildContext context) { 56 if (imagesList.length == 0) { 57 return new Scaffold( 58 body: Container( 59 color: Colors.grey, 60 child: Center( 61 child: Loading(indicator: BallPulseIndicator(), size: 100.0), 62 ), 63 ), 64 ); 65 } else { 66 return new Scaffold( 67 body: new Swiper( 68 itemBuilder: (BuildContext context,int index){ 69 return new Image.network(imagesList[index],fit: BoxFit.cover,); 70 }, 71 itemCount: imagesList.length, 72 loop: false, 73 pagination: new SwiperPagination(), 74 onTap: (index) { 75 print(index); // 可以根据是否是最后一张图片，来跳转至主界面，一般会在最后一张图片上面设置一个按钮元素，引导用户去点击 76 Navigator.pushReplacement( 77 context, 78 MaterialPageRoute(builder: (context) => IndexPage()), 79 ); 80 }, 81 ), 82 ); 83 } 84 85 } 86}
本例 Flutter 源码：