ElevatedButton disable onPressed

Question

There are 4 ElevatedButtons in my widget in a Row. If one of them is pressed an image will be shown based on the button. This image comes from an API so it takes a bit to load. Is it possible to disable the not-selected buttons while the data from the API arrives?

This is the code of the button:

 @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        padding: EdgeInsets.symmetric(horizontal: 5, vertical: 3),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5.0),
        ),
        primary: mainBgColor,
      ),
      onPressed: showImage,
      child: Text(
        title,
      ),
    );
  }

And this is the function:

showImage: =>_controller.buttonTap(getImage(quizImages.wrong));

Does this answer your question? [How do I disable a Button in Flutter?](https://stackoverflow.com/questions/49351648/how-do-i-disable-a-button-in-flutter) — Robert Sandberg, Aug 18 '22 at 13:29

score 1 · Answer 1 · answered Aug 18 '22 at 13:26

1

A button is disabled when the property onPressed is null. That is, you can assign null to your button onPressed or a callback based on a flag that is set while the image is fetched.

answered Aug 18 '22 at 13:26

score 1 · Answer 2 · answered Aug 18 '22 at 13:27

1

Sure, you need a variable that tells you if you're in loading state and then you can do:

onPressed: isLoading ? null : showImage

answered Aug 18 '22 at 13:27

FLjubic

161
1
4

score 1 · Accepted Answer · answered Aug 18 '22 at 16:56

1

Please take one variable which state changes respectively as below :

Start Api Calling :

isFetching = true

Api Success / Failure :

isFetching = false

Put below code at onPressed callback :

onPressed: isFetching ? null : showImage

answered Aug 18 '22 at 16:56

Jaimil Patel

1,301
6
13

ElevatedButton disable onPressed

3 Answers3