How to Disable Button In Flutter?

Need to Disable Button

Suppose you have a form that sends data to your backend. When users tap the submit button and you don’t do anything such as clearing the Textfields, showing loading icon and you have the Submit button still enabled, there is a high chance that the user will click on the Submit button again. Therefore you should block the user as long as the action is still being processed. Disabling a Button while the action is being performed is a part of blocking the user.

How to Disable Button in Flutter

To disable button in Flutter, just assign the null value to the onPressed parameter of the Button.

Here’s how to disable the ElevatedButton in Flutter:

Step 1: Add the ElevatedButton to your page.

Step 2: Inside the ElevatedButton, assign the null value to the onPressed parameter.

Step 3: Run the app.

Code Example:

ElevatedButton(
  onPressed: null, //<-- SEE HERE
  child: const Text(
    'Submit',
    style: TextStyle(fontSize: 24),
  ),
),

Output:

Similarly, you can disable the other buttons such as TextButton, OutlinedButton, FloatingActionButton, IconButton, etc.

Column(
  children: [
    TextField(
      controller: myController,
      decoration: InputDecoration(labelText: 'Enter Name'),
    ),
    const ElevatedButton(
      onPressed: null,
      child: Text(
        'Submit',
        style: TextStyle(fontSize: 24),
      ),
    ),
    const TextButton(
      onPressed: null,
      child: Text(
        'Submit',
        style: TextStyle(fontSize: 24),
      ),
    ),
    const OutlinedButton(
      onPressed: null,
      child: Text(
        'Submit',
        style: TextStyle(fontSize: 24),
      ),
    ),
    const FloatingActionButton(
      onPressed: null,
      child: Text(
        'OK',
        style: TextStyle(fontSize: 24),
      ),
    ),
    const IconButton(
      onPressed: null,
      icon: Icon(
        Icons.done,
      ),
    )
  ],
)

Output: