I want to greyout a FloatingActionButton in Flutter. How do I do that?

Changing the onPress to null doesn't work:

floatingActionButton: const FloatingActionButton(
  onPressed: null,
  child: Icon(Icons.add),
)

CodePudding user response：

You can grey out a FloatingActionButton by using the enabled property and setting it to false. The enabled property determines whether the button is interactable. When set to false, the button will be greyed out and the onPressed callback won't be triggered when tapped:

floatingActionButton: FloatingActionButton(
  onPressed: null,
  child: Icon(Icons.add),
  enabled: false,
)

If you want to change the enabled property dynamically based on some condition, you can use a boolean variable in your code to control the value of enabled.

CodePudding user response：

there are two options....

1. you can specify the background colour as grey just like this:

floatingActionButton: const FloatingActionButton(
          onPressed: null,
          child: Icon(Icons.add),
          backgroundColor: Colors.grey,
          
        ),

2. You can wrap it with Opacity widget just like this:

floatingActionButton: const Opacity(
        opacity: .3,//level of opacity 0~1
          child:  FloatingActionButton(
            onPressed: null,
            child: Icon(Icons.add),
            backgroundColor: Colors.grey,
            
          ),
        ),