5.首页轮播图

轮播图框架（GitHub搜索）
flutter_swiper : ^1.1.6

静态轮播图

34bb2482d78b1e79e2626cf7aaead07.png

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:convert';


class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('百姓生活+'),
        ),
        body:new SwiperDiy()
  );
  }
}


// 首页轮播组件编写
class SwiperDiy extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return Container(
      height: 300.0,
      child: Swiper(
        itemCount: 3,
        itemBuilder: (BuildContext context,int index){
          return Image.network("http://via.placeholder.com/350x150",fit: BoxFit.fill);
        },
        pagination: SwiperPagination(),//轮播图小点
        autoplay: true,//自动播放
      ),
    );
  }
}

根据网络请求数据动态加载轮播图

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:convert';


class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {
  
  @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('加载中'),
              );
            }
          },
        )
    );
  }
}


// 首页轮播组件编写
class SwiperDiy extends StatelessWidget {

  final List swiperDataList;
  SwiperDiy({Key key,this.swiperDataList}):super(key:key);

  @override
  Widget build(BuildContext context){
    return Container(
      height: 300.0,
      child: Swiper(
        itemCount: 3,
        itemBuilder: (BuildContext context,int index){
          return Image.network("http://via.placeholder.com/350x150",fit: BoxFit.fill);
        },
        pagination: SwiperPagination(),//轮播图小点
        autoplay: true,//自动播放
      ),
    );
  }
}