Flutter 增加ListTile高度

Question

I want to have a list tile that has a decent sized leading image, then a description of the item and an icon.

What I am finding, despite searching for answers online, is that I am unable to increase the height of the list tile no matter what height the leading image is.

Code:

          ListTile(
            leading: ConstrainedBox(
              constraints: BoxConstraints(
                minWidth: 100,
                minHeight: 260,
                maxWidth: 104,
                maxHeight: 264,
              ),
              child: Image.asset('lib/images/burger_texas_angus.jpg', fit: BoxFit.fill),
            ),
            title: Text('Texas Angus Burger'),
            subtitle: Text('With fries and coke.'),
            trailing: Icon(
              Icons.menu,
            ),
            onTap: () {},
            onLongPress: () {},
            dense: false,
          ),

Want it to end up looking something like this, where they have a nice big square leading icon which appears to dictate the height of the listtile, whereas everything I am doing crams the image into a narrow tile.

Answer 1

Ok so the answer to this is that it isn't possible. A ListTile is a very, very basic built-in widget that can only be a particular height, and there is nothing you can do about it.

If you want to do anything visually cool, with pictures etc like I have shown in my question, you have to create a custom CARD instead.

I will show my resulting code for a basic card layout that will give a similar result to the image I posted, in case anyone needs some help with this:

              Container(
                  width: MediaQuery.of(context).size.width * 0.94,
                  child: Card(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(0.0),
                    ),
                    color: Colors.white70,
                    elevation: 10,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(2.0),
                          child: ConstrainedBox(
                            constraints: BoxConstraints(
                              maxWidth: MediaQuery.of(context).size.width * 0.28,
                              maxHeight: MediaQuery.of(context).size.width * 0.28,
                            ),
                            child: Image.asset(
                                'lib/images/burger_texas_angus.jpg',
                                fit: BoxFit.fill
                            ),
                          ),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              width: MediaQuery.of(context).size.width * 0.5,
                              child: Padding(
                                padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
                                child: Text(
                                  'Texas Angus Burger',
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18,
                                  ),
                                ),
                              ),
                            ),
                            Container(
                              width: MediaQuery.of(context).size.width * 0.5,
                              child: Padding(
                                padding: const EdgeInsets.fromLTRB(5, 10, 0, 0),
                                child: Text(
                                  '100% Australian Angus grain-fed beef with cheese and pickles.  Served with fries.',
                                  style: TextStyle(
                                    fontSize: 12,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                        Column(
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.fromLTRB(5, 40, 0, 0),
                              child: Text(
                                '\$ 24.00',
                                style: TextStyle(
                                  fontSize: 14,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),

Answer 2

Try this:

Container(height: 100, child: ListTile(
              title: Text("My Title"),
              trailing: Icon(Icons.arrow_right),
            ));

Answer 3

you can wrap ListTile with Container and give it width and height

ListTile(
  leading: Container(
    height: 80,
    width: 80,
    child: CircleAvatar(
      backgroundImage: AssetImage(
          'assets/images/splash_view_images/splash.png'),
    ),
  ),
  title: Text('some text'),
  subtitle:
      Text('some text.'),
),