Skip to content

ListTile Crashes When Width Is Reduced with Leading or Trailing Widgets #159380

Closed
#161091
Closed
ListTile Crashes When Width Is Reduced with Leading or Trailing Widgets#159380
#161091
Assignees
TahaTesser
Labels
P2Important issues not at the top of the work lista: error messageError messages from the Flutter frameworkfound in release: 3.24Found to occur in 3.24found in release: 3.27Found to occur in 3.27frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@atillayurtseven
atillayurtseven
opened on Nov 24, 2024

When using the ListTile widget in a Flutter application on macOS, the app crashes if the window width is reduced and the ListTile contains a leading or trailing widget. This issue is reproducible consistently and seems related to how the widget handles layout constraints during window resizing.

Steps to reproduce

  1. Create a Flutter app targeting macOS.
  2. Add a ListTile widget with either a leading or trailing widget.
  3. Run the app and gradually reduce the width of the window.
  4. Observe that the app crashes when the window reaches a certain narrow width.

Expected results

The ListTile should adapt gracefully to changing window sizes without crashing, regardless of whether leading or trailing widgets are present.

Actual results

The application crashes as the window width decreases when a ListTile contains leading or trailing widgets. The crash appears to be related to layout constraints.

Code sample

Code sample 
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:portfolio/providers.dart';

class Homepage extends ConsumerWidget {
  const Homepage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final portfolio = ref.watch(portfolioProvider);

    return ListView.builder(
      shrinkWrap: true,
      itemCount: portfolio.length,
      itemBuilder: (context, index) {
        final stock = portfolio[index];
        return ListTile(
          title: Text(
            stock.name,
            overflow: TextOverflow.ellipsis,
          ),
          subtitle: Text(
            "Qty: ${stock.quantity}",
            overflow: TextOverflow.ellipsis,
          ),
          trailing: Text("Price: ${stock.price}"),
        );
      },
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs 
_AssertionError._doThrowNew (/Users/ates/development/flutter/bin/cache/pkg/sky_engine/lib/_internal/vm/lib/errors_patch.dart:50)
_AssertionError._throwNew (/Users/ates/development/flutter/bin/cache/pkg/sky_engine/lib/_internal/vm/lib/errors_patch.dart:40)
_RenderListTile._computeSizes (/Users/ates/development/flutter/packages/flutter/lib/src/material/list_tile.dart:1356)
_RenderListTile.performLayout (/Users/ates/development/flutter/packages/flutter/lib/src/material/list_tile.dart:1459)
RenderObject.layout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/object.dart:2608)
RenderPadding.performLayout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/shifted_box.dart:234)
RenderObject.layout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/object.dart:2608)
RenderPadding.performLayout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/shifted_box.dart:234)
RenderObject.layout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/object.dart:2608)
RenderProxyBoxMixin.performLayout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/proxy_box.dart:111)
RenderObject.layout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/object.dart:2608)
RenderProxyBoxMixin.performLayout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/proxy_box.dart:111)
RenderObject.layout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/object.dart:2608)
RenderProxyBoxMixin.performLayout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/proxy_box.dart:111)
RenderObject.layout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/object.dart:2608)
RenderProxyBoxMixin.performLayout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/proxy_box.dart:111)
RenderObject.layout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/object.dart:2608)
RenderProxyBoxMixin.performLayout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/proxy_box.dart:111)
RenderObject.layout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/object.dart:2608)
RenderProxyBoxMixin.performLayout (/Users/ates/development/flutter/packages/flutter/lib/src/rendering/proxy_box.dart:111)

Flutter Doctor output

Doctor output 
[Paste your output here]

Activity

  1. darshankawar
    added
    in triagePresently being triaged by the triage team
    on Nov 25, 2024

  2. darshankawar commented on Nov 25, 2024

    @darshankawar
    darshankawar
    on Nov 25, 2024
    Member

    @atillayurtseven
    The code sample you provided contains third party implementation. Does the reported behavior occur without using those packages code ? If so, please provide us updated code sample along with flutter doctor -v.

    https://stackoverflow.com/help/minimal-reproducible-example

  3. darshankawar
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Nov 25, 2024

  4. atillayurtseven commented on Nov 25, 2024

    @atillayurtseven
    atillayurtseven
    on Nov 25, 2024
    Author

    Hi @darshankawar

    Here's the cleaner code

    import 'package:flutter/material.dart';

void main() async {
  runApp(const MainApp()); // ProviderScope eklendi
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Portfolioy",
      darkTheme: ThemeData.dark(useMaterial3: true),
      themeMode: ThemeMode.dark,
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: Text("My Portfolio"),
        ),
        backgroundColor: Color.fromARGB(255, 33, 33, 33),
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: Homepage(),
            ),
          ],
        ),
      ),
    );
  }
}


class Stock {
  final String name;
  final double cost;
  final double price;
  final int quantity;

  Stock({
    required this.name,
    required this.cost,
    required this.price,
    required this.quantity,
  });
}

class Homepage extends StatelessWidget {
  Homepage({super.key});

  final portfolio = [
          Stock(name: "AAPL", cost: 145.0, price: 150.0, quantity: 10),
          Stock(name: "GOOG", cost: 2800.0, price: 2650.0, quantity: 5),
          Stock(name: "TSLA", cost: 750.0, price: 800.0, quantity: 8),
        ];

  @override
  Widget build(BuildContext context) {
  
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: portfolio.length,
        itemBuilder: (context, index) {
          final stock = portfolio[index];
          final up = stock.price > stock.cost;
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Card(
              child: ListTile(
                leadingAndTrailingTextStyle: TextStyle(
                  overflow: TextOverflow.ellipsis,
                ),
                title: Text(
                  stock.name,
                  overflow: TextOverflow.ellipsis,
                ),
                subtitle: Text(
                  "Qty: ${stock.quantity}",
                  overflow: TextOverflow.ellipsis,
                ),
                leading: Icon(
                  up ? Icons.trending_up : Icons.trending_down,
                  color: up ? Colors.green : Colors.red,
                ),
                trailing: Text(
                  stock.price.toString(),
                  style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.bold,
                    color: up ? Colors.green : Colors.red,
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

    And flutter doctor -v output:

    [✓] Flutter (Channel stable, 3.24.4, on macOS 15.0.1 24A348 darwin-arm64, locale tr-TR)
    • Flutter version 3.24.4 on channel stable at /Users/ates/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 603104015d (5 weeks ago), 2024-10-24 08:01:25 -0700
    • Engine revision db49896cf2
    • Dart version 3.5.4
    • DevTools version 2.37.3

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/ates/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/macos-android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16B40
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)

[✓] IntelliJ IDEA Community Edition (version 2023.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.95.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.100.0

[✓] VS Code (version 1.83.1)
    • VS Code at /Users/ates/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.100.0

[✓] Connected device (3 available)
    • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 15.0.1 24A348 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 15.0.1 24A348 darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript • Google Chrome 131.0.6778.86

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
  5. github-actions
    removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Nov 25, 2024

  6. darshankawar commented on Nov 26, 2024

    @darshankawar
    darshankawar
    on Nov 26, 2024
    Member

    Thanks for the update @atillayurtseven
    The error log mentions / suggests why it could be occuring with a hint on how to fix it.

    The following assertion was thrown during performLayout():
Trailing widget consumes entire tile width. Please use a sized widget, or consider replacing
ListTile with a custom widget (see
https://api.flutter.dev/flutter/material/ListTile-class.html#material.ListTile.4)
'package:flutter/src/material/list_tile.dart':
Failed assertion: line 1356 pos 7: 'tileWidth != trailingSize?.width || tileWidth == 0.0'

    Try to use SizedBox widget and follow the link mentioned of the example to see if it helps in your case or not.

  7. darshankawar
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Nov 26, 2024

  8. atillayurtseven commented on Nov 27, 2024

    @atillayurtseven
    atillayurtseven
    on Nov 27, 2024
    Author

    Wrapping with SizedBox did not help

    
                trailing: SizedBox(
                  child: Text(
                    stock.price.toString(),
                    style: TextStyle(
                      fontSize: 25,
                      fontWeight: FontWeight.bold,
                      color: up ? Colors.green : Colors.red,
                    ),
                  ),
                ),
  9. github-actions
    removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Nov 27, 2024

  10. darshankawar commented on Nov 27, 2024

    @darshankawar
    darshankawar
    on Nov 27, 2024
    Member

    Thanks for checking. As the error log points to https://api.flutter.dev/flutter/material/ListTile-class.html#material.ListTile.4 which I tried and doesn't throw the said error. Please try to see its implementation and check if it helps in your case or not.

  11. darshankawar
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Nov 27, 2024

  12. atillayurtseven commented on Nov 27, 2024

    @atillayurtseven
    atillayurtseven
    on Nov 27, 2024
    Author

    I have tried the ListTile.4 code in my Mac app and same problem occurs.

    Please find the full code and the flutter doctor -v output below.

    import 'package:flutter/material.dart';

/// Flutter code sample for [ListTile].

void main() => runApp(const ListTileApp());

class ListTileApp extends StatelessWidget {
  const ListTileApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const ListTileExample(),
    );
  }
}

class ListTileExample extends StatelessWidget {
  const ListTileExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ListTile Sample')),
      body: ListView(
        children: const <Widget>[
          ListTile(
            leading: CircleAvatar(child: Text('A')),
            title: Text('Headline'),
            subtitle: Text('Supporting text'),
            trailing: Icon(Icons.favorite_rounded),
          ),
          Divider(height: 0),
          ListTile(
            leading: CircleAvatar(child: Text('B')),
            title: Text('Headline'),
            subtitle: Text(
                'Longer supporting text to demonstrate how the text wraps and how the leading and trailing widgets are centered vertically with the text.'),
            trailing: Icon(Icons.favorite_rounded),
          ),
          Divider(height: 0),
          ListTile(
            leading: CircleAvatar(child: Text('C')),
            title: Text('Headline'),
            subtitle: Text(
                "Longer supporting text to demonstrate how the text wraps and how setting 'ListTile.isThreeLine = true' aligns leading and trailing widgets to the top vertically with the text."),
            trailing: Icon(Icons.favorite_rounded),
            isThreeLine: true,
          ),
          Divider(height: 0),
        ],
      ),
    );
  }
}

    flutter doctor -v output

    flutter doctor -v
[✓] Flutter (Channel stable, 3.24.4, on macOS 15.0.1 24A348 darwin-arm64, locale tr-TR)
    • Flutter version 3.24.4 on channel stable at /Users/atillayurtseven/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 603104015d (5 weeks ago), 2024-10-24 08:01:25 -0700
    • Engine revision db49896cf2
    • Dart version 3.5.4
    • DevTools version 2.37.3

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/atillayurtseven/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/macos-android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16B40
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)

[✓] IntelliJ IDEA Community Edition (version 2023.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.95.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.100.0

[✓] VS Code (version 1.83.1)
    • VS Code at /Users/atillayurtseven/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.100.0

[✓] Connected device (3 available)
    • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 15.0.1 24A348 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 15.0.1 24A348 darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript • Google Chrome 131.0.6778.86

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
(base) atillayurtseven@10 portfolio % 
 *  History restored 

(base) atillayurtseven@10 portfolio % flutter doctor -v
[✓] Flutter (Channel stable, 3.24.4, on macOS 15.1.1 24B91 darwin-arm64, locale tr-TR)
    • Flutter version 3.24.4 on channel stable at /Users/atillayurtseven/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 603104015d (5 weeks ago), 2024-10-24 08:01:25 -0700
    • Engine revision db49896cf2
    • Dart version 3.5.4
    • DevTools version 2.37.3

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/atillayurtseven/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/macos-android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16B40
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)

[✓] IntelliJ IDEA Community Edition (version 2023.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.95.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.100.0

[✓] VS Code (version 1.83.1)
    • VS Code at /Users/atillayurtseven/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.100.0

[✓] Connected device (3 available)
    • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 15.1.1 24B91 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 15.1.1 24B91 darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript • Google Chrome 131.0.6778.86

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
  13. github-actions
    removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Nov 27, 2024

  14. darshankawar commented on Nov 28, 2024

    @darshankawar
    darshankawar
    on Nov 28, 2024
    Member

    In above code, if you update as below, then the said error doesn't occur:

    trailing: SizedBox(
              child: Icon(Icons.favorite_rounded),
            ),
  15. darshankawar
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Nov 28, 2024

  16. 20 remaining items

  17. TahaTesser
    added
    team-designOwned by Design Languages team
    on Dec 11, 2024
  18. TahaTesser
    self-assigned this
    on Dec 11, 2024
  19. TahaTesser
    added this to Nevercodeon Dec 11, 2024
  20. github-project-automation
    moved this to To do in Nevercodeon Dec 11, 2024
  21. Piinks
    added
    P2Important issues not at the top of the work list
    triaged-designTriaged by Design Languages team
    on Dec 11, 2024
  22. TahaTesser
    moved this from To do to In progress in Nevercodeon Dec 13, 2024
  23. TahaTesser
    moved this from In progress to PR submitted in Nevercodeon Jan 3, 2025
  24. github-merge-queue
    added a commit that references this issue on Jan 13, 2025

    Update error message for when leading/trailing width exceeds `ListTil…

    cef35e7
  25. auto-submit
    closed this as completedin #161091on Jan 13, 2025
  26. github-project-automation
    moved this from PR submitted to Done (PR merged) in Nevercodeon Jan 13, 2025
  27. darshankawar
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Jan 14, 2025
  28. maheshj01
    added a commit that references this issue on Jan 15, 2025

    Update error message for when leading/trailing width exceeds `ListTil…

    f286e63

  29. github-actions commented on Jan 28, 2025

    @github-actions
    github-actionsbot
    on Jan 28, 2025 – with 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.

  30. github-actions
    locked as resolved and limited conversation to collaborators on Jan 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: error messageError messages from the Flutter frameworkfound in release: 3.24Found to occur in 3.24found in release: 3.27Found to occur in 3.27frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

  • Nevercode
    Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions