目录

引入flutter_swiper_null_safety

在pubspec.yaml文件中dependencies下添加以下依赖

然后执行命令进行下载

 实现轮播图

---

引入flutter_swiper_null_safety

在pubspec.yaml文件中dependencies下添加以下依赖

flutter_swiper_null_safety: ^1.0.2

然后执行命令进行下载

 flutter pub get

 实现轮播图

具体实现代码如下:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_diancan/pages/layout/login_page.dart';
import 'package:flutter_diancan/pages/home/home_page.dart';
import 'package:flutter_diancan/stores/user_store.dart';
import 'package:provider/provider.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';


class Startpage extends StatelessWidget {
  const Startpage({super.key});

  List<Map> imgList = [
    {
      "url":"图片地址"
    },
    {
      "url":"图片地址"
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("轮播图"),
        ),
        body: Swiper(
                  itemCount: imgList.length,
                  itemBuilder: (context, index) {
                    return Image.network(
                      imgList[index].toString(),
                      fit: BoxFit.cover,
                    );
                  },
                  autoplay: true,
                  //自动轮播
                  onIndexChanged: (index) {},
                  //引起下标变化的监听
                  onTap: (index) {},
                  //点击轮播时调用
                  duration: 1000,
                  //切换时的动画时间
                  autoplayDelay: 2000,
                  //自动播放间隔毫秒数.
                  autoplayDisableOnInteraction: false,
                  loop: true,
                  //是否无限轮播
                  scrollDirection: Axis.horizontal,
                  //滚动方向
                  index: 0,
                  //初始下标位置
                  scale: 0.6,
                  //轮播图之间的间距
                  viewportFraction: 0.8,
                  //当前视窗比例，小于1时就会在屏幕内，可以看见旁边的轮播图
                  indicatorLayout: PageIndicatorLayout.COLOR,
                  pagination: new SwiperPagination(),
                  //底部指示器
                  control: new SwiperControl(), //左右箭头
                )
      );
  }
}