Make ElevatedButton look disabled but still have onPressed-CodePudding

How can I make ElevatedButton look as if it is disabled but still have onPressed pointing to a function, so it appears disabled but if you press it you get a dialog displaying a text explaining how you have that functionality enabled?

CodePudding user response：

You can wrap the ElevatedButton with a GestureDetector and use GestureDetector.onTap instead of ElevatedButton.onPressed. If the button is disabled, i.e. onPressed == null, tap events on it passthrough to the GestureDetector. Otherwise, the button gets the onPressed event. Something like the following:

GestureDetector(
  onTap: () {
    print('GestureDetector.onTap');
    // Show the dialog explaining why the button is disabled.
  },
  child: ElevatedButton(
    onPressed: isDisabled
        ? null
        : () {
            print('ElevatedButton.onPressed');
          },
    child: const Text('Test'),
  ),
),

CodePudding user response：

Adding splashFactory to style removes the spalsh-effect on press. Like this:

ElevatedButton(
  onPressed: onPressed,
  child: Text(buttonText),
  style: ElevatedButton.styleFrom(
    minimumSize: const Size.fromHeight(40),
    splashFactory: NoSplash.splashFactory,
    primary: buttonColor,
  ),