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));

Answer 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

Answer 2

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.

Answer 3

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

onPressed: isLoading ? null : showImage