How to create flutter widget list using list builder?

May 21, 2022

I have a items argument where I have to assign list widget, it’s looks like below

items: [
    CachedNetworkImage(
        imageUrl: "https://images.unsplash.com/photo-1534531173927-aeb928d54385?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870",
        height: double.infinity,
        fit: BoxFit.cover,
    ),
    CachedNetworkImage(
        imageUrl: "https://images.unsplash.com/photo-1489824904134-891ab64532f1?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031",
        height: double.infinity,
        fit: BoxFit.cover,
    )
],

Same thing I’m trying by a dynamic list , where my data looks like

List <Carousel> carousels = [
    const Carousel(
        imageUrl: "https://images.unsplash.com/photo-1534531173927-aeb928d54385?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870"
    ),
    const Carousel(
        imageUrl: "https://images.unsplash.com/photo-1489824904134-891ab64532f1?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031"
    ),
    const Carousel(
        imageUrl: "https://images.unsplash.com/photo-1628964178609-aec11c666040?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871"
    ),
    const Carousel(
        imageUrl: "https://images.unsplash.com/photo-1505705694340-019e1e335916?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032"
    ),
];

Now in items I have used list builder to get list widget in items

items: [
            ListView.builder(
                itemCount: carousels.length,
                itemBuilder: (BuildContext context, int index) {
                return CachedNetworkImage(
                    imageUrl: carousels[index].imageUrl,
                    height: double.infinity,
                    fit: BoxFit.cover,
                  );
                },
            ),
 ]

Here I’m getting error Another exception was thrown: Null check operator used on a null value, How can I create widget list in items from carousels list ?

>Solution :

Try this example code:

List<Widget> _listItem = [];

for(var imageWidget in carousels){
   Widget newWidget = CachedNetworkImage(
                    imageUrl: imageWidget.imageUrl,
                    height: double.infinity,
                    fit: BoxFit.cover,
                  );
  _listItem.add(newWidget);
}

items = _listItem;