Flutter – Disable ElevatedButton
The ElevatedButton class represents a material design elevated button. The flutter developers can use elevated buttons to add dimension to otherwise mostly flat layouts such as in long busy lists of content, or in wide spaces. The flutter developers should avoid using elevated buttons on already-elevated content such as dialogs or cards. The flutter developers can override the ElevatedButton style with its style parameter. The static styleFrom() method is a convenient way to create an ElevatedButton ButtonStyle from simple values.
The following flutter application development tutorial will demonstrate how to disable an ElevatedButton widget. Here we will use the ElevatedButton class’s onPressed property to disable the ElvatedButton.
If the ElevatedButton’s onPressed and onLongPress callbacks are null, then the button will be disabled. So the flutter developers can disable an ElevatedButton by assigning a null value to both the onPressed and onLongPress properties.
The ElevatedButton’s onPressed property is called when the button is tapped or otherwise activated. The ElevatedButton’s onLongPress property is called when the button is long-pressed.
The ElevatedButton class enabled property value is a bool that defines whether the button is enabled or disabled. Buttons are disabled by default. To enable a button, the flutter developers have to set its onPressed or onLongPress properties to a non-null value.
In this flutter example code, we don’t assign the onLongPress property. And we put a null value for the onPressed property. As a result, our specified ElevatedButton becomes disabled.
main.dart
import 'package:flutter/material.dart';
void main(){
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter - ElevatedButton Disabled")
),
body: Center(
child: ElevatedButton(
onPressed: null,
child: const Text("Click Me"),
style: ButtonStyle(
padding: MaterialStateProperty.resolveWith(
(states) => const EdgeInsets.symmetric(
horizontal: 64, vertical: 36
)
)
),
)
),
),
)
);
}
More flutter tutorials
- flutter – How to change ElevatedButton disabled color
- flutter – MaterialStateProperty padding
- flutter – MaterialStateProperty color
- flutter – How to change ElevatedButton border color
- flutter – How to change ElevatedButton shape
- flutter – How to create rounded corners ElevatedButton
- flutter – ElevatedButton border radius only
- flutter – How to change TextButton size
- flutter – How to add padding to TextButton
- flutter – How to add a border to TextButton
- flutter – How to create TextButton rounded border
- flutter – TextButton border radius only
- flutter – How to create a circular TextButton
- flutter – How to add padding to OutlinedButton
- flutter – OutlinedButton shape
Flutter Tutorials 