Loading and Disabled state with custom widget support for buttons

[kmahmood74]

We can generalize this for all widgets and even generalize the idea of states (any named state) for all widgets but let's keep it simple for now.

A common requirement is to do the following -

1. Display the submit button in a disabled state unless user has entered all required input fields and the inputs are valid
2. While waiting for the server response, display the button in a 'loading' state. Many customers needs a unique widget for the loading state just like they do for the disabled state

customer achieve this today by creating custom widgets with much conditional logic to switch between different widgets for different states. It is complex and runs into limitations of custom widgets

Proposal -

Allow users to specify custom widgets for loading and disabled states for buttons.

proposed EDL:

Button:
  isLoading: boolean
  loadingWidget: #any custom widget by name or inline
  disabledWidget: #any custom widget by name or inline
  onTap: #doesn't fire in loading or disabled states

You can then do -

Button:
  isLoading: ${myAPI.isLoading} #really simple, that's why I avoided the generic `state` enum
  enabled: true | false #Button in the loading state can be enable or disabled i.e. it can take onTap events if configured
  loadingWidget:
     Row:
       Image:
         ...

1. After loading state finishes, Button goes back to its previous state whatever it was prior to loading

[kmahmood74]

cc @mehsaandev

[kmahmood74]

@sharjeelyunus already has a ticket for loading state - #1296

[sharjeelyunus]

@Umair-Manzoor-47 loading part is already merged, just need the disabled widget

[Umair-Manzoor-47]

@sharjeelyunus @kmahmood74 I've implemented the disabled button according to Form Functionality.
For form inputs to be validated we need to use widget._formKey.currentState?.validate(). Now this method validate() has forceRebuild() in it's definition. which causes error message to pop up on all fields even when user has interacted with only one field. Currently, There is no other way that returns Boolean if form is valid not without causing a rebuild. It is inconsistent which is bad for UX:

https://github.com/user-attachments/assets/738cd9bb-cbb3-4fc7-9fc3-73bc58a97320

[amin-nas]

It is inconsistent which is bad for UX

@Umair-Manzoor-47 - I agree that the video shows a bad UX. That is an implementation issue and a technical challenge. You need to figure out how to avoid triggering the error messages while keeping the submit button disabled. That's what the requirement is.