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 :

Answer 2

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

Answer 3

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.

https://api.flutter.dev/flutter/material/ListTile-class.html

Answer 4

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(..))

Answer 5

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.