Flutter 用flutter_swiper_null_safety插件实现轮播图

插件介绍和安装

1. flutter_swiper_null_safety 插件：一个实现轮播图效果的插件
2. 安装 flutter_swiper_null_safety 插件：
   • pubspec.yaml文件中，安装方式如下
   • flutter_swiper_null_safety: ^1.0.2

插件使用

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF7F7F8),
      appBar: AppBar(title: Text('首页')),
      body: CustomScrollView(
        slivers: [
          // 轮播图
          SliverToBoxAdapter(
            child: Padding(
              padding: EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
              child: imageBanners != null
                  ? Container(
                      height: 140.0,
                      // 设置圆角 并 切割出来
                      decoration: BoxDecoration(borderRadius: BorderRadius.circular(4.0)),
                      clipBehavior: Clip.antiAlias,
                      child: Swiper(
                        itemBuilder: (BuildContext context, int index) {
                          ImageBannersModel imageBannersModel = imageBanners![index];
                          return Image.network(
                            imageBannersModel.imgUrl!,
                            fit: BoxFit.cover,
                          );
                        },
                        itemCount: imageBanners!.length,
                        // 自动播放
                        autoplay: true,
                        // 指示器
                        pagination: SwiperPagination(),
                      ),
                    )
                  : Container(),
            ),
          ),
        ],
      ),
    );
  }

插件封装

image_swiper_widget.dart

import 'package:erabbit_app/models/home_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

class ImageSwiperWidget extends StatelessWidget {
  // ignore: prefer_const_constructors_in_immutables
  ImageSwiperWidget({
    this.imageBanners,
    this.height,
    this.borderRadius = 4.0,
  });
  // 轮播图数据
  final List<ImageBannersModel>? imageBanners;
  // 高度
  final double? height;
  // 圆角
  final double? borderRadius;

  @override
  Widget build(BuildContext context) {
    return imageBanners != null
        ? Container(
            height: height,
            // 设置圆角 并 切割出来
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(borderRadius!)),
            clipBehavior: Clip.antiAlias,
            child: Swiper(
              itemBuilder: (BuildContext context, int index) {
                ImageBannersModel imageBannersModel = imageBanners![index];
                return Image.network(
                  imageBannersModel.imgUrl!,
                  fit: BoxFit.cover,
                );
              },
              itemCount: imageBanners!.length,
              // 自动播放
              autoplay: true,
              // 指示器
              pagination: SwiperPagination(),
            ),
          )
        : Container(
            height: height,
            alignment: Alignment.center,
            decoration: BoxDecoration(color: Color(0xFFEBEBEB), borderRadius: BorderRadius.circular(borderRadius!)),
            clipBehavior: Clip.antiAlias,
            child: Image.asset('assets/placeholder.png'),
          );
  }
}

home.dart

...
// 轮播图
SliverToBoxAdapter(
    child: Padding(
      padding: EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
      child: ImageSwiperWidget(
        imageBanners: imageBanners,
        height: 140.0,
      ),
    ),
),
...

实现效果