Flutter：ListView.Separated 设置高度

Question

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:

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.

Answer 1

You will need to edit your ListTile try adding properties to it

try this :

    Widget _LocationItem(LocationModel location) => Container(
        child: Center(
          child: ListTile(
            title: Text(location.name),
            trailing: Icon(Icons.arrow_right),
            contentPadding: , // add padding here
          ),
        ),
      );

Answer 2

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);
          });