Flutter实现轮播图功能

一、在pubspec.yaml中添加:

dart 复制代码
dependencies:
  # 轮播图
  card_swiper: ^3.0.1

card_swiper: ^3.0.1,要获取最新版本:https://pub-web.flutter-io.cn/packages/card_swiper/versions,这个里面有文档可以看,如下图:

打开Versions看看文档 ,如下图:


二、在项目下的assets\images上添加图标,然后在pubspec.yaml上配置:

三、完整代码实现:

dart 复制代码
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            SizedBox(
              height: 200,
              child: CustomSwiper(),
            ),
          ],
        ),
      ),
    );
  }
}

//custom swiper
class CustomSwiper extends StatefulWidget {
  @override
  _CustomSwiperState createState() => _CustomSwiperState();
}

class _CustomSwiperState extends State<CustomSwiper> {
  List banner = [
    {"imagePath": 'assets/images/banner1.png'},
    {"imagePath": 'assets/images/banner2.png'},
    {"imagePath": 'assets/images/banner3.png'},
  ];

  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.asset(
          banner[index]['imagePath'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: banner.length,
      autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      // control: const SwiperControl(),//< >
    );
  }
}

运行程序效果:

相关推荐
程序员老刘·1 天前
Flutter版本选择指南:避坑3.27 | 2025年9月
flutter·跨平台开发·客户端开发
懒得不想起名字1 天前
Flutter二维码的生成和扫描
flutter
鹏多多1 天前
flutter-详解控制组件显示的两种方式Offstage与Visibility
前端·flutter
猪哥帅过吴彦祖1 天前
Flutter 系列教程:常用基础组件 (上) - `Text`, `Image`, `Icon`, `Button`
android·flutter·ios
恋猫de小郭1 天前
Fluttercon EU 2025 :Let's go far with Flutter
android·前端·flutter
小李飞刀李寻欢1 天前
flutter 详细解读
flutter
QQ12958455042 天前
错误解决:Flutter找不到合适的Visual Studio 工具链
flutter·visual studio
程序员老刘2 天前
Flutter版本选择指南:避坑3.27 | 2025年9月
flutter·客户端
清风细雨_林木木2 天前
flutter 里面的渐变色设置
前端·flutter