Flutter: ListView.Separated set height

445

Thanks all for the help, just realize that Divider has height property. For the meantime I just set the height to 0, and the result is better:

      return ListView.separated(
          itemCount: snapshot.data!.length,
          separatorBuilder: (_, __) => const Divider(
                height: 0,
              ),
          itemBuilder: (context, index) {
            var location = snapshot.data![index];

            return _LocationItem(location);
          });
Share:
445
Mike
Author by

Mike

Updated on December 31, 2022

Comments

  • Mike
    Mike over 1 year

    How to set the height of each ListTile item in a ListView.Separated?

    I use ListView.Seperated and ListTile item as in the following code:

      Widget _LocationItem(LocationModel location) => Container(
            child: Center(
              child: ListTile(
                title: Text(location.name),
                trailing: Icon(Icons.arrow_right),
              ),
            ),
          );
    
      // *** BUILD WIDGET
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              leading: Icon(Icons.navigate_before),
              title: Text("Location"),
            ),
            body: FutureBuilder<List<LocationModel>>(
              future: _locationModel,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return ListView.separated(
                      itemCount: snapshot.data!.length,
                      separatorBuilder: (_, __) => const Divider(),
                      itemBuilder: (context, index) {
                        var location = snapshot.data![index];
    
                        return _LocationItem(location);
                      });
                } else
                  return Center(child: CircularProgressIndicator());
              },
            ));
      }
    

    This is the result of my code:

    enter image description here

    As you can see, there is quite a lot of extra space at top and bottom of each text. How to remove the top and bottom extra space?

    I've tried to set the height of the container, but it actually just remove the bottom space and it doesn't look good.

    • ॐ Rakesh Kumar
      ॐ Rakesh Kumar over 2 years
      there is a separatorBuilder: (_, _) => hereCanDefineHeight,, can use SizedBox(), Container()