ConsumerWidgetとref.watch

CoddyのFlutterジャーニー「状態管理」セクションの一部。レッスン 17/27。

ウィジェットは、refを取得できれば、どのプロバイダーでも読み取れます。refを渡すには、次の2点を変更します。

extends StatelessWidgetをextends ConsumerWidgetに変更します。
buildに2つ目のパラメーター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)を使うと、プロバイダーの値（ここではテキストLisbon）を取得でき、その値が変わるたびにウィジェットが再構築されます。ref.watchを使わない場合、cityProviderはプロバイダーそのものであり、その値ではありません。

値を必要とする各ウィジェットは、どこに配置されていても、このように値を取得します。コンストラクターを通じて値を渡す必要はなく、値を見つけるためにcontextを使う必要もありません。

チャレンジ

簡単

CityNameとTemperatureはプレースホルダーを表示しています。ファイルの先頭にあるプロバイダーを読み取るようにしましょう。

両方をConsumerWidgetにします。
CityNameにはcityProviderの値を表示します。
TemperatureにはtemperatureProviderの値の後に°Cを、同じサイズで表示します。

自分で試してみよう

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