Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cesarferreira/uistate
Cleanest way of representing UI state in a flutter widget.
https://github.com/cesarferreira/uistate
dart flutter state state-machine
Last synced: about 1 month ago
JSON representation
Cleanest way of representing UI state in a flutter widget.
- Host: GitHub
- URL: https://github.com/cesarferreira/uistate
- Owner: cesarferreira
- License: mit
- Created: 2021-03-07T21:57:29.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-12T17:25:43.000Z (over 1 year ago)
- Last Synced: 2023-08-20T23:27:38.287Z (over 1 year ago)
- Topics: dart, flutter, state, state-machine
- Language: C++
- Homepage: https://pub.dev/packages/uistate
- Size: 1.23 MB
- Stars: 11
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# UIState
> Cleanest way of representing UI state in a flutter widget.
Loading | Success | Failure |
:-------------------------:|:-------------------------:|:----------------------:|
![](https://github.com/cesarferreira/UIState/raw/master/extras/spinner.png) | ![](https://github.com/cesarferreira/UIState/raw/master/extras/success.png) | ![](https://github.com/cesarferreira/UIState/raw/master/extras/failure.png)## Usage
Get a live/stream representation of your data:
```dart
UIState state = Provider.of(context).state;
```Inspired by kotlin's inline switch:
The `when` returns the widget of the current state of your `state` variable
```dart
state.when(
success: (event) => Text(event.value),
failure: (event) => Text('Error: ${event.errorMessage}'),
loading: (event) => CircularProgressIndicator(),
)
```## `build` method example:
```dart
@override
Widget build(BuildContext context) {
UIState state = Provider.of(context).state;return Scaffold(
body: Container(
margin: EdgeInsets.all(20),
child: Center(
child: state.when(
success: (event) => Text(event.value),
failure: (event) => Text('Error: ${event.errorMessage}'),
loading: (event) => CircularProgressIndicator(),
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.adjust_sharp),
onPressed: () {
Provider.of(context, listen: false).fetchUser();
},
),
);
}
```## The `ChangeNotifier` (ViewModel) side of it
The `state` variable will assume the loading/failure/success state of the data request:
```dart
class ViewModel extends ChangeNotifier {
final UsernameRepository repository;
ViewModel(this.repository);UIState state = Loading();
fetchUser() async {
try {
String username = await repository.getUsername();
state = Success(username);
} catch (error) {
state = Failure(error.toString());
}notifyListeners();
}
}
```## Install
```sh
flutter pub add uistate
```as explained: on these [steps](https://pub.dev/packages/uistate/install)
---------------------
Made with ♥ by [Cesar Ferreira](https://cesarferreira.com)