Flutter中轮播图的使用

第三方控件flutter_swiper是一个很优秀的轮播框架

使用步骤

1.添加依赖

dependencies:
  flutter_swiper: ^1.1.6

2.导包

import 'package:flutter_swiper/flutter_swiper.dart';

3.简单使用

new Swiper(
    //自动轮播
    autoplay: true,
    itemBuilder: (BuildContext context, int index) {
        return new Image.network(
            "url",
            fit: BoxFit.fill,
        );
    },
    itemCount: 3,
    //圆形指示器
    pagination: new SwiperPagination(),
    //左右箭头
    control: new SwiperControl(),
)

4.完整代码

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

class DemoPage extends StatefulWidget {
  DemoPage({Key key}) : super(key: key);

  @override
  _DemoPageState createState() {
    return _DemoPageState();
  }
}

class _DemoPageState extends State<DemoPage> {
  List<String> imgUrls = [
    "https://www.itying.com/images/flutter/1.png",
    "https://www.itying.com/images/flutter/2.png",
    "https://www.itying.com/images/flutter/3.png",
    "https://www.itying.com/images/flutter/4.png",
    "https://www.itying.com/images/flutter/5.png"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播组件'),
        centerTitle: true,
      ),
      body: AspectRatio(
        aspectRatio: 16 / 9,
        child: new Swiper(
          //自动轮播
          autoplay: true,
          itemBuilder: (BuildContext context, int index) {
            return new Image.network(
              imgUrls[index],
              fit: BoxFit.fill,
            );
          },
          itemCount: imgUrls.length,
          //圆形指示器
          pagination: new SwiperPagination(),
          //左右箭头
          control: new SwiperControl(),
        ),
      ),
    );
  }
}

赏

谢谢你请我吃糖果