Flutter 使用flutter_swiper_null_safety 实现轮播图

目录

引入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":"图片地址"}];@overrideWidget 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(), //左右箭头));}
}