ConsumerWidget ve ref.watch

Coddy'nin Flutter Journey'sinin Durum Yönetimi bölümünün bir parçası. Ders 17 / 27.

Herhangi bir widget, bir ref edinebildiğinde bir sağlayıcıyı okuyabilir. Widget'a böyle bir değer vermek için iki şeyi değiştirin:

extends StatelessWidget, extends ConsumerWidget olur.
build ikinci bir parametre alır: 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), sağlayıcının değerini verir; burada bu değer Lisbon metnidir ve değer her değiştiğinde widget'ı yeniden oluşturur. ref.watch olmadan cityProvider, değeri değil, yalnızca sağlayıcının kendisidir.

Bir değere ihtiyaç duyan her widget, nerede olursa olsun, bu şekilde ister. Yapıcılar aracılığıyla aşağıya hiçbir şey aktarılmaz ve değeri bulmak için context gerekmez.

Görev

Kolay

CityName ve Temperature yer tutucular gösteriyor. Dosyanın üst kısmındaki sağlayıcıları okuyacak şekilde düzenleyin:

İkisini de ConsumerWidget'a dönüştürün.
CityName, cityProvider değerini gösterir.
Temperature, temperatureProvider değerini aynı boyutta ve ardından °C gelecek şekilde gösterir.

Kendin dene

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