How to specify ListTile height in Flutter

In this code, I am trying to make a list of buttons or tiles "as buttons do not work well for me " at the very top of the page. Thus, when one is clicked it returns a value in the rest of the page.

The issue is The tile here toke around more than half of the page which makes it looks inconsistent. I want to limit the height of the tile, I have tried putting them in a row and a container and it doesn't work. Any HELP will be appreciated.

the result after running the code is:


this is the error after runing the code :
[![enter image description here][1]][1]


class HomePage extends StatefulWidget {
// const HomePage({Key key}) : super(key: key);

@override
HomePageState createState() {
return new HomePageState();
}
}

class HomePageState extends State<HomePage> {
List<String> temp=new List();
List<String> temp1=['Nile University', 'Smart Village', 'Zewail'];
Map<String,String> map1={};
@override
void initState() {
super.initState();
getplaces(temp);
getuser(map1,'1jKpg81YCO5PoFOa2wWR');

}


Future<List> getuser(temp,String place) async{
List<String> userids=[];
QuerySnapshot usersubs= await Firestore.instance.collection('tempSubs').getDocuments();
QuerySnapshot userid= await Firestore.instance.collection('users').where('place',isEqualTo: place).getDocuments();
userid.documents.forEach((DocumentSnapshot doc,){
usersubs.documents.forEach((DocumentSnapshot doc1){
if(doc.documentID==doc1.documentID){
doc1.data['products'].forEach((k,v){

if( DateTime.fromMillisecondsSinceEpoch(v).day==DateTime.now().day){

int x= DateTime.fromMillisecondsSinceEpoch(v).day;
print('keey equal $k and v is $x');

print('dy is $x');
userids.add(
doc.documentID);
}
});

}
} ); }
);
print('doc.documentID');
print (userids);
setState(() {});
return userids;
}


Future<List> getplaces(temp) async{
QuerySnapshot place= await Firestore.instance.collection('places').getDocuments();
place.documents.forEach((DocumentSnapshot doc){
temp.add(
doc.data['name']
);
// print(doc.data['name']);

});
// print(temp);

setState(() {});
return temp;
}



@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),

body: !temp.isNotEmpty?
CircularProgressIndicator():
Row(mainAxisSize:MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,

children:<Widget>[
Container(
height: 100.0,
child:
ListView.builder(
scrollDirection: Axis.horizontal,
itemExtent: 100.0,
itemCount:temp.length,
itemBuilder:(BuildContext context, int index) {
return ListTile(title: Text(temp[index]),onTap:
(){
print(temp[index]);
}
);}
),),
Container(child:Text('data'),)
],),

);

}
}


[1]:

Just remove the `Expanded` Widget to avoid fill the space available and use a parent Container with a fixed height, the same as the `itemExtent` value:


Column(
children: <Widget>[
Container(
height: 100.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemExtent: 100.0,
itemCount: temp.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(temp[index]),
onTap: () {
print(temp[index]);
});
}),
),
Container(
child: Text('data'),
)
],
),

You should use a Container or Padding instead of ListTile if you need more customization.

You cannot set the height, but you can make it smaller by setting the **dense** property to true:

ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: list.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(list[index].name,style: TextStyle(fontSize: 20.0),),
contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
dense:true,
);
},
);

ListTile:
> A single fixed-height row that typically contains some text as well as
> a leading or trailing icon.
>
> To be accessible, tappable leading and trailing widgets have to be at
> least 48x48 in size. However, to adhere to the Material spec, trailing
> and leading widgets in one-line ListTiles should visually be at most
> 32 (dense: true) or 40 (dense: false) in height, which may conflict
> with the accessibility requirement.
>
> For this reason, a one-line ListTile allows the height of leading and
> trailing widgets to be constrained by the height of the ListTile. This
> allows for the creation of tappable leading and trailing widgets that
> are large enough, but it is up to the developer to ensure that their
> widgets follow the Material spec.

[To see links please register here]

Since there's no height property in ListTile you can limit the size of a tile by placing it inside a SizedBox:

SizedBox(
height: 32,
child: ListTile(..))

Applying `VisualDensity` allows you to expand or contract the height of list tile. VisualDensity is compactness of UI elements. Here is an example:

// negative value to contract
ListTile(
title: Text('Tile title'),
dense: true,
visualDensity: VisualDensity(vertical: -3), // to compact
onTap: () {
// tap actions
},
)

// positive value to expand
ListTile(
title: Text('Tile title'),
dense: true,
visualDensity: VisualDensity(vertical: 3), // to expand
onTap: () {
// tap actions
},
)

The values ranges from -4 to 4 and default is 0 as of writing this answer.

However, you cannot use this method for specific width or height size.