# Function description:
This article describes how to implement rapid application implementation in the following scenarios:
1. The full-screen carousel image displayed after the App is launched (commonly used to introduce new features of the App), slide left and right to switch images;
2. Banner carousel image (also called carousel header image) based on swiper;
Use the apifm plug-in to quickly implement cloud development:
1. Log in to the developer backend and add/manage your Banner images;
2. Use the apifm plug-in to read the background configuration content;
#Backend configuration
## Open the developer backend for free
["Using apifm plug-in for Flutter cloud development - Installation"](https://www.yuque.com/apifm/doc/hggphs)
## Open the “App Banner Management Interface” module
1. Log in to the "First Step" registration background, left menu --> Factory settings --> Module management
2. Find the “App Banner Management Interface” module, click “Enable Module”, then F5 to refresh the background interface
# apifm usage instructions
## Read Banner list
```javascript
Apifm.banners([Mapparams])
```
Read the Banner data set in the background, which can be used to display App startup images, carousel images, etc.
# Flutter source code
```javascript
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 {
ListimagesList = [];
@override
void initState () {
super.initState();
//Initialize apifm plug-in
Apifm.init("gooking");
//Read startup image data
banners();
}
banners () async {
var res = await Apifm.banners();
if (res['code'] == 0) {
List_imagesList = [];
res['data'].forEach((pic) {
_imagesList.add(pic['picUrl']);
});
setState(() {
imagesList = _imagesList;
});
}
}
@override
Widget build(BuildContext context) {
if (imagesList.length == 0) {
return newScaffold(
body: Container(
color: Colors.grey,
child: Center(
child: Loading(indicator: BallPulseIndicator(), size: 100.0),
),
),
);
} else {
return newScaffold(
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); // You can jump to the main interface based on whether it is the last picture. Generally, a button element will be set on the last picture to guide the user to click
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => IndexPage()),
);
},
),
);
}
}
}
```
**Flutter source code for this example:**
[https://github.com/gooking/apifm-flutter-demo](https://github.com/gooking/apifm-flutter-demo)