How to Disable Button While Developing an App In Flutter?

Flutter is one of the popular open source UI toolkits with a portable nature and is crafted to build the most dynamic applications, both for mobile and web application. The best thing about Flutter is that it uses a single codebase for Android and iOS application creation. Flutter is free and open-source and is used by developers worldwide and uses the Dart Language.

Buttons play a vital role in the development of any app. It is the most important UI element that an app has. The button on the app allows the users to perform actions when tapped on it. However, sometimes, a need may arise where the button has to be disabled. This article will help you understand the simple way you can disable a button in the Flutter app. We recommendhiring a flutter team to get flawless services.

Steps to Disable a Button

For example, there is a form that helps to send the data to the back end. When a user clicks on the submit button on the app and you do not do anything, and yet you have the submit button still enabled, there are chances that the user will re-click on the button. Hence, it is necessary to block the user when the action is performed. This can only be possible by disabling the button.

When you disable the button for the user, you block the user from performing any action until the last action is completed. You can also consult Flutter developers to solve such issues and to make hassle-free app development process for enterprise level software, and you can rest assured that you will get the best services.

If you wish to disable a button in a flutter, all you need to do is assign the Null value to the compressed side of the button. You need to follow certain steps if you want to disable a button while developing an app on flutter. The Steps are:

Step 1

Add the button you want to disable on your page.

Step 2

Inside the selected button, you must assign the Null value to the onPressed side.

Step 3

After you are done with these, all you need to do is, run the app.

Code Example:

IconButton(

onPressed: null, //<– SEE HERE

child: const Text(

‘Submit’,

style: TextStyle(fontSize: 24),

),

),

You can disable various buttons like the ElavatedButton, IconButton, OutlinedButton, TextButton, FloatingActionButton, etc.

Code Example:

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,

),

)

],

)

Disabling a Button if the TextField is Empty

We have seen the basic method of disabling a button while developing an app in a flutter. Now we will see how to disable or enable these buttons programmatically. This part of the article will tell you how to disable a button if the user on the other end has not entered a text in the TextField or has removed a text from the TextField. There are certain steps that one needs to follow for this. The steps are:

Step 1

You will have to add a variable to determine whether to disable or enable a button.

bool submit = false;

Step 2

Listen to the changes made in the TextField using a .addlistener(). However, if there is no text in the TextField, then it is a must for you to add a variable and then rebuild the widget tree.

final myController = TextEditingController();

//———-

@override

void initState() {

// TODO: implement initState

super.initState();

myController.addListener(() {

setState(() {

submit = myController.text.isNotEmpty;

});

});

}

//———–

TextField(

controller: myController,

decoration: InputDecoration(labelText: ‘Enter Name’),

),

Step 3

You need to check the variable that you have put inside the compressed parameter of the button, and according to that, return the function or Null to take action.

ElevatedButton(

onPressed: submit ? () => submitData : null, //<– SEE HERE

child: Text(

‘Submit’,

style: TextStyle(fontSize: 24),

),

),

Full Code Example:

import ‘package:flutter/foundation.dart’;

import ‘package:flutter/material.dart’;

class DisableButtonDemo extends StatefulWidget {

const DisableButtonDemo({Key? key}) : super(key: key);

@override

State<DisableButtonDemo> createState() => _DisableButtonDemoState();

}

class _DisableButtonDemoState extends State<DisableButtonDemo> {

final myController = TextEditingController();

bool submit = false;

@override

void initState() {

// TODO: implement initState

super.initState();

myController.addListener(() {

setState(() {

submit = myController.text.isNotEmpty;

});

});

}

@override

void dispose() {

// Clean up the controller when the widget is disposed.

myController.dispose();

super.dispose();

}

@override

Widget build(BuildContext context) {

return GestureDetector(

onTap: () {

FocusManager.instance.primaryFocus?.unfocus();

},

child: Scaffold(

appBar: …,

body: Column(

children: [

TextField(

controller: myController,

decoration: InputDecoration(labelText: ‘Enter Name’),

),

ElevatedButton(

onPressed: submit ? () => submitData : null,

child: Text(

‘Submit’,

style: TextStyle(fontSize: 24),

),

),

],

),

),

);

}

}

submitData() {

// Do something here

}

Conclusion

Disabling a button while developing an app on flutter is important since by disabling a button, you get to control the user’s actions. In this article, we have walked you through the steps you require to take if you want to disable a button on flutter with a few practical examples. You can also use these techniques to disable other buttons in the flutter. 

To make the process of building an app on flutter, you can also choose to hire a flutter team from Flutter Agency. The team of experts will help you craft your choice’s application in the best possible way. We hope this article will help you. See you in our next post!

Leave a Reply

Back To Top