代码：

import 'package:flutter/material.dart'; import '../service/service_method.dart'; import 'package:flutter_swiper/flutter_swiper.dart'; import 'dart:convert'; class SwiperDemo extends StatelessWidget { const SwiperDemo({Key key}) : super(key: key);
@override Widget build(BuildContext context) { return Container( child: FutureBuilder(//网络数据返回能很好的渲染控件 future: getHomePageContent(),//网络返回的数据 builder: (context,snapshot){ if (snapshot.hasData) {//snapshot 相当于返回的数据 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({this.swiperDataList});//可以省去:super（key : key） @override Widget build(BuildContext context) { return Container( height: 200.0, child: Swiper( itemBuilder: (BuildContext context, int index){ return Image.network("${swiperDataList[index]['image']}",fit: BoxFit.fill,); }, itemCount: swiperDataList.length, pagination: SwiperPagination(),//下面的索引元素 autoplay: true, ), ); } } 总结： <style></style>

轮播图控件 flutter_swiper

 

先在pubspec.yaml导入flutter_swiper

和 list 用法差不多

Swiper(

itemBuilder:(BuildContext context, int  index){

return  xxx//xx是控件 一般是Image

}

itemCount : //个数

pagination:SwiperPagination();//索引元素

autoplay：//是否自动滚动

height://高度

)