flutter - withOpacity not working in FloatingActionButton - Stack Overflow

Within an AppBar, am able to correctly set the background color, as follows:

return Scaffold(
   appBar: AppBar(
           backgroundColor: Colors.red,

within the actions for the AppBar, the color of a FloatingActionButton is set to the same value:

actions: [
   FloatingActionButton(
      backgroundColor: Colors.red,

This works as expected. However, if I add withValues(alpha: 0.3) in both places, like

Colors.red.withValues(alpha: 0.3)

the background color of the AppBar changes correctly to pink. However the color of the FloatingActionButton is a not pink, rather a murky dark pink, as if there is black mixed in.

What is the issue, and what is the correct way to do this?

Thanks

Within an AppBar, am able to correctly set the background color, as follows:

return Scaffold(
   appBar: AppBar(
           backgroundColor: Colors.red,

within the actions for the AppBar, the color of a FloatingActionButton is set to the same value:

actions: [
   FloatingActionButton(
      backgroundColor: Colors.red,

This works as expected. However, if I add withValues(alpha: 0.3) in both places, like

Colors.red.withValues(alpha: 0.3)

the background color of the AppBar changes correctly to pink. However the color of the FloatingActionButton is a not pink, rather a murky dark pink, as if there is black mixed in.

What is the issue, and what is the correct way to do this?

Thanks

• flutter

Share Improve this question Follow edited Jan 30 at 13:32 user1052610 asked Jan 30 at 11:56 user1052610user1052610 4,7191414 gold badges6262 silver badges109109 bronze badges 1

• Can you add the complete screen code? Maybe there’s a widget below FAB that is contributing to the dark component of the result. – Clevino Alrin Commented Jan 31 at 8:04

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

In Flutter v3.27, .withOpacity(0.3) has been replaced with .withValues(alpha: 0.3).

Before

Colors.red.withOpacity(0.3)

After

Colors.red.withValues(alpha: 0.3)

For more details, you can check the Flutter migration guide: Migration Guide

If it doesn't work, you can try modifying the floatingActionButtonTheme inside the theme property of MaterialApp.

MaterialApp(
      theme: ThemeData(
        floatingActionButtonTheme: FloatingActionButtonThemeData(
          backgroundColor: Colors.red.withAlph(alpha: 0.3)
        ),
    ),

Alternative Solution (Not Recommended)

You can wrap the Opacity widget inside a DecoratedBox or Container with the decoration property, all within a Stack widget.

floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.transparent,
    onPressed: () {},
    child: Stack(
      children: <Widget>[
        Positioned.fill(
          child: Opacity(
            opacity: 0.5,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(15),
              ),
            ),
          ),
        ),
        const Positioned.fill(
          child: Icon(
            Icons.edit,
          ),
        ),
      ],
    ),
  ),

This was the solution: In the MaterialApp theme:

floatingActionButtonTheme: const FloatingActionButtonThemeData(
   backgroundColor: Colors.transparent),

Then, in the AppBar, when defining the FloatingActionButton, do not define the backgroundColor. It will be the same as defined for the AppBar