"api工厂" 使用手册

api接口开箱即用,云后台管理,助力前端,解放后端开发;

不懂编程也能独立开发应用,小步快跑,快速创业!

旨为更懂你!

Banner / 启动图 / Swiper

功能说明:


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


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


使用 apifm 插件,快速实现云开发:


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


后台配置


免费开通开发者后台


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


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


  1. 登录 “第一步” 注册的后台,左侧菜单 --> 工厂设置 --> 模块管理
  2. 找到 “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 源码:


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