ListTile title length is super short when trailing is a Row, in some version >0.3.1

[ArcticZeroo]

My app uses ListTile elements to display "food items" for a menu. In v0.3.1 this works perfectly, and is the correct length.

However, in the most recent version (aka master/v0.5.7) this does not work well, and only a letter or two makes it per line of the title, meaning each ListTile title is hundreds of pixels tall and only a few pixels wide. I'm unsure what causes this.

It's not my code, because I've bisected to literally the commit where I originally added it, and it works fine on v0.3.1 (from April), but not on the most recent version of master. I would bisect flutter if I had the time right now, but unfortunately I do not.

You can see this issue in part under "Dolce" here: https://frozor.io/up/oVsgEgrW.png . This occurs for every single venue and menu item, not just Dolce or the "hard scoop ice cream".

As I said, it does not exist on v0.3.1, and looks more like https://frozor.io/up/LXM4Ur5i.png

Steps to Reproduce

I'm not 100% sure what the exact steps are other than running my app. I know that's not supremely helpful, but if anyone has any kind of idea on where I should even start tracking it down, I'd be happy to try to reproduce.

Relevant pieces from my app: https://github.com/ArcticZeroo/msu_helper/blob/master/lib/pages/dining_hall/dining_hall_page.dart#L285 and https://github.com/ArcticZeroo/msu_helper/blob/master/lib/widgets/dining_hall/menu/venue_display.dart#L72

Logs

The verbose output of the logs is (likely) not helpful; The log text "The dining hall is open for this meal on Monday" is printed at the same time the issue would print additional information if the engine realized something was up, because that's printed as part of the menu loading process.

https://gist.github.com/ArcticZeroo/c5f24d53ccf813c3e72e2dcf65a8e383

Flutter analysis is just unused imports; https://gist.github.com/ArcticZeroo/84844cd26ed574c8fd73426373bd3317

And flutter doctor is also unfortunately unhelpful: https://gist.github.com/ArcticZeroo/ae5819bdbb04f5471117124e43349916

[zoechi]

Please add the full output of flutter doctor -v.

[zoechi]

Could you please try to create a minimal example based on a new project created with flutter create . that only contains the code necessary to reproduce?

[ArcticZeroo]

Here's the flutter doctor verbose output: https://gist.github.com/ArcticZeroo/93f19d2ba1d920ecad6686f1b115dd7f

And I did manage to write a minimal version that can reproduce the issue.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('List Tile Bug')),
      body: new ListView(
        children: <Widget>[
          new ListTile(
            title: new Text('Hard Scoop Ice Cream'),
            trailing: new Row(
              children: [new CircleAvatar(
                backgroundImage: new Image.network('http://frozor.io/up/Xartkzk.png').image,
                maxRadius: 8.0,
              )],
            ),
          )
        ],
      ),
    );
  }
}

The Image.network is the same image as the one in my assets in the github repo above, I just have it hosted on network so you can run it with the same image without having to do asset stuff.

It appears that the issue comes from the trailing. specifically the Row. Replacing the row with just the circle avatar "fixes it" (even though I need a row). When I set mainAxisSize to min (since it is defaulted to max and I apparently forgot that when writing this), the issue no longer exists either.

I'm not 100% sure if this should still be considered a flutter issue, since it definitely was a regression, but is also kind of expected behavior?

[HansMuller]

Sorry about the incompatible change. ListTile's layout was updated in May: #17580, #17496. The problem you've run into has come up before, e.g. #17666.

The width of ListTile's trailing widget is no longer constrained, so if you're not careful it will consume all of the available horizontal space. You've sorted out the correct solution. When the trailing widget is a Row use MainAxisSize.min so that the Row only consumes as much horizontal space as needed for its children.

[no-response]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.
cc @Hixie

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.