CODEWITHSUNDEEP
flutterlistviewheight
Mike
Mike

Reputation: 69

Flutter: ListView.Separated set height

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.

Upvotes: 1

Views: 1647

Answers (2)

Mike
Mike

Reputation: 69

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

Upvotes: 1

Aristidios
Aristidios

Reputation: 2321

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

Upvotes: 0

Related Questions