Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon in SlidableAction is not using foreground color #512

Open
biklas7 opened this issue Dec 12, 2024 · 5 comments · May be fixed by #513
Open

Icon in SlidableAction is not using foreground color #512

biklas7 opened this issue Dec 12, 2024 · 5 comments · May be fixed by #513

Comments

@biklas7
Copy link

biklas7 commented Dec 12, 2024

This must have been a breaking change introduced with the latest Flutter stable 3.27

@biklas7 biklas7 changed the title Icon is not using foreground color Icon in SlidableAction is not using foreground color Dec 12, 2024
@lukemmtt
Copy link

lukemmtt commented Dec 12, 2024

I'm observing the same. Also, the size of the icons has changed as well. I observed this after upgrading my project to Flutter 3.27.0 and updating flutter_slidable to the latest version, 3.1.2:

Appearance in Flutter 3.24.x:

Appearance in Flutter 3.27.0:

@lukemmtt
Copy link

On closer inspection of Flutter 3.27.0's release notes, I saw several mentions of changes to Icons and their properties:

I haven't explored which of these, if any, is relevant, but they gave me an idea. I noticed that flutter_slidable instantiates the SlidableAction icon like this (link):

Icon(icon);

As a test, I forked flutter_slidable and tried explicitly assigning the color and size like this:

Icon(icon, color: foregroundColor, size: iconSize);

where foregroundColor is an existing property, and iconSize is a property I've added (defaulting to 25.0).

This yielded an appearance similar to what I observed before these API changes:

Results

Appearance in Flutter 3.24.5:

Appearance in Flutter 3.27.0 with flutter_slidable v3.1.2:

Appearance in Flutter 3.27.0 with flutter_slidable fork w/ modified icon style assignment approach:

Here's a proof-of-concept PR: #513

For @biklas7 and anyone looking to implement this workaround in the meantime, you're welcome to use this:

  flutter_slidable:
    git:
      url: https://github.com/TimeFinderApp/flutter_slidable
      ref: 6ab5a79f1f8f984ad5b5733fd94e90c8f97a0c8d

@biklas7
Copy link
Author

biklas7 commented Dec 13, 2024

What I did as a workaround for now was wrapping my SlidableAction with:

Theme(
    data: Theme.of(context).copyWith(
        outlinedButtonTheme: const OutlinedButtonThemeData(
            style: ButtonStyle(
                iconColor: WidgetStatePropertyAll(Colors.white),
            ),
         ),
  ),

@aluedtke7
Copy link

Maybe this is also related to Flutter 3.27 and the latest release:

the default background color of the SlidableAction is always white, even with a dark theme. The background color of the ActionPane does change when a dark theme is selected.

@Lilhomie42
Copy link

Lilhomie42 commented Dec 28, 2024

Thanks, @biklas7 and @lukemmtt. This workaround was a lifesaver. Here is how I used it in my project.

child: Slidable(
          endActionPane: ActionPane(
            motion: StretchMotion(),
            children: [
              Theme(
                data: Theme.of(context).copyWith(
                  outlinedButtonTheme: const OutlinedButtonThemeData(
                    style: ButtonStyle(
                      iconColor:  WidgetStatePropertyAll(Colors.white)
                    )
                  )
                ),
                child: SlidableAction(
                  onPressed: deleteFunction,
                  icon: Icons.delete,
                  
                  //foregroundColor: Color(0xFFFFFFFF),
                  
                  backgroundColor: Colors.red.shade300,
                  
                  borderRadius: BorderRadius.circular(12),
                  
                ),
              )
            ],
          ),

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants