ConsumerWidget과 ref.watch

Coddy Flutter 여정의 상태 관리 섹션에 포함된 레슨. 27개 중 17번째.

모든 위젯은 ref를 가져올 수 있으면 프로바이더를 읽을 수 있습니다. ref를 전달하려면 두 가지를 변경하세요.

extends StatelessWidget을 extends ConsumerWidget으로 바꿉니다.
build에 두 번째 매개변수인 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));
  }
}