ListTile is not clipped when filled with a color. #94785

MalcolmMielle · 2021-12-07T07:54:01Z

Steps to Reproduce

In both of those programs, the ListTile is not clipped correctly:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final children = List<Widget>.generate(
      5,
      (i) => ListTile(
              tileColor: Colors.green,
              hoverColor: Colors.red,
              title: Text('$i')));

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: List.generate(
            children.length,
            (index) {
              return children[index];
            },
          ),
        ));
  }
}

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final children = List<Widget>.generate(
      5,
      (i) => ClipRRect(
          borderRadius: BorderRadius.circular(50),
          child: ListTile(
              tileColor: Colors.green,
              hoverColor: Colors.red,
              title: Text('$i'))));

  @override
  Widget build(BuildContext context) {
    return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: List.generate(
            children.length,
            (index) {
              return children[index];
            },
          ),
        );
  }
}

Expected results:

The green ListTiles or the Column containing them are clipped.

Actual results:

Nothing is clipped:

darshankawar · 2021-12-07T08:33:32Z

@MalcolmMielle
Can you provide flutter doctor -v and platform on which you are seeing this behavior ?

MalcolmMielle · 2021-12-07T08:51:35Z

Sure thing!

Flutter doctor -v:

[✓] Flutter (Channel master, 2.6.0-6.0.pre.103, on Fedora Linux 35 (Workstation Edition) 5.15.6-200.fc35.x86_64,
    locale en_US.UTF-8)
    • Flutter version 2.6.0-6.0.pre.103 at /home/malcolm/external_sources/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a31e0a4336 (3 months ago), 2021-09-15 15:05:56 -0600
    • Engine revision 77856b8fe4
    • Dart version 2.15.0 (build 2.15.0-98.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /home/malcolm/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/docs/get-started/install/linux#android-setup for more details.

[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Linux toolchain - develop for Linux desktop
    • clang version 13.0.0 (Fedora 13.0.0-3.fc35)
    • cmake version 3.22.0
    • ninja version 1.8.2
    • pkg-config version 1.8.0

[✓] Android Studio (version 4.0)
    • Android Studio at /home/malcolm/external_sources/android-studio-ide-193.6626763-linux/android-studio
    • Flutter plugin version 50.0.1
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.62.3)
    • VS Code at /usr/share/code
    • Flutter extension version 3.29.0

[✓] VS Code (version 1.63.0-insider)
    • VS Code at /usr/share/code-insiders
    • Flutter extension version 3.23.0

[✓] Connected device (1 available)
    • Linux (desktop) • linux • linux-x64 • Fedora Linux 35 (Workstation Edition) 5.15.6-200.fc35.x86_64

The behavior is seen on Linux (using Fedora 35)

darshankawar · 2021-12-07T12:09:24Z

Thanks for the details. Using the sample code provided and also with a below code snippet, the listTile corners are not clipped out of the box, although there are workaround / solutions using Card widget to achieve the effect.

return ClipRRect(
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
      ),
      child: ListTile(
        tileColor: Colors.red,
        title: Text("Tile 3"),
      ),
    );

stable, master flutter doctor -v

[✓] Flutter (Channel stable, 2.5.3, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.5.3 at /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (2 days ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/dhs/Library/Android/sdk
    • Java binary at: /Users/dhs/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.    

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/dhs/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/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
      1.8.0_242-release-1644-b3-6915495)        

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

[✓] Connected device (4 available)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 93.0.4577.82


• No issues found!

[✓] Flutter (Channel master, 2.6.0-12.0.pre.934, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.6.0-12.0.pre.934 at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision eea6c54dc2 (4 hours ago), 2021-12-06 16:59:05 -0800
    • Engine revision 66a281107b
    • Dart version 2.16.0 (build 2.16.0-80.0.dev)
    • DevTools version 2.9.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/dhs/Library/Android/sdk
    • Java binary at: /Users/dhs/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.    

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/dhs/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/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
      1.8.0_242-release-1644-b3-6915495)        

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

[[✓] Connected device (4 available)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 93.0.4577.82


• No issues found!

MalcolmMielle · 2021-12-07T20:17:51Z

While using a Card enables the clipping of the ListTile, it doesn't work for other widget like InkWell.

Edit: nevermind, the solution then is to use #24225 (comment)

darshankawar · 2021-12-08T05:03:23Z

With that solution, can this issue be closed as resolved ?
@MalcolmMielle

MalcolmMielle · 2021-12-08T11:48:54Z

Using Card is a solution to the problem for now. I don't now enough to know if there is a limitation compared to being able to use ClipRRect instead.

markusaksli-nc · 2022-01-03T16:41:47Z

ListTile uses Ink so if you want to clip it the new examples added to https://master-api.flutter.dev/flutter/material/Ink-class.html explain how to do it and why it can seem like clip does nothing at first.

The solution here is to wrap the tiles in a Material.

github-actions · 2022-01-17T17:07:35Z

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.

darshankawar added the in triage Presently being triaged by the triage team label Dec 7, 2021

darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Dec 7, 2021

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Dec 7, 2021

MalcolmMielle mentioned this issue Dec 7, 2021

Elements with a hover color in AdwPreferencesGroup overflow the bounding box and are not entirely visible gtk-flutter/libadwaita#24

Closed

darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Dec 8, 2021

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Dec 8, 2021

markusaksli-nc closed this as completed Jan 3, 2022

markusaksli-nc added the r: fixed Issue is closed as already fixed in a newer version label Jan 3, 2022

markusaksli-nc added this to To do in Nevercode via automation Jan 3, 2022

markusaksli-nc moved this from To do to Issue closed with comment in Nevercode Jan 3, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jan 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ListTile is not clipped when filled with a color. #94785

ListTile is not clipped when filled with a color. #94785

MalcolmMielle commented Dec 7, 2021 •

edited

darshankawar commented Dec 7, 2021

MalcolmMielle commented Dec 7, 2021

darshankawar commented Dec 7, 2021

MalcolmMielle commented Dec 7, 2021 •

edited

darshankawar commented Dec 8, 2021 •

edited

MalcolmMielle commented Dec 8, 2021

markusaksli-nc commented Jan 3, 2022

github-actions bot commented Jan 17, 2022

ListTile is not clipped when filled with a color. #94785

ListTile is not clipped when filled with a color. #94785

Comments

MalcolmMielle commented Dec 7, 2021 • edited

Steps to Reproduce

darshankawar commented Dec 7, 2021

MalcolmMielle commented Dec 7, 2021

darshankawar commented Dec 7, 2021

MalcolmMielle commented Dec 7, 2021 • edited

darshankawar commented Dec 8, 2021 • edited

MalcolmMielle commented Dec 8, 2021

markusaksli-nc commented Jan 3, 2022

github-actions bot commented Jan 17, 2022

MalcolmMielle commented Dec 7, 2021 •

edited

MalcolmMielle commented Dec 7, 2021 •

edited

darshankawar commented Dec 8, 2021 •

edited