sunarya-thito
[Feature]: Loading Button
Feature Description
When you click a button you should "active" the loading version of the button with a circular loader on the leading button. The button should be also disabled as long as the action needs to be.
Problem Statement
You can´t display the client that an action is currently performing. Sure you can disable the button but without some loading animation the user may be confused.
Proposed Solution
Add a button property (or extension) to extend the loading effect.
Feature Type
Component Enhancement
Use Cases
Could be used on all async methods inside a button handler.
Alternatives Considered
No response
Priority
Low - Nice to have
Implementation Ideas
No response
Related Examples
No response
Checklist
- [x] I have searched existing issues and this feature hasn't been requested
- [x] I have provided clear use cases for this feature
- [x] I understand this feature may take time to implement
Couldn't quite understand what this is, button have trailing and leading parameter which you can pass CircularProgressIndicator. There is also SubmitButton in case you are handling a form.
The idea is that the leading loading indicator could be set as parameter loading (or whatever). If it´s set to true the loading animation slide with a smart animation in as long as the onPressed method need to be finished.
I think this could easily be done with:
Future<void>? _currentLoading;
Future<void> doSomething() { ... }
// ...
return FutureBuilder(
future: _currentLoading,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return PrimaryButton(
leading: CircularProgressIndicator(),
child: Text('Loading'),
);
}
return PrimaryButton(
child: Text('Do Something'),
onPressed: () {
setState(() {
_currentLoading = doSomething();
});
},
);
},
);
Sure, but it would be good if it's already integrated inside the button component or a new one called LoadingButton. If you don't have time for this I totally understand understand and could create a pull request. Your choice 👍🏻