CupertinoListTile overflow error

[alex-sandri]

Note: I had already commented on the original PR about this issue, see #78732 (comment).

Steps to Reproduce

1. Use the code sample on a device with a small enough screen so that the text content takes up more space than available on one line.

Expected results:

Text content should have wrapped across multiple lines.

Actual results:

Text content overflows.

Code sample

import 'package:cupertinolisttileerrordemo/cupertino_list_tile.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              const Text('Expected behavior (like ListTile):'),
              ListTile(
                title: Text('Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long text' * 5),
                onTap: () {
                  // TODO
                },
              ),
              const Text('Actual behavior:'),
              CupertinoListTile.notched(
                title: Text('Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long text' * 5),
                onTap: () {
                  // TODO
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Logs

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 1276 pixels on the right.

The relevant error-causing widget was:
  Row
  Row:file:///C:/Users/Alex%20Sandri/Desktop/cupertinolisttileerrordemo/lib/cupertino_list_tile.dart:351:16

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#28534 relayoutBoundary=up7 OVERFLOWING:
  creator: Row ← Padding ← ConstrainedBox ← Container ← Listener ← _GestureSemantics ←
    RawGestureDetector ← GestureDetector ← CupertinoListTile ← Column ← Center ← _BodyBuilder ← ⋯
  parentData: offset=Offset(28.0, 10.0) (can use size)
  constraints: BoxConstraints(w=458.0, 30.0<=h<=Infinity)
  size: Size(458.0, 30.0)
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

Analyzing cupertinolisttileerrordemo...                                 
No issues found! (ran in 3.3s)

[✓] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Versione 10.0.19044.1865], locale it-IT)
    • Flutter version 3.0.5 at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (3 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\Android\Sdk
    • Platform android-33, build-tools 33.0.0
    • ANDROID_SDK_ROOT = C:\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.3)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.2.32526.322
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 11.0.12+7-b1504.28-7817840)

[✓] VS Code (version 1.69.2)
    • VS Code at C:\Users\Alex Sandri\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Versione 10.0.19044.1865]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 104.0.5112.81
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 103.0.1264.37

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[maheshmnj]

Hi @alex-sandri, CupertinoListTile is a third party widget, Kindly file this issue in its dedicated repository https://github.com/jpnurmi/cupertino_list_tile/issues

Closing as this is not a bug in flutter.

[alex-sandri]

@maheshmnj This is actually a widget in Flutter now. It is currently only available in master. Here it is: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/cupertino/list_tile.dart.

[maheshmnj]

I see @alex-sandri thanks for the clarification. I didn't knew it was merged into framework
Reopening based on the above comment

[maheshmnj]

Reproducible on the latest master channel

flutter doctor -v (mac)

[✓] Flutter (Channel master, 3.1.0-0.0.pre.2009, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.1.0-0.0.pre.2009 on channel master at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9d96c7b8be (3 days ago), 2022-08-01 00:39:06 -0400
    • Engine revision cf0db3e546
    • Dart version 2.19.0 (build 2.19.0-49.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64  • Android 11 (API 30) (emulator)
    • macOS (desktop)           • macos         • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)              • chrome        • web-javascript • Google Chrome 104.0.5112.79

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[maheshmnj]

cc: @jpnurmi

[jpnurmi]

Hi, please consider the old (and unrelated) cupertino_list_tile package deprecated in favor of the new official CupertinoListTile widget. 🙂

[alex-sandri]

@jpnurmi Sorry, if I didn't make it clear in the original issue comment but this is totally unrelated to that package. This issue refers to the CupertinoListTile widget found in the Flutter repo.

The first import in the code sample:

import 'package:cupertinolisttileerrordemo/cupertino_list_tile.dart';

is just the CupertinoListTile's file from this repo with a few edits to make it work outside of the Flutter repo as I'm currently on the stable branch and as such do not have that widget available right now.

[alex-sandri]

I had already suggested a fix in the original PR here #78732 (comment) if that can help you. I can open a PR for the fix if you think these suggestions are ok.

[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.