Icon in SlidableAction is not using foreground color

[biklas7]

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

[lukemmtt]

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]

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

• Expose foreground property of TextStyle in Icon widget flutter/flutter#150315
• Fix handling of iconSize and iconColor defaults for ButtonStyleButton subclasses. flutter/flutter#143501
• Adjust ButtonStyle.{foreground,icon}Color dartdocs for new behavior flutter/flutter#154646
• Fix missing icon props in button styleFrom methods flutter/flutter#154821

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]

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]

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]

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),
                  
                ),
              )
            ],
          ),