I'm unable to separate my list data using ListView.Separated. All the data is getting displayed without any separator in between them even though I have given a certain width in the separator. Can anyone tell me how I can separate it?

Code:

 Widget uirow3() {
    return Container(
        padding: EdgeInsets.all(15),
        margin: EdgeInsets.only(left: 20, right: 20),
        height: 250,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [Colors.blue.shade200, Colors.blue.shade50]),
            borderRadius: BorderRadius.all(Radius.circular(20)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.1),
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 3),
              )
            ]),
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              child: uirow3data(weatherInfo, index),
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return SizedBox(width: 20);
          },
          itemCount: weatherInfo.weatherListInfo.length,
        ));
  }

CodePudding user response：

try below code hope its helpful to you.refer ListView.separated()

If your ListView is Vertical:

 ListView.separated(
              itemCount: 25,
              separatorBuilder: (BuildContext context, int index) {
                return const Divider(
                  thickness: 1,
                  color: Colors.black,
                );
              },
              shrinkWrap: true,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  width: 100,
                  child: ListTile(
                    title: Text(
                      'item $index',
                    ),
                  ),
                );
              },
            ),

Your result screen using Vertical List->

CodePudding user response：

Use Divider instead of SizedBox as follows:

separatorBuilder: (BuildContext context, int index) {
  return const Divider(
    color: Colors.grey,
    thickness: 1.0,
    height: 1.0,
  );
},

CodePudding user response：

Okay, so I just had to wrap the child where I'm calling the data with a card.