Flutter 02 创建轮播图

轮播图，我们使用一个轮播组件flutter_swiper，来到 https://pub.dev/flutter/packages ，搜索flutter_swiper 即可找到它。

安装

现在让我们来安装这个插件:

//pubspec.yaml
dependencies:
  flutter_swiper: ^1.1.6

输入安装包的命令：

flutter pub get

在首页中引入这个插件

//lib/pages/home_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

添加图片数据

//lib/pages/home_page.dart
....
class _HomePageState extends State<HomePage>{
  //轮播图的图片地址
  List _imageUrls=[
    'http://tcode.net/images/blogupload/timg201908190221.jpeg',
    'http://tcode.net/images/blogupload/20190501images.jpeg',
    'http://tcode.net/images/blogupload/symfony-ubuntu-apachepng-450x191.png'
  ];

编写轮播器

//lib/pages/home_page.dart
  ....
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              height: 160,
              child: Swiper(  //这里是我们的轮播图
                itemCount: _imageUrls.length, //轮播图数量
                autoplay: true, //自动播放
                itemBuilder: (BuildContext context,int index){  //在这个里面编写展示的每个内容
                  return Image.network( //通过远程链接获取图片
                    _imageUrls[index], //获取图片url
                    fit: BoxFit.fill,  //展示方式：充满父容器
                  );
                },
                pagination: SwiperPagination(), //添加轮播下方的小点
              ),
            )
          ],
        ),
      )
    );
  }

我们移除了之前的Text("首页")，将他替换成了上面的代码。Swiper就是我们的轮播图组件，和listview一样他也需要一个itemBuilder来定义循环输出的内容。