无法在轮播中加载图像列表

Question

我试图在轮播滑块中传递图像列表视图，但它显示错误。所有照片都有效，但是当我在列表中传递它时，它显示无法加载。

以下是轮播滑块的代码-:

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';



class UserProfile extends StatefulWidget {
  UserProfile() : super();

  @override
  _UserProfileState createState() => _UserProfileState();
}

class _UserProfileState extends State<UserProfile> {


  CarouselSlider carouselSlider;

  List imgList = [
    'assets/user1.jpg',
    'assets/f.png',
    'assets/f2.jpg',
  ];




  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(),
      body: Container(
        child: Padding(
          padding: const EdgeInsets.only(left: 30, right: 30, top: 10),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [


                Flexible(
                  fit: FlexFit.loose,
                  flex: 5,
                  child: Container(
                    height: 400,
                    child: ListView.builder(
                      itemCount: imgList.length,
                      itemBuilder: (BuildContext context, int index){
                        return Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[


                            CarouselSlider(
                                options: CarouselOptions(
                                  height: 385.0,
                                  enlargeCenterPage: true,
                                  autoPlay: true,
                                  aspectRatio: 16 / 9,
                                  autoPlayCurve: Curves.easeInBack,
                                  enableInfiniteScroll: true,
                                  autoPlayAnimationDuration: Duration(milliseconds: 900),
                                  viewportFraction: 0.8,
                                ),
                                items: [
                                  Padding(
                                    padding: const EdgeInsets.only(left: 30.0),
                                    child: Container(
                                      height: 250,
                                      margin: EdgeInsets.symmetric(vertical: 0),
                                      decoration: BoxDecoration(
                                        color: Colors.black,
                                        borderRadius: BorderRadius.circular(16),
                                        boxShadow: [
                                          BoxShadow(
                                            color: Colors.blueGrey[100],
                                            blurRadius: 3,
                                            spreadRadius: 3,
                                          ),
                                        ],
                                      ),
                                      child: Image.asset(
                                        '${imgList[index]}',
                                        fit: BoxFit.fill,
                                      ),
                                    ),
                                  ),
                                ]
                            ),


                          ],
                        );
                      },
                    ),
                  ),
                ),


                Flexible(
                  fit: FlexFit.loose,
                  flex: 4,
                  child: Placeholder(),
                ),

              ],
            ),
          ),
        ),
      ),
    );
  }



  Widget buildAppBar() => AppBar(
    elevation: 15,
    backgroundColor: Colors.white,
    centerTitle: true,
    leading: InkWell(
      child: Icon(
        Icons.arrow_back_ios,
        color: Colors.pinkAccent,
      ),
      onTap: () {
        Navigator.pop(context);
      },
    ),
    title: Text(
      'Carousel Slider',
      style: TextStyle(
        fontSize: 25,
        color: Colors.black,
      ),
    ),
  );
}

这显示错误-: 无法加载图像列表 ['assets/user1.jpg','assets/f.png','assets/f2.png',]

乐于接受建议。

edit -:文件夹结构图片

Answer 1

你在pubspec.yaml

中添加了assets/user1.jpg,assets/f.png,assets/f2.png了吗

示例link：

示例：

assets:
- assets/user1.jpg
- assets/f.png
- assets/f2.png

Answer 2

删除 ListView 小部件

并将此作为项目传递到您的 CarouselSlider 项目

items: imgList.map((item) {
return Builder(
builder: (BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Container(
height: 250,
margin: EdgeInsets.symmetric(vertical: 0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.blueGrey[100],
blurRadius: 3,
spreadRadius: 3,
),
],
),
child: Image.asset(
item,
fit: BoxFit.fill,
),
),
),
},
);
}).toList(),

Answer 3

这是因为您没有迭代 Carousel 项中的 imgList，

只需用您的CarouselSlider

替换此代码

                        CarouselSlider(
                          options: CarouselOptions(
                            height: 385.0,
                            enlargeCenterPage: true,
                            autoPlay: true,
                            aspectRatio: 16 / 9,
                            autoPlayCurve: Curves.easeInBack,
                            enableInfiniteScroll: true,
                            autoPlayAnimationDuration:
                                Duration(milliseconds: 900),
                            viewportFraction: 0.8,
                          ),
                          items: imgList.map((item) {
                            return Padding(
                              padding: const EdgeInsets.only(left: 30.0),
                              child: Container(
                                height: 250,
                                margin: EdgeInsets.symmetric(vertical: 0),
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(16),
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.blueGrey[100],
                                      blurRadius: 3,
                                      spreadRadius: 3,
                                    ),
                                  ],
                                ),
                                  child: Image.asset(
                                    '$item',
                                    fit: BoxFit.fill,
                                  ),
                              ),
                            );
                          }).toList(),
                        ),

在这里，我在 CarouselSlider 的 items 中添加了 imgList，以在 imgList 项上迭代 CarouselSlider。

无法在轮播中加载图像列表

unable to load Image list in carousel

carousel

flutter

flutter-dependencies

flutter-layout