Flutter使用carousel_pro组件轮播图加载缓慢，如何解决？

问题描述 #

使用carousel_pro: ^1.0.0包实现轮播图时，切换图片会出现1-2秒白屏，图片分辨率已与设备一致，代码如下：

import 'package:flutter/material.dart';
import 'package:mink_app/themes/colors.dart';
import 'package:carousel_pro/carousel_pro.dart';

class CarouselWidget extends StatelessWidget {
  const CarouselWidget({super.key, required this.gender});

  final int gender;

  @override
  Widget build(BuildContext context) {
    List<AssetImage> images;
    if (gender == 0) {
      images = [
        AssetImage("assets/man_promo1.jpg"),
        AssetImage("assets/man_promo2.jpg"),
        AssetImage("assets/man_promo3.jpg")
      ];
    } else {
      images = [
        AssetImage("assets/promo1.jpg"),
        AssetImage("assets/promo2.jpg"),
      ];
    }
    return Carousel(
      images: images, 
      animationCurve: Curves.fastOutSlowIn,
      animationDuration: Duration(
        milliseconds: 800,
      ),
      dotBgColor: Colors.transparent,
      dotIncreasedColor: GREEN_COLOR,
      dotColor: Colors.white,
      dotSize: 5,
      dotVerticalPadding: 50,
    );
  }
}

解决方案 #

1. 预加载图片 #

图片未提前加载是切换时白屏的核心原因，将组件改为StatefulWidget，在初始化阶段预加载所有图片：

class CarouselWidget extends StatefulWidget {
  const CarouselWidget({super.key, required this.gender});

  final int gender;

  @override
  State<CarouselWidget> createState() => _CarouselWidgetState();
}

class _CarouselWidgetState extends State<CarouselWidget> {
  late List<AssetImage> images;

  @override
  void initState() {
    super.initState();
    // 初始化图片列表
    if (widget.gender == 0) {
      images = [
        const AssetImage("assets/man_promo1.jpg"),
        const AssetImage("assets/man_promo2.jpg"),
        const AssetImage("assets/man_promo3.jpg")
      ];
    } else {
      images = [
        const AssetImage("assets/promo1.jpg"),
        const AssetImage("assets/promo2.jpg"),
      ];
    }
    // 预加载所有图片到缓存
    for (var image in images) {
      precacheImage(image, context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Carousel(
      images: images,
      animationCurve: Curves.fastOutSlowIn,
      animationDuration: const Duration(milliseconds: 800),
      dotBgColor: Colors.transparent,
      dotIncreasedColor: GREEN_COLOR,
      dotColor: Colors.white,
      dotSize: 5,
      dotVerticalPadding: 50,
    );
  }
}

2. 优化图片资源 #

即使分辨率匹配设备，过大的图片体积仍会拖慢加载速度：

• 用图片压缩工具（如TinyPNG）压缩JPG文件，降低体积
• 将图片转换为WebP格式，Flutter原生支持，相同画质下体积比JPG小50%左右

3. 替换为维护更活跃的轮播包 #

carousel_pro包已多年未更新，存在性能瓶颈，推荐替换为carousel_slider（目前仍在维护）：

步骤1：添加依赖到pubspec.yaml

dependencies:
  carousel_slider: ^4.2.1

步骤2：重写轮播组件

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:mink_app/themes/colors.dart';

class CarouselWidget extends StatefulWidget {
  const CarouselWidget({super.key, required this.gender});

  final int gender;

  @override
  State<CarouselWidget> createState() => _CarouselWidgetState();
}

class _CarouselWidgetState extends State<CarouselWidget> {
  late List<String> imagePaths;

  @override
  void initState() {
    super.initState();
    // 初始化图片路径
    if (widget.gender == 0) {
      imagePaths = [
        "assets/man_promo1.jpg",
        "assets/man_promo2.jpg",
        "assets/man_promo3.jpg"
      ];
    } else {
      imagePaths = [
        "assets/promo1.jpg",
        "assets/promo2.jpg",
      ];
    }
    // 预加载图片
    for (var path in imagePaths) {
      precacheImage(AssetImage(path), context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        autoPlay: true,
        autoPlayInterval: const Duration(seconds: 3),
        animationDuration: const Duration(milliseconds: 800),
        viewportFraction: 1.0, // 全屏显示
        dotSize: 5,
        activeDotColor: GREEN_COLOR,
        dotColor: Colors.white,
        dotBgColor: Colors.transparent,
        dotVerticalPadding: 50,
      ),
      items: imagePaths.map((path) {
        return Image.asset(
          path,
          fit: BoxFit.cover,
          width: MediaQuery.of(context).size.width,
        );
      }).toList(),
    );
  }
}

内容的提问来源于stack exchange，提问作者Ivan Petrov