Session

From state management to UI states with Riverpod

*This session aims at the holy grail of apps: UI states consistency!*

## Why we care about state management?

State management is on your mind, you talk about it all day, you fight about it, you dream about it... But what is indeed the goal of state management?

Give your users a perfect UI consistency!

it means implementing all the everyday use cases of an app consistently, and giving a coherent UI feedback.

The key to UI feedback is the correct handling of error states depending on which UI state we are currently in.

For example:

* If we are loading from scratch data, and an error occurs, we will replace the data with an error view,
* If we have already loaded a screen and a error occurs during refresh, we will show a Snackbar.

## Handling all use cases

We'll enumerate top use-cases:

1. Loading from scratch
https://media.githubusercontent.com/media/roubachof/falotier_riverpod/main/docs/loading_home.jpg

2. Refreshing
https://github.com/roubachof/falotier_riverpod/raw/main/docs/refresh_home.jpg

3. Adding an item to a list
https://github.com/roubachof/falotier_riverpod/raw/main/docs/add_item.jpg

We could also see: updating an item, handle pagination, search in a list... But hey, we only have 25 minutes :)

## Riverpod implementation

We'll see how Riverpod was carefully crafted to handle elegantly all those use cases thanks to its reactive nature.

We'll have a good look at the AsyncValue object: he is our best friend to transform state to UI views!

```dart
/// A provider that asynchronously exposes the current user
final userProvider = StreamProvider(User)((_) async* {
// fetch the user
});

class Example extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final AsyncValue(User) user = ref.watch(userProvider);

return user.when(
loading: () => CircularProgressIndicator(),
error: (error, stack) => Text('Oops, something unexpected happened'),
data: (user) => Text('Hello ${user.name}'),
);
}
}
```

Throughout our session we will use the Falotier (https://github.com/roubachof/falotier_riverpod) app (cause I live in Paris, monsieur baguette!) as a support to showcase both the UI states and the Riverpod code.

Intermediate level

The presentation is based on the falotier app: https://github.com/roubachof/falotier_riverpod The goal of the falotier PoC is to implement all real life app scenarios with Riverpod.

We'll see the code in android studio and launch the app to showcase the use cases. I already made 2 blog posts about it on Sharpnado: https://www.sharpnado.com/falotier-riverpod/

We'll start by showing all the use cases with the app, then move to see the providers, and then how we support each use cases with Riverpod and AsyncValue.

Jean-Marie Alfonsi

Freelance software engineer at Sharpnado

Paris, France

Actions

Please note that Sessionize is not responsible for the accuracy or validity of the data provided by speakers. If you suspect this profile to be fake or spam, please let us know.

Jump to top