Quản lý State trong Flutter với Riverpod – Hướng dẫn cơ bản

Thứ Tư, 21/04/2021

Tram Ho

Giới thiệu chung

Theo tài liệu chính thức, Riverpod là bản được viết lại hoàn chỉnh của package Provider để thực hiện các cải tiến về xử lý sự kiện-trạng thái trong Flutter một cách dễ dàng và đầy đủ hơn.

Riverpod cho phép bạn quản lý trạng thái (state) của ứng dụng theo cách biên dịch an toàn (compiler-safe), đồng thời chia sẻ nhiều ưu điểm hơn của Provider. Nó cũng mang lại nhiều lợi ích bổ sung, làm cho nó trở thành một giải pháp tuyệt vời để quản lý state trong Flutter.

Tại sao cần sử dụng Riverpod cho việc quản lý state của Flutter?

Để hiểu tại sao chúng ta cần Riverpod, ta nên xem xét một số vấn đề cố hữu của Provider.

Theo thiết kế, Provider là một cải tiến so với InheritedWidget và do đó, nó phụ thuộc vào widget-tree. Điều này dẫn đến một số hạn chế sau:

Hạn chế #1: Việc kết hợp các Provider rất dài dòng

Khi một provider có sự phụ thuộc vào một provider khác, ta phải triển khai code kiểu như sau:

Future<span class="token operator">&lt;</span>void<span class="token operator">&gt;</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> async <span class="token punctuation">{</span>
  WidgetsFlutterBinding<span class="token punctuation">.</span><span class="token function">ensureInitialized</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">final</span> sharedPreferences <span class="token operator">=</span> await SharedPreferences<span class="token punctuation">.</span><span class="token function">getInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">runApp</span><span class="token punctuation">(</span><span class="token function">MultiProvider</span><span class="token punctuation">(</span>
    providers<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      Provider<span class="token operator">&lt;</span>SharedPreferences<span class="token operator">&gt;</span><span class="token punctuation">(</span>create<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token constant">_</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> sharedPreferences<span class="token punctuation">)</span><span class="token punctuation">,</span>
      ChangeNotifierProxyProvider<span class="token operator">&lt;</span>SharedPreferences<span class="token punctuation">,</span> OnboardingViewModel<span class="token operator">&gt;</span><span class="token punctuation">(</span>
        create<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token constant">_</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">OnboardingViewModel</span><span class="token punctuation">(</span>sharedPreferences<span class="token punctuation">)</span><span class="token punctuation">,</span>
        update<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> sharedPreferences<span class="token punctuation">,</span> <span class="token constant">_</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
            <span class="token function">OnboardingViewModel</span><span class="token punctuation">(</span>sharedPreferences<span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    child<span class="token punctuation">:</span> Consumer<span class="token operator">&lt;</span>OnboardingViewModel<span class="token operator">&gt;</span><span class="token punctuation">(</span>
      builder<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token constant">_</span><span class="token punctuation">,</span> viewModel<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">OnboardingPage</span><span class="token punctuation">(</span>viewModel<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Future<void> main() async {

WidgetsFlutterBinding.ensureInitialized();

final sharedPreferences = await SharedPreferences.getInstance();

runApp(MultiProvider(

providers: [

Provider<SharedPreferences>(create: (_) => sharedPreferences),

ChangeNotifierProxyProvider<SharedPreferences, OnboardingViewModel>(

create: (_) => OnboardingViewModel(sharedPreferences),

update: (context, sharedPreferences, _) =>

OnboardingViewModel(sharedPreferences),

),

],

child: Consumer<OnboardingViewModel>(

builder: (_, viewModel) => OnboardingPage(viewModel),

),

));

}

Trong ví dụ trên, ta có một OnboardingPage nhận đối số là OnboardingViewModel. Nhưng vì bản thân OnboardingViewModel lại phụ thuộc vào SharedPreferences nên ta cần MultiProvider và ProxyProvider để kết nối chúng lại và có thể hoạt động với nhau.

Sẽ tốn nhiều effort để ta triển khai những thứ tưởng chừng như đơn giản này. Nên tốt hơn nếu tất cả các provider đểu có thể được định danh ở bên ngoài widget-tree.

Hạn chế #2: Việc get các Provider bởi type và bắt các runtime exceptions

Trong bất kì class widget nào, ta đều có thể truy cập đến các provider bởi type với cú pháp như sau:

Provider<span class="token punctuation">.</span>of<span class="token operator">&lt;</span>AnyType<span class="token operator">&gt;</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>

1 2	Provider<span class="token punctuation">.</span>of<span class="token operator"><</span>AnyType<span class="token operator">></span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>

Nhưng nếu không cẩn thận, ta có thể sẽ kết thúc với một ProviderNotFoundException trong thời gian chạy:

Điều này có thể trở thành vấn đề đối với các ứng dụng lớn, và sẽ tốt hơn nếu quyền truy cập vào provider có thể được giải quyết tại thời điểm biên dịch.

Ngoài ra, nếu có hai hoặc nhiều provider có cùng type, ta chỉ có thể truy cập đến provider gần nhất với widget.

Riverpod hoàn toàn độc lập với widget-tree và nó không mắc phải bất kỳ hạn chế nào trong 2 hạn chế đã nêu ở trên.

Vì vậy, chúng ta hãy xem làm thế nào để sử dụng nó nhé!

Cài đặt Riverpod

Bước đầu tiên là ta cần thêm phiên bản mới nhất của flutter_riverpod như một dependency vào trong file pubspec.yaml:

dependencies<span class="token punctuation">:</span>
  flutter<span class="token punctuation">:</span>
    sdk<span class="token punctuation">:</span> flutter
  riverpod<span class="token punctuation">:</span> <span class="token operator">^</span><span class="token number">0.14</span><span class="token number">.0</span><span class="token operator">+</span><span class="token number">1</span>

dependencies:

flutter:

sdk: flutter

riverpod: ^0.14.0+1

Lưu ý: Nếu ứng dụng đã sử dụng flutter_hooks, ta có tể cài đặt package hooks_riverpod để thay thế. Nó sẽ bao gồm 1 số tính năng bổ sung giúp tích hợp Hooks với Riverpod dễ dàng hơn.

ProviderScope

Khi Riverpod đã được cài đặt, ta có thể bao widget gốc bởi một ProviderScope:

void <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">runApp</span><span class="token punctuation">(</span><span class="token function">ProviderScope</span><span class="token punctuation">(</span>
    child<span class="token punctuation">:</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

void main() {

runApp(ProviderScope(

child: MyApp(),

));

}

ProviderScope là một widget có chứa state của tất cả các provider mà ta đã tạo.

Tạo một Provider

Hãy xem ta có thể sửa đổi sample Counter App để sử dụng Riverpod như nào nhé.

Trong main.dart, ta thay thế widget mặc định MyHomePage như sau:

<span class="token keyword">class</span> <span class="token class-name">MyHomePage</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  @override
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>
      body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>
        child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span>
          <span class="token single-quoted-string string">'Some text here'</span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> Theme<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>textTheme<span class="token punctuation">.</span>headline4<span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

class MyHomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Text(

'Some text here',

style: Theme.of(context).textTheme.headline4,

),

);

}

Và ngay bên trên, ta có thể thêm biến global valueProvider:

<span class="token keyword">final</span> valueProvider <span class="token operator">=</span> Provider<span class="token operator">&lt;</span>int<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token number">36</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

final valueProvider = Provider<int>((ref) {

return 36;

});

Nhưng làm thế nào ta có thể đọc được giá trị của provider từ bên trong widget?

Consumer

Ta bao widget Text với một Consumer:

<span class="token keyword">class</span> <span class="token class-name">MyHomePage</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  @override
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>
      body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>
        child<span class="token punctuation">:</span> <span class="token function">Consumer</span><span class="token punctuation">(</span>
          builder<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token constant">_</span><span class="token punctuation">,</span> ScopedReader watch<span class="token punctuation">,</span> <span class="token constant">__</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">final</span> value <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>valueProvider<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token function">Text</span><span class="token punctuation">(</span>
              <span class="token single-quoted-string string">'Value: $value'</span><span class="token punctuation">,</span>
              style<span class="token punctuation">:</span> Theme<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>textTheme<span class="token punctuation">.</span>headline4<span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Consumer(

builder: (_, ScopedReader watch, __) {

final value = watch(valueProvider);

return Text(

'Value: $value',

);

},

),

);

}

Tham số builder của Consumer cho chúng ta một ScopedReader và ta có thể sử dụng để theo dõi (watch) giá trị của provider.

Riverpod consumer sử dụng watch() để truy cập đến các provider theo tham chiếu, không phải theo type. Điều này có nghĩa là chúng ta có thể có nhiều provider cùng type như chúng ta muốn.

Đoạn code trên có thể hoạt động, tuy nhiên việc add thêm một Consumer và một Text widget thì nghe vẻ hơi dài dòng.

Để khiến chúng dễ dàng hơn, Riverpod cung cấp cho ta ConsumerWidget.

ConsumerWidget

Sửa lại example như sau:

<span class="token comment">// 1. Widget class now extends [ConsumerWidget]</span>
<span class="token keyword">class</span> <span class="token class-name">MyHomePage</span> <span class="token keyword">extends</span> <span class="token class-name">ConsumerWidget</span> <span class="token punctuation">{</span>
  @override
  <span class="token comment">// 2. build() method has an extra [ScopedReader] argument</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">,</span> ScopedReader watch<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">final</span> value <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>valueProvider<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>
      body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>
        child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span>
          <span class="token single-quoted-string string">'Value: $value'</span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> Theme<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>textTheme<span class="token punctuation">.</span>headline4<span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

// 1. Widget class now extends [ConsumerWidget]

class MyHomePage extends ConsumerWidget {

@override

// 2. build() method has an extra [ScopedReader] argument

Widget build(BuildContext context, ScopedReader watch) {

return Scaffold(

body: Center(

child: Text(

'Value: $value',

),

);

}

Với sub-class của ConsumerWidget, hàm build của ta có thêm argument là ScopedReader, và ta có thể dùng để theo dõi provider. Ngắn gọn hơn phải không nào?

StateProvider

Ta đã biết cách để đọc giá trị của provider từ bên trong của một widget. Nhưng bản thân Provider không thể tự thay đổi giá trị của chúng. Vì vậy ta cần tạo một StateProvider:

<span class="token keyword">final</span> counterStateProvider <span class="token operator">=</span> StateProvider<span class="token operator">&lt;</span>int<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

final counterStateProvider = StateProvider<int>((ref) {

return 0;

});

Class MyHomePage giờ sẽ trông như thế này:

<span class="token keyword">class</span> <span class="token class-name">MyHomePage</span> <span class="token keyword">extends</span> <span class="token class-name">ConsumerWidget</span> <span class="token punctuation">{</span>
  @override
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">,</span> ScopedReader watch<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 1. watch the new counterStateProvider</span>
    <span class="token keyword">final</span> counter <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>counterStateProvider<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>
      body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>
        child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span>
          <span class="token comment">// 2. this time we read counter.state</span>
          <span class="token single-quoted-string string">'Value: ${counter.state}'</span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> Theme<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>textTheme<span class="token punctuation">.</span>headline4<span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

class MyHomePage extends ConsumerWidget {

@override

// 1. watch the new counterStateProvider

final counter = watch(counterStateProvider);

return Scaffold(

body: Center(

child: Text(

// 2. this time we read counter.state

'Value: ${counter.state}',

),

);

}

Để kiểm tra lại cách thức code của chúng ta hoạt động như thế nào, ta sẽ add thêm một FloatingActionButton vào trong Scaffold:

floatingActionButton<span class="token punctuation">:</span> <span class="token function">FloatingActionButton</span><span class="token punctuation">(</span>
  <span class="token comment">// access the provider via context.read(), then increment its state.</span>
  onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> context<span class="token punctuation">.</span><span class="token function">read</span><span class="token punctuation">(</span>counterStateProvider<span class="token punctuation">)</span><span class="token punctuation">.</span>state<span class="token operator">++</span><span class="token punctuation">,</span>
  child<span class="token punctuation">:</span> <span class="token function">Icon</span><span class="token punctuation">(</span>Icons<span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>

floatingActionButton: FloatingActionButton(

// access the provider via context.read(), then increment its state.

onPressed: () => context.read(counterStateProvider).state++,

child: Icon(Icons.add),

),

Khi khởi chạy app, ta có thể bấm vào FAB và quan sát bộ đếm được update vào widget Text.

Lưu ý: Bên trong callback của FAB, ta truy cập đến bộ đếm bằng context.read() chứ không phải watch() vì read() là một phương thức mở rộng của BuildContext và ta nên sử dụng nó khi truy cập vào provider từ một hàm callback.

ProviderListener

Đôi khi ta muốn push một route, hiển thị một dialog hoặc SnachBar mỗi khi state của Provider thay đổi. Việc này có thể được giải quyết khi thêm ProviderListener bên trong hàm build(). Như dưới đây tôi sẽ hiển thị SnackBar khi state của bộ đếm thay đổi:

Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">,</span> ScopedReader watch<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">final</span> counter <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>counterStateProvider<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// 1. Add parent ProviderListener`</span>
  <span class="token keyword">return</span> ProviderListener<span class="token operator">&lt;</span>StateController<span class="token operator">&lt;</span>int<span class="token operator">&gt;</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>
    <span class="token comment">// 2. Specify which provider we want to listen to</span>
    provider<span class="token punctuation">:</span> counterStateProvider<span class="token punctuation">,</span>
    <span class="token comment">// 3. Run some imperative code in the onChange callback</span>
    onChange<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> counterState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      ScaffoldMessenger<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">showSnackBar</span><span class="token punctuation">(</span>
        <span class="token function">SnackBar</span><span class="token punctuation">(</span>content<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Value is ${counterState.state}'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    child<span class="token punctuation">:</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// 1. Add parent ProviderListener`

return ProviderListener<StateController<int>>(

// 2. Specify which provider we want to listen to

provider: counterStateProvider,

// 3. Run some imperative code in the onChange callback

onChange: (context, counterState) {

ScaffoldMessenger.of(context).showSnackBar(

SnackBar(content: Text('Value is ${counterState.state}')),

);

},

child: Scaffold(...)

);

}

Lư ý: ProviderListener sẽ tương đương với BlocListener của package flutter_bloc.

StateNotifierProvider

StateNotifierProvider là một giải pháp tốt cho việc lưu trữ một số trạng thái cùng với logic nghiệp vụ bên ngoài các lớp widget.

Đây là ví dụ ta có thể tạo hàm đếm giờ tương tự như đồng hộ khi sử dụng StateNotifier và class Timer:

import <span class="token single-quoted-string string">'dart:async'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Clock</span> <span class="token keyword">extends</span> <span class="token class-name">StateNotifier</span><span class="token operator">&lt;</span>DateTime<span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 1. initialize with current time</span>
  <span class="token function">Clock</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token function">super</span><span class="token punctuation">(</span>DateTime<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 2. create a timer that fires every second</span>
    _timer <span class="token operator">=</span> Timer<span class="token punctuation">.</span><span class="token function">periodic</span><span class="token punctuation">(</span><span class="token function">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token constant">_</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 3. update the state with the current time</span>
      state <span class="token operator">=</span> DateTime<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  late <span class="token keyword">final</span> Timer _timer<span class="token punctuation">;</span>

  <span class="token comment">// 4. cancel the timer when finished</span>
  @override
  void <span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    _timer<span class="token operator">?</span><span class="token punctuation">.</span><span class="token function">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    super<span class="token punctuation">.</span><span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import 'dart:async';

class Clock extends StateNotifier<DateTime> {

// 1. initialize with current time

Clock() : super(DateTime.now()) {

// 2. create a timer that fires every second

_timer = Timer.periodic(Duration(seconds: 1), (_) {

// 3. update the state with the current time

state = DateTime.now();

});

}

late final Timer _timer;

// 4. cancel the timer when finished

@override

void dispose() {

_timer?.cancel();

super.dispose();

}

Sau đó ta có thể tạo một provider mới như sau:

<span class="token keyword">final</span> clockProvider <span class="token operator">=</span> StateNotifierProvider<span class="token operator">&lt;</span>Clock<span class="token punctuation">,</span> DateTime<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">Clock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

final clockProvider = StateNotifierProvider<Clock, DateTime>((ref) {

return Clock();

});

Thêm intl vào pubspec.yaml để hiển thị giờ theo format:

import <span class="token single-quoted-string string">'package:intl/intl.dart'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">MyHomePage</span> <span class="token keyword">extends</span> <span class="token class-name">ConsumerWidget</span> <span class="token punctuation">{</span>
  @override
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">,</span> ScopedReader watch<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// this line is used to watch the provider's *state*</span>
    <span class="token comment">// to get an instance of the clock itself, call `watch(clockProvider.notifier)`</span>
    <span class="token keyword">final</span> currentTime <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>clockProvider<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// format the time as `hh:mm:ss`</span>
    <span class="token keyword">final</span> timeFormatted <span class="token operator">=</span> DateFormat<span class="token punctuation">.</span><span class="token function">Hms</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>currentTime<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>
      body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>
        child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span>
          timeFormatted<span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> Theme<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>textTheme<span class="token punctuation">.</span>headline4<span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import 'package:intl/intl.dart';

class MyHomePage extends ConsumerWidget {

@override

// this line is used to watch the provider's *state*

// to get an instance of the clock itself, call `watch(clockProvider.notifier)`

final currentTime = watch(clockProvider);

// format the time as `hh:mm:ss`

final timeFormatted = DateFormat.Hms().format(currentTime);

return Scaffold(

body: Center(

child: Text(

timeFormatted,

),

);

}

Khởi chạy app, ta sẽ thấy thời gian hiện tại được update mỗi giây tương tự như đồng hồ.

Ví dụ về đồng hồ này là một trường hợp sử dụng tối thiểu của StateNotifier. Nói chung, bạn nên luôn nghĩ về StateNotifier là nơi diễn ra logic nghiệp vụ của bạn:

Khi bạn thiết lập mọi thứ theo cách này, các widget của bạn có thể:

Xem trạng thái của model và rebuild lại widget khi nó thay đổi.
Gọi các phương thức trong các class model của bạn (sử dụng context.read <Model>), từ đó có thể cập nhật trạng thái và (tùy chọn) tương tác với các dịch vụ bên ngoài.

Ok, đây là cách StateNotifierProvider hoạt động.

Ngoài ra, Riverpod cũng có một ChangeNotifierProvider. hoạt động theo cách rất giống nhau. Bạn có thể khai báo một lớp Model với ChangeNotifier như một mixin.

Nhưng ChangeNotifier có nhiều nhược điểm khác nhau, vì vậy tôi khuyên bạn nên sử dụng StateNotifier và StateNotifierProvider thay thế.

Tạm thời stop tại đây nhé. Bài viết sau ta sẽ đi timef hiểu thêm về các kiểu Provider hay sử dụng. Cảm ơn các bạn đã theo dõi bài viết này.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Quản lý State trong Flutter với Riverpod – Hướng dẫn cơ bản

Giới thiệu chung

Tại sao cần sử dụng Riverpod cho việc quản lý state của Flutter?

Hạn chế #1: Việc kết hợp các Provider rất dài dòng

Hạn chế #2: Việc get các Provider bởi type và bắt các runtime exceptions

Cài đặt Riverpod

ProviderScope

Tạo một Provider

Consumer

ConsumerWidget

StateProvider

ProviderListener

StateNotifierProvider

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript