Flutter Progress_state_button - how to change button state

Question

I am trying to use the progress state button in flutter. From the pub.dev docs, the widget should be set up as follows

    Widget buildTextWithIcon() {
return ProgressButton.icon(iconedButtons: {
  ButtonState.idle: IconedButton(
      text: "Send",
      icon: Icon(Icons.send, color: Colors.white),
      color: Colors.deepPurple.shade500),
  ButtonState.loading:
      IconedButton(text: "Loading", color: Colors.deepPurple.shade700),
  ButtonState.fail: IconedButton(
      text: "Failed",
      icon: Icon(Icons.cancel, color: Colors.white),
      color: Colors.red.shade300),
  ButtonState.success: IconedButton(
      text: "Success",
      icon: Icon(
        Icons.check_circle,
        color: Colors.white,
      ),
      color: Colors.green.shade400)
}, onPressed: onPressedIconWithText, state: stateTextWithIcon);

}

I have a function (already written and working fine) that I want to run when the button is clicked, changing the button state to ButtonState.loading then to ButtonState.success then back to ButtonState.idle. See below the function stated on the pub.dev site.

    void onPressedIconWithText() {
switch (stateTextWithIcon) {
  case ButtonState.idle:
    stateTextWithIcon = ButtonState.loading;
    Future.delayed(Duration(seconds: 1), () {
      setState(() {
        stateTextWithIcon = Random.secure().nextBool()
            ? ButtonState.success
            : ButtonState.fail;
      });
    });

    break;
  case ButtonState.loading:
    break;
  case ButtonState.success:
    stateTextWithIcon = ButtonState.idle;
    break;
  case ButtonState.fail:
    stateTextWithIcon = ButtonState.idle;
    break;
}
setState(() {
  stateTextWithIcon = stateTextWithIcon;
});

} }

However, I am new to coding, and have no idea at all on how to use "breaks" or to change the button state. Could anybody help with advising on how i would insert my funcion (let's say its just void runFunction() in to the above code, changing the state from idle --> loading (onPressed) --> success --. idle.

Any help would be greatly appreciated

Solution

You could use setState to update the values for stateTextWithIcon

  ButtonState stateTextWithIcon = ButtonState.idle;


    Widget buildTextWithIcon() {
return ProgressButton.icon(iconedButtons: {
  ButtonState.idle: IconedButton(
      text: "Send",
      icon: Icon(Icons.send, color: Colors.white),
      color: Colors.deepPurple.shade500),
  ButtonState.loading:
      IconedButton(text: "Loading", color: Colors.deepPurple.shade700),
  ButtonState.fail: IconedButton(
      text: "Failed",
      icon: Icon(Icons.cancel, color: Colors.white),
      color: Colors.red.shade300),
  ButtonState.success: IconedButton(
      text: "Success",
      icon: Icon(
        Icons.check_circle,
        color: Colors.white,
      ),
      color: Colors.green.shade400)
}, onPressed: (){
      progressButton()
},
state: stateTextWithIcon,
);

this is the fucntion handled by my onPressed

 Future progressButton() async {
    setState(() {
//sets the  state of stateTextWithIcon to loading once button is pressed
    stateTextWithIcon = ButtonState.loading;
    });
    var url = 'https://google.com';
      final response = await http.get(url);

      if (response.statusCode == 200 || response.statusCode == 201) {
        setState(() {
//sets the  state of stateTextWithIcon to success if whatever request made was successful
          stateTextWithIcon= ButtonState.success;
        });
      } else {
        setState(() {
//sets the  state of stateTextWithIcon to fail if the request was unsuccessful
        stateTextWithIcon = ButtonState.fail;
        });
      }
  }

Comments

[Zaza.codes]

Ask more questions if you still don't understand