功能说明：

本文介绍如何实现以下场景的快速应用实现：

  1. App 启动后展示的全屏轮播图（常见用于介绍App新版功能），左右滑动切换图片；
  2. 基于 swiper 的Banner 轮播图（也叫轮播头图）；

使用 apifm 插件，快速实现云开发：

  1. 登录开发者后台，添加 / 管理你的 Banner 图片；
  2. 使用 apifm 插件读取后台的配置内容；

后台配置

免费开通开发者后台

《使用 apifm 插件进行 Flutter 云开发——安装篇》

开启 “App Banner管理接口” 模块

  1. 登录 “第一步” 注册的后台，左侧菜单 —> 工厂设置 —> 模块管理
  2. 找到 “App Banner管理接口” 模块，点击 “启用模块” ，然后 F5 刷新一下后台界面

apifm 使用说明

读取 Banner 列表

  1. Apifm.banners([Map<String, String> params])

读取后台设置的Banner数据，可用于展示App启动图、轮播图等

Flutter 源码

  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_swiper/flutter_swiper.dart';
  3. import 'package:apifm/apifm.dart' as Apifm;
  4. import 'package:loading/loading.dart';
  5. import 'package:loading/indicator/ball_pulse_indicator.dart';
  6. import './auth/index.dart';
  8. void main() => runApp(new StartPage());
  10. class 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. }
  23. class MyHomePage extends StatefulWidget {
  25.   @override
  26.   _MyHomePageState createState() => new _MyHomePageState();
  27. }
  29. class _MyHomePageState extends State<MyHomePage> {
  30.   List<String> imagesList = [];
  32.   @override
  33.   void initState () {
  34.     super.initState();
  35.     // 初始化 apifm 插件
  36.     Apifm.init("gooking");
  37.     // 读取启动图片数据
  38.     banners();
  39.   }
  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.   }
  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.     }
  85.   }
  86. }

本例 Flutter 源码：

https://github.com/gooking/apifm-flutter-demo