Provided delete icon overrides the default delete icon size

@TahaTesser

Steps to reproduce

Create a FilterChip and set an icon for deleteIcon
Increase the size

Expected results

It should be possible to support any size icon on FilterChip.
This is more noticable when using a smaller labelStyle, but still happens even with the default.
Dialing in some custom padding numbers seems to make it work.
I've left a nice repoduction in the linked dartpad

Actual results

The icon is painted off center.

I dont't know if this is rude, so please forgive me.
@TahaTesser I'm going to ping you being that you would probably know the most about this.
Thanks!

Code sample

https://dartpad.dev/?id=4aa1ad145d994fda54c9e87556f38bd9

Screenshots or Video

Screenshots / Video demonstration

Logs

No notable logs are printed when rendering this widget

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.19.5, on Microsoft Windows [Version 10.0.22621.3296], locale en-US)
    • Flutter version 3.19.5 on channel stable at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 300451adae (10 days ago), 2024-03-27 21:54:07 -0500
    • Engine revision e76c956498
    • Dart version 3.3.3
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\dicke\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314)
    • All Android licenses accepted.

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

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.6)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.8.34525.116
    • Windows 10 SDK version 10.0.22621.0

[√] Android Studio (version 2023.1)
    • 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 17.0.7+0-b2043.56-10550314)

[√] VS Code, 64-bit edition (version 1.86.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.86.0

[!] Proxy Configuration
    • HTTP_PROXY is set
    ! NO_PROXY is not set

[√] Connected device (4 available)
    • SM G970U (mobile) • R58M230DQHV • android-arm64  • Android 12 (API 31)
    • Windows (desktop) • windows     • windows-x64    • Microsoft Windows [Version 10.0.22621.3296]
    • Chrome (web)      • chrome      • web-javascript • Google Chrome 123.0.6312.106
    • Edge (web)        • edge        • web-javascript • Microsoft Edge 123.0.2420.81

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

! Doctor found issues in 1 category.

Thank you for the report. I can see the issue on Flutter master channel as well. Adding a demo with enabling Devtools's overlay guidelines:

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.5, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.5 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 300451adae (8 days ago), 2024-03-27 21:54:07 -0500
    • Engine revision e76c956498
    • Dart version 3.3.3
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 123.0.6312.106

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

• No issues found!

[!] Flutter (Channel master, 3.22.0-5.0.pre.55, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.0-5.0.pre.55 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ddf79b755d (5 hours ago), 2024-04-07 18:34:24 -0400
    • Engine revision c10e950c66
    • Dart version 3.5.0 (build 3.5.0-18.0.dev)
    • DevTools version 2.34.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (4 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D          • android-arm64  • Android 11 (API 30)
    • iPad (mobile)    • 00008103-000A1464346A201E • ios            • iOS 17.2 21C62
    • macOS (desktop)  • macos                     • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome                    • web-javascript • Google Chrome 123.0.6312.107

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

! Doctor found issues in 1 category.

Providing the sample from dartpad link here as backup if the gist is deleted.

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Row(mainAxisSize: MainAxisSize.min, children: [
                  Text("Default, Slightly Off Center"),
                  SizedBox(width: 8),
                  FilterChip(
                    label: Text("Test Text"),
                    onSelected: (_) {},
                    onDeleted: () {},
                    deleteIcon: Icon(Icons.expand_more),
                  )
                ]),
                Row(mainAxisSize: MainAxisSize.min, children: [
                  Text("Label Medium, Very Off Center"),
                  SizedBox(width: 8),
                  FilterChip(
                    labelStyle: Theme.of(context).textTheme.labelMedium,
                    label: Text("Test Text"),
                    onSelected: (_) {},
                    onDeleted: () {},
                    deleteIcon: Icon(Icons.expand_more),
                  )
                ]),
                Row(mainAxisSize: MainAxisSize.min, children: [
                  Text("Custom Padding ---------- Fixed"),
                  SizedBox(width: 8),
                  FilterChip(
                    labelStyle: Theme.of(context).textTheme.labelMedium,
                    label: Text("Test Text"),
                    onSelected: (_) {},
                    onDeleted: () {},
                    padding: EdgeInsets.only(left: 16),
                    labelPadding: EdgeInsets.only(left: 0, right: 0),
                    deleteIcon: Icon(Icons.expand_more),
                  )
                ]),
                Row(mainAxisSize: MainAxisSize.min, children: [
                  Text("Label Medium, Very Off Center"),
                  SizedBox(width: 8),
                  FilterChip(
                    labelStyle: Theme.of(context).textTheme.labelMedium,
                    label: Text("Test Text With More Text"),
                    onSelected: (_) {},
                    onDeleted: () {},
                    deleteIcon: Icon(Icons.expand_more),
                  )
                ]),
                Row(mainAxisSize: MainAxisSize.min, children: [
                  Text("Custom Padding ---------- Fixed"),
                  SizedBox(width: 8),
                  FilterChip(
                    labelStyle: Theme.of(context).textTheme.labelMedium,
                    label: Text("Test Text With More Text"),
                    onSelected: (_) {},
                    onDeleted: () {},
                    padding: EdgeInsets.only(left: 16),
                    labelPadding: EdgeInsets.only(left: 0, right: 0),
                    deleteIcon: Icon(Icons.expand_more),
                  )
                ]),
              ],
              mainAxisSize: MainAxisSize.min),
        ),
      ),
    );
  }
}

@dickermoshe

@dickermoshe
I'll take a look, thanks!

Fix chips delete icon override the default icon size and ignores `Ico…

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.

Navigation Menu

Repository navigation

Provided delete icon overrides the default delete icon size #146404

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Code sample

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Provided delete icon overrides the default delete icon size #146404

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

huycozy commented on Apr 8, 2024

TahaTesser commented on Apr 8, 2024

Code sample

TahaTesser commented on Apr 8, 2024

github-actions commented on May 7, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions