当前位置: 首页 > 工具软件 > apifm-flutter > 使用案例 >

使用 apifm 插件进行 Flutter 云开发——Banner / 启动轮播图 / swiper 轮播图

洪胜涝
2023-12-01

功能说明:

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

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

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

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

后台配置

免费开通开发者后台

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

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

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

apifm 使用说明

读取 Banner 列表

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

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

Flutter 源码

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:apifm/apifm.dart' as Apifm;
import 'package:loading/loading.dart';
import 'package:loading/indicator/ball_pulse_indicator.dart';
import './auth/index.dart';

void main() => runApp(new StartPage());

class StartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Apifm HelloWorld',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> imagesList = [];

  @override
  void initState () {
    super.initState();
    // 初始化 apifm 插件
    Apifm.init("gooking");
    // 读取启动图片数据
    banners();
  }

  banners () async {
    var res = await Apifm.banners();
    if (res['code'] == 0) {
      List<String> _imagesList = [];
      res['data'].forEach((pic) {
        _imagesList.add(pic['picUrl']);
      });
      setState(() {
        imagesList = _imagesList;
      });
    }
  }
  
  @override
  Widget build(BuildContext context) {
    if (imagesList.length == 0) {
      return new Scaffold(
        body:  Container(
          color: Colors.grey,
          child: Center(
            child: Loading(indicator: BallPulseIndicator(), size: 100.0),
          ),
        ),
      );
    } else {
      return new Scaffold(
        body:  new Swiper(
          itemBuilder: (BuildContext context,int index){
            return new Image.network(imagesList[index],fit: BoxFit.cover,);
          },
          itemCount: imagesList.length,
          loop: false,
          pagination: new SwiperPagination(),
          onTap: (index) {
            print(index); // 可以根据是否是最后一张图片,来跳转至主界面,一般会在最后一张图片上面设置一个按钮元素,引导用户去点击
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => IndexPage()),
            );
          },
        ),
      );
    }
    
  }
}

本例 Flutter 源码:

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

 类似资料: