Publish to my blog (weekly)

• Getting started | Riverpod

  • .autoDispose.family
  • WidgetRef ref
  • // We use `ref.watch` to listen to another provider, and we pass it the provider
  • // that we want to consume. Here: cityProvider
  • // We can then use the result to do something based on the value of `cityProvider`.
  • This way, if the request failed and the UI leaves the screen then re-enters it, then the request will be performed again. But if the request completed successfully, the state will be preserved and re-entering the screen will not trigger a new request.
  • the only difference being that it has an extra parameter on its build method: the "ref" object.
  • ConsumerWidget
  • // We create a "provider", which will store a value (here "Hello world").
    // By using a provider, this allows us to mock/override the value exposed.
  • WidgetRef ref
  • final helloWorldProvider = Provider((_) => 'Hello world');
  • FutureProvider.autoDispose
  • // For widgets to be able to read providers, we need to wrap the entire
    // application in a "ProviderScope" widget.
  • final cancelToken = CancelToken();
  • ProviderScope(
  • ref.onDispose(() => cancelToken.cancel());
  • autoDispose.family
  • cancelToken: cancelToken
  • // If the request completed successfully, keep the state
  • // Note: MyApp is a HookConsumerWidget, from hooks_riverpod.
  • HookConsumerWidget
  • ProviderScope
  • ConsumerStatefulWidget
  • WidgetRef ref
  • final String value = ref.watch(helloWorldProvider);
  • ConsumerState<HomeView>
  • Text(value),
  • // "ref" can be used in all life-cycles of a StatefulWidget.
  • // We can also use "ref" to listen to a provider inside the build method
  • @freezed
    abstract class MyParameter with _$MyParameter {
    factory MyParameter({
    required int userId,
    required Locale locale,
    }) = _MyParameter;
    }
  • class MyParameter extends Equatable {
    MyParameter({
    required this.userId,
    required this.locale,
    });
    
    final int userId;
    final Locale locale;
    
    @override
    List<Object> get props => [userId, locale];
    }
  • MyParameter
  • myParameter
  • MyParameter
  • myParameter
  • HookConsumerWidget
  • WidgetRef ref
  • userId: userId, locale: locale
  • // HookConsumerWidget allows using hooks inside the build method
  • // We can also use the ref parameter to listen to providers.
  • userId: userId, locale: locale
  • StatefulHookConsumerWidget
  • .family, which allows creating a provider from external parameters.
  • ConsumerState<HomeView>
  • .autoDispose.family
  • // "ref" can be used in all life-cycles of a StatefulWidget.
  • // Like HookConsumerWidget, we can use hooks inside the builder
  • // We can also use "ref" to listen to a provider inside the build method
  • HookConsumer
  • ref
  • // Like HookConsumerWidget, we can use hooks inside the builder
  • // We can also use the ref parameter to listen to providers.
  • refer to My provider updates too often, what can I do?
  • ref.watch
  • ref.listen.
  • ref.read
  • StateProvider<FilterType>((ref) => FilterType.none);
  • StateNotifierProvider<TodoList, List<Todo>>((ref) => TodoList());
  • // obtains both the filter and the list of todos
  • .selectAsync
  • ConsumerWidget
  • // use ref to listen to a provider
  • rather than rebuilding the widget/provider if the listened to provider changes, using ref.listen will instead call a custom function.
  • That can be useful for performing actions when a certain change happens, such as showing a snackbar when an error happens.
  • (int? previousCount, int newCount) {
    print('The counter changed $newCount');
    }
  • ConsumerWidget
  • ConsumerWidget
  • // Call `increment()` on the `Counter` class
  • But this is a very bad practice and can cause bugs that are difficult to track.
  • read
  • watch
  • synchronously read
  • AsyncValue
  • obtain the associated Stream,
  • Stream
  • stream
  • obtain a Future that resolves with the latest value emitted
  • Future
  • future
  • select((user) => user.name)
  • By using select, we are able to specify a function that returns the property that we care about.
  • listen
  • Doing so will call the listener only when the name changes.

Posted from Diigo. The rest of my favorite links are here.