unable to load Image list in carousel

Question

I was trying to pass the image list view in the carousel slider but it is showing errors. all pics are working but due when I pass it in the list it is showing unable to load.

following is the code for the carousel slider -:

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,
      ),
    ),
  );
}

this is showing error-: Not able to load image list ['assets/user1.jpg','assets/f.png','assets/f2.png',]

happy to take advice.

edit -: folder Structure image

i corrected that already but still only 1st image is being displayed in the carousel — palak, Jan 11 '21 at 10:22
is the image displayed in the carousel, is last image from your imgList ? — Mukul, Jan 11 '21 at 11:01
okay, I am writing a solution for this in some time, please try that may it helps. — Mukul, Jan 11 '21 at 11:11

xbadal · Answer 1 · 2021-01-11T11:23:07.740

1

remove ListView widget

and pass this as item in your CarouselSlider item

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(),

edited Jan 11 '21 at 11:23

answered Jan 11 '21 at 10:51

xbadal

1,284
2
11
24

following is the error thrown -: The following _TypeError was thrown building Builder(dirty): type 'String' is not a subtype of type 'int' – palak Jan 11 '21 at 11:06

score 1 · Accepted Answer · answered Jan 11 '21 at 11:21

This is Becuase You were not iterating over the imgList in your Carousel items,

Simply Replace this code with your 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(),
                        ),

Here I have added the imgList in your items of your CarouselSlider, to iterate your CarouselSlider over the imgList items.

thank you this worked i got my error too. – palak Jan 11 '21 at 11:26 — palak, Jan 11 '21 at 11:26

siva · Answer 3 · 2021-01-11T10:50:57.360

0

Have you added assets/user1.jpg,assets/f.png,assets/f2.png in pubspec.yaml

example link: enter link description here

example :

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

edited Jan 11 '21 at 10:50

answered Jan 11 '21 at 07:21

siva

149
1
1
11

still not working ? can you post your image folder structure – siva Jan 11 '21 at 09:53
does folder Structure has to do some thing with this? – palak Jan 11 '21 at 10:04
your code is working for me.Images are loading can you put pubspec.yaml – siva Jan 11 '21 at 10:40

unable to load Image list in carousel

3 Answers3