Flutter Enable Disable ElevatedButton Programmatically on Press

The ElevatedButton widget has a property onPressed which support a function. It calls the function on Click event. If we pass null to this function then it disables the button and not allow the user to click on button. We can control enable disable functionality of ElevatedButton dynamically using combination of State and ternary operator.

Flutter Enable Disable ElevatedButton Programmatically on Press:

1. Defining a Boolean value controlEnabled with default True value. If we pass true here as default value then the button is Enabled. If we pass False as default value then the button will be by default Disabled.

 bool controlEnabled = true;

3. Making 2 functions which we calls on individual button click events. In first function we are changing controlEnabled value as True and in other function we're changing controlEnabled value as False using State method.

isEnabled() {
    setState(() {
      controlEnabled = true;
    });
  }

  isDisable() {
    setState(() {
      controlEnabled = false;
    });
  }

4. Making our default function which we calls on our Enabled Disabled button.

  void demoFunction() {
    print('Clicked');
  }

5. Making our main ElevatedButton which we want to enable and disable programmatically. Here in the button we are passing a condition using ternary operator.

Code Explanation:

• When controlEnabled has True value the this will Active - Enable the button.
• When controlEnabled has False value then this will Disabled the button.
• This is controlling using Ternary operator. If given condition return true then ternary operator calls the first argument and if the given condition returns false then it will call the second argument.

onPressed: controlEnabled ? demoFunction : null,

Complete ElevatedButton code:

ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.blue,
            textStyle: const TextStyle(fontSize: 21),
          ),
          onPressed: controlEnabled ? demoFunction : null,
          child: const Text('Demo Elevated Button'),
        )

6. Creating another two buttons which is used to enable and disable button by calling above functions.

 Container(
        margin: const EdgeInsets.all(10),
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.purple,
            textStyle: const TextStyle(fontSize: 21),
          ),
          onPressed: isEnabled,
          child: const Text('Enable ElevatedButton'),
        ),
      ),
      ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.purple,
          textStyle: const TextStyle(fontSize: 21),
        ),
        onPressed: isDisable,
        child: const Text('Disable ElevatedButton'),
      ),

7. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(body: Center(child: MyApp())));
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State <myapp> {
  bool controlEnabled = true;

  isEnabled() {
    setState(() {
      controlEnabled = true;
    });
  }

  isDisable() {
    setState(() {
      controlEnabled = false;
    });
  }

  void demoFunction() {
    print('Clicked');
  }

  @override
  Widget build(BuildContext context) {
    return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
      Container(
        margin: const EdgeInsets.all(12),
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.blue,
            textStyle: const TextStyle(fontSize: 21),
          ),
          onPressed: controlEnabled ? demoFunction : null,
          child: const Text('Demo Elevated Button'),
        ),
      ),
      Container(
        margin: const EdgeInsets.all(10),
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.purple,
            textStyle: const TextStyle(fontSize: 21),
          ),
          onPressed: isEnabled,
          child: const Text('Enable ElevatedButton'),
        ),
      ),
      ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.purple,
          textStyle: const TextStyle(fontSize: 21),
        ),
        onPressed: isDisable,
        child: const Text('Disable ElevatedButton'),
      ),
    ]);
  }
}

Screenshots: