Flutter如何使用assets目录本地图片实现CarouselSlider轮播

步骤1：配置项目资产声明 #

首先需要在项目根目录的pubspec.yaml文件中声明你存放图片的asset文件夹路径，注意yaml格式严格要求缩进，配置示例如下：

flutter:
  uses-material-design: true
  # 以下为资产配置，和上面的uses-material-design保持2个空格的同级缩进
  assets:
    # 如果你把所有轮播图都放在assets/images/文件夹下，直接声明文件夹路径即可
    - assets/images/
    # 如果是单独存的零散图片，也可以逐个声明路径，比如：
    # - assets/breakfast.jpg

配置完成后在终端执行flutter pub get命令，让配置生效。

步骤2：替换轮播图路径列表 #

把原来代码中存储网络图片链接的列表，替换为你本地图片的实际存放路径，注意路径要和你项目中文件的实际位置、文件名完全匹配：

class _HomePageState extends State<HomePage> {
  // 替换为本地asset图片路径
  final List<String> firstImages = [
    'assets/images/breakfast-5705180.jpg',
    'assets/images/breads-1836411.jpg',
    'assets/images/gelato-3932596.jpg',
    'assets/images/ice-cream-2202561.jpg',
  ];

  // 其余原有代码保持不变
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            CarouselSlider.builder(
              options: CarouselOptions(height: 161),
              itemCount: firstImages.length,
              itemBuilder: (context, index, realIndex) {
                final firstImage = firstImages[index];
                return buildImage(firstImage, index);
              },
            ),
            // 其余组件代码不变

步骤3：替换图片加载组件 #

把原来封装的buildImage方法里的Image.network构造方法，替换为Flutter专门加载本地asset图片的Image.asset构造方法即可，其余布局、样式参数（比如fit、宽高、边距）都可以直接保留：

Widget buildImage(String firstImage, int index) {
  return Container(
    margin: const EdgeInsets.all(20),
    color: Colors.grey,
    child: Image.asset(
      firstImage,
      fit: BoxFit.cover,
      width: 250,
      height: 50,
    )
  );
}

注意事项 #

• 如果配置后出现找不到资源的报错，优先检查pubspec.yaml的缩进是否正确，以及图片路径、文件名大小写是否和代码中写的完全一致
• 资产配置修改后如果热重载加载失败，完全关闭App重新运行即可，资产声明的改动不会被热重载识别

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