Flutter实现图片轮播carousel slider实例竟然是如此简单

开篇寄语

伯衡君发现很多App会有首页的轮播图，Flutter制作的App自然也有这个组件，不过这个需要安装第三方支撑库，实现图片的轮播效果，这个组件的名称是carousel_slider，可以从pub.dev上找到资料，本篇就是以这个组件为实例，来实现图片轮播效果。

相关内容

• 《Flutter给文本输入框添加实时计算输入字母的长度》
• 《Flutter制作弹出框背景是磨砂特效Blur Effects的例子》
• 《Flutter有关ColorFiltered一些有趣实例，图片变色大不同》
• 《Flutter制作自己的第一个全平台APP学习之实用功能篇》
• 《Flutter制作自己的第一个全平台APP学习之Widgets篇》

内容详情

以下内容大多是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

想要实现图片轮播，可以使用carousel_slider这个组件，安装和使用文档，可以参看这个地址：carousel_slider，安装完成后，试举例如下：

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

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

class _HomePageState extends State<HomePage> {
  final List data = [
    {
      "title": "Image 1",
      "url":
          "https://images.pexels.com/photos/1525043/pexels-photo-1525043.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
    {
      "title": "Image 2",
      "url":
          "https://images.pexels.com/photos/1525042/pexels-photo-1525042.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
    {
      "title": "Image 3",
      "url":
          "https://images.pexels.com/photos/1525041/pexels-photo-1525041.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
    {
      "title": "Image 4",
      "url":
          "https://images.pexels.com/photos/1525044/pexels-photo-1525044.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
    {
      "title": "Image 5",
      "url":
          "https://images.pexels.com/photos/1525045/pexels-photo-1525045.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
    {
      "title": "Image 6",
      "url":
          "https://images.pexels.com/photos/1525046/pexels-photo-1525046.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Column(
        children: [
          CarouselSlider(
            options: CarouselOptions(
              autoPlay: true,
              autoPlayInterval: Duration(seconds: 2),
              autoPlayAnimationDuration: Duration(milliseconds: 400),
              height: 300,
            ),
            items: data.map((item) {
              return GridTile(
                child: Image.network(item["url"], fit: BoxFit.cover),
                footer: Container(
                    padding: EdgeInsets.all(15),
                    color: Colors.black54,
                    child: Text(
                      item["title"],
                      style: TextStyle(color: Colors.white, fontSize: 20),
                      textAlign: TextAlign.right,
                    )),
              );
            }).toList(),
          ),
          SizedBox(height: 30),
          Text(
            'Other Content',
            style: TextStyle(
              fontSize: 24,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

生成效果如下图所示：