How to specify ListTile height in Flutter

Question

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 :

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'),)     ],),                 );                    } } 

Answer 1

Add this one itemExtent in your ListView Properties, itemExtent defines the size of each child. like this ⬇️

 ListView.builder(   scrollDirection: Axis.vertical,   shrinkWrap: true,   itemCount: 5,   itemExtent: 50,   itemBuilder: (context, index) {      return TistTile()   }  ) 

And Implementation this one dense:true, in your ListTile Properties, The dense parameter makes the text smaller and packs everything together. like this ⬇️

  ListTile(    title: Text("Tony Stark"),    subtitle: Text("list[index].name",         style: TextStyle(fontSize: 14.0),),    contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal:          16.0),    dense:true,    ); 

You can change how much the content is inset on the left and right (but not the top or bottom) by setting the contentPadding. The default is 16.0 but here we will set to 0.0: