ConsumerWidget và ref.watch

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

Mọi widget đều có thể đọc một provider khi có thể lấy ref. Để cung cấp ref, hãy thay đổi hai thứ:

extends StatelessWidget đổi thành extends ConsumerWidget.
build nhận thêm tham số thứ hai, WidgetRef ref.

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final city = ref.watch(cityProvider);
    return Text(city);
  }
}

ref.watch(cityProvider) cung cấp giá trị của provider, ở đây là văn bản Lisbon, và dựng lại widget mỗi khi giá trị đó thay đổi. Nếu không có ref.watch, cityProvider chỉ là provider, chứ không phải giá trị của nó.

Mỗi widget cần một giá trị sẽ yêu cầu giá trị đó theo cách này, bất kể nó nằm ở đâu. Không có gì được truyền xuống qua hàm khởi tạo, và không cần context để tìm giá trị đó.

Thử thách

Dễ

CityName và Temperature đang hiển thị nội dung giữ chỗ. Hãy để chúng đọc các provider ở đầu tệp:

Chuyển cả hai thành ConsumerWidget.
CityName hiển thị giá trị của cityProvider.
Temperature hiển thị giá trị của temperatureProvider theo sau là °C, với cùng kích thước.

Tự làm thử

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

final cityProvider = Provider((ref) => 'Lisbon');
final temperatureProvider = Provider((ref) => 21);

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const CityName()),
        body: const Center(child: Temperature()),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('City');
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('0°C', style: TextStyle(fontSize: 64));
  }
}