Riverpod: ProviderScope

Thuộc phần Quản lý trạng thái trong hành trình Flutter của Coddy. Bài học 16 trên 27.

Riverpod là một package khác dùng để chia sẻ trạng thái, do cùng người tạo ra Provider viết, với một số bài học kinh nghiệm. Thay đổi lớn nhất: provider không phải là một widget trong cây. Nó là một biến final ở đầu tệp, bên ngoài mọi lớp:

import 'package:flutter_riverpod/flutter_riverpod.dart';

final quoteProvider = Provider((ref) => 'Small steps, every day.');

Hàm này cung cấp giá trị cho provider. Riverpod gọi hàm này khi widget yêu cầu lần đầu, rồi giữ lại kết quả.

Các giá trị cần được lưu ở đâu đó, và đó là nhiệm vụ của ProviderScope. Nó xuất hiện một lần, bao quanh toàn bộ ứng dụng, trong main:

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

Widget đọc provider thông qua ref. ConsumerWidget là một StatelessWidget có build nhận được một ref: ref.watch(quoteProvider). Nếu không có ProviderScope nào ở phía trên, dòng đó không có nơi nào để tìm và ứng dụng sẽ dừng với lỗi No ProviderScope found.

Thử thách

Dễ

Ứng dụng dừng lại với lỗi No ProviderScope found.

Bọc MyApp trong ProviderScope ở hàm main.
Đổi câu trích dẫn thành Small steps, every day.

Tự làm thử

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final appNameProvider = Provider((ref) => 'Daily Quote');
final quoteProvider = Provider((ref) => 'Write your quote here.');

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final appName = ref.watch(appNameProvider);
    final quote = ref.watch(quoteProvider);
    return Scaffold(
      appBar: AppBar(title: Text(appName)),
      body: Center(
        child: Text(quote, style: const TextStyle(fontSize: 24)),
      ),
    );
  }
}