ConsumerWidget dan ref.watch

Termasuk bagian Pengelolaan State dalam perjalanan Flutter di Coddy. Pelajaran 17 dari 27.

Widget apa pun dapat membaca provider setelah memiliki akses ke ref. Untuk memberinya akses, ubah dua hal:

extends StatelessWidget menjadi extends ConsumerWidget.
build mendapat parameter kedua, 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) memberimu nilai provider, di sini teks Lisbon, dan membangun ulang widget setiap kali nilai tersebut berubah. Tanpa ref.watch, cityProvider hanya provider itu sendiri, bukan nilainya.

Setiap widget yang membutuhkan nilai memintanya seperti ini, di mana pun widget itu berada. Tidak ada yang diteruskan melalui constructor, dan kamu tidak perlu context untuk menemukannya.

Tantangan

Mudah

CityName dan Temperature menampilkan placeholder. Buat keduanya membaca provider di bagian atas file:

Ubah keduanya menjadi ConsumerWidget.
CityName menampilkan nilai cityProvider.
Temperature menampilkan nilai temperatureProvider diikuti °C, dengan ukuran yang sama.

Coba sendiri

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));
  }
}

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengelolaan State

Latihan sendiri: Compiler Flutter online