Flutter 使用flutter_swiper_null_safety 实现轮播图

Summer不秃

已于 2024-04-08 09:14:45 修改

阅读量462

点赞数 2

分类专栏： Flutter 文章标签： flutter javascript 前端前端框架

于 2024-04-08 08:40:10 首次发布

本文链接：https://blog.csdn.net/z001126/article/details/137490688

版权

Flutter 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Flutter应用中引入并使用`flutter_swiper_null_safety`库来创建轮播图功能，包括在`pubspec.yaml`中添加依赖、配置和实现实例代码。

摘要由CSDN通过智能技术生成

引入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(), //左右箭头
                )
      );
  }
}