1, the introduction of plug-flutter_swiper
flutter most powerful siwiper, multiple layout, unlimited carousel, Android and IOS double-ended adaptation.
Good cow X too, the general dared to use "most" are generally the level of God Great God, after seeing this presentation I also eat a bowl of instant noodles endorsement Jia Ling (half a barrel), pressure of the pressure my excitement.
Flutter_swiper of GitHub address: https: //github.com/best-flutter/flutter_swiper
Understand flutter_swiper, the first thing needed to introduce this plugin again pubspec.yaml file (recorded hours flutter_swiper plug-in version of this article v1.1.6, the future may be updated).
flutter_swiper : ^1.1.6 （记得使用最新版）
With the introduction of click Package get in the top right corner, we will automatically download package.
2, the preparation home carousel effect
We define a new class, of course, you can even play a new file, fully independent. Such a page can be divided into multiple classes, and then by the project leader after finishing unify and integrate.
Of course, there is no need for the practice of each module are divided file a dart, or over chaos, but lower write their own efficiency. So it is written in the same directory as the.
First introduced flutter_swiper plug-in, then you can write a custom carousel class.
New wrote a SwiperDiy class, of course, the class with the static class is entirely possible, this class is in need of a List parameter, so we define a constant swiperDataList, then return a component, this component is actually Swiper components, but we wrapped up in a Container Swiper components outside.
code show as below:
首页轮播组件编写
class SwiperDiy extends StatelessWidget {
final List swiperDataList;
SwiperDiy({Key key,this.swiperDataList}):super(key:key);
@override
Widget build(BuildContext context) {
return Container(
height: 333.0,
child: Swiper(
itemBuilder: (BuildContext context,int index){
return Image.network("${swiperDataList[index]['image']}",fit:BoxFit.fill);
},
itemCount: swiperDataList.length,
pagination: new SwiperPagination(),
autoplay: true,
),
);
}
}
3、FutureBuilder Widget
Flutter This is a built-in component, it is to wait for the asynchronous request. You can now use FuturerBuilder to transform the HomePage class in the build method, to explain the details of the specific code in the video.
code show as below:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('百姓生活+'),),
body:FutureBuilder(
future:getHomePageContent(),
builder: (context,snapshot){
if(snapshot.hasData){
var data=json.decode(snapshot.data.toString());
List<Map> swiperDataList = (data['data']['slides'] as List).cast(); // 顶部轮播组件数
return Column(
children: <Widget>[
SwiperDiy(swiperDataList:swiperDataList ), //页面顶部轮播组件
],
);
}else{
return Center(
child: Text('加载中'),
);
}
},
)
);
}
With this method, we have no need to re-initState, and delete it. All code is as follows:
import 'dart:convert';
import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String homePageContent='正在获取数据';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('百姓生活+'),
),
body:FutureBuilder(
future: getHomePageContent(),
builder: (context,snapshot){
if(snapshot.hasData){
var data = json.decode(snapshot.data.toString());
List<Map> swiper = (data['data']['slides'] as List).cast();
return Column(
children: <Widget>[
SwiperDiy(swiperDataList: swiper,)
],
);
}else{
return Center(
child: Text("加载中"),
);
}
},
)
);
}
}
轮播组件
class SwiperDiy extends StatelessWidget {
final List swiperDataList;
SwiperDiy({Key key,this.swiperDataList}):super(key:key);
@override
Widget build(BuildContext context) {
return Container(
height: 333.0,
child: Swiper(
itemCount: swiperDataList.length,
itemBuilder: (BuildContext context,int index){
return Image.network("${swiperDataList[index]['image']}",fit:BoxFit.fill);
},
pagination: SwiperPagination(),
autoplay: true,
),
);
}
}
Results as shown below:
4. Lessons Learned:
- flutter_Swiper:学习了flutter_swiper组件的简单使用方法，当然你还可以自己学习。
- FutureBuilder: 这个布局可以很好的解决异步渲染的问,实战中我们讲了很多使用的技巧，注意反复学习。
- 自定义类接受参数：我们复习了类接受参数的方法。学会了这个技巧就可以把我们的页面分成很多份，让很多人来进行编写，最后再整合到一起。