flutter: space between horizontal listView items

user_14554449 0
Viewed 8825

i'm trying to implement horizontal list view in flutter and it's working good but products are too attached to each others, is there a way to put space between them ? thanks in advance

 Row(
  children: <Widget>[

                 Expanded(
          child: SizedBox(
      child: FutureBuilder(
        future: httpService.getProducts(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.data == null) {
            return Container(
              child: Center(
                child: Text('Loading...'),
              ),
            );
          } 
          else if (snapshot.data.length == 0){
            return Container(
              child: Center(
                child: Center(
                  child: Text('No offers'),
                ),
              ),
            );
          } else {
            return ListView.builder(
          
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              itemCount: snapshot.data.length,
           
              itemBuilder: (ctx, i) => (AlAinPdtItem(
                  title: snapshot.data[i].title,
                  imgUrl: snapshot.data[i].imgUrl,
                  price: snapshot.data[i].price,
                  pdt2: snapshot.data[i])),
            );
          }
        },
                 )))])
              ],
            ),
          ),

flutter
2 Answers

To add space between the items, these are 2 solutions:

  • First (recommended), replace your ListView.builder by a ListView.separated, and add the tag separatorBuilder.

Example, to add a space between each item:

return ListView.separated(
   separatorBuilder: (BuildContext context, int index) {
      return SizedBox(height: 3);
   },
   scrollDirection: Axis.horizontal,
   shrinkWrap: true,
   itemCount: snapshot.data.length,
   itemBuilder: (ctx, i) => (AlAinPdtItem(
      title: snapshot.data[i].title,
      imgUrl: snapshot.data[i].imgUrl,
      price: snapshot.data[i].price,
      pdt2: snapshot.data[i])),
);

You can replace the SizedBox by a Divider, or any widget you need. The advantage of this solution is that it will add a separator between each item, and won't add an extra one at the end.

  • Second option, if you really need to keep the ListView.builder, wrap your widget AlAinPdtItem in a Padding:
return ListView.builder(
   scrollDirection: Axis.horizontal,
   shrinkWrap: true,
   itemCount: snapshot.data.length,
   itemBuilder: (ctx, i) => (Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 0, 10),
      child: AlAinPdtItem(
         title: snapshot.data[i].title,
         imgUrl: snapshot.data[i].imgUrl,
         price: snapshot.data[i].price,
         pdt2: snapshot.data[i])),
      ),
);

The drawback of this is that the Padding will be added on each item, which means that the last item will have an extra space (10px in this case) afterwards.

user_123797110

Or if you don't want to use ListView.separated(), you can add your own spacings like this:

ListView(
  children: myListTiles.expand((tile) => [tile, SizedBox(height: 12)]).toList()..removeLast()
)

(Edit: The ..removeLast() only works if your list is non-empty, so maybe not the perfect solution)

user_124410190
Related