Ad

Unable To Load Image List In Carousel

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 enter image description here

enter image description here

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad