Riverpod: ProviderScope

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

Riverpod은 Provider와 같은 사람이 몇 가지 교훈을 얻은 뒤 작성한 또 다른 공유 상태 관리 패키지입니다. 가장 큰 변화는 provider가 트리의 위젯이 아니라는 점입니다. 모든 클래스 바깥, 파일 맨 위에 있는 final 변수입니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final quoteProvider = Provider((ref) => 'Small steps, every day.');

함수는 provider에 값을 제공합니다. Riverpod은 위젯이 처음 요청할 때 함수를 호출하고 결과를 저장합니다.

값을 어딘가에 저장해야 하며, 그 역할을 ProviderScope가 합니다. main에서 앱 전체를 감싸도록 한 번 추가합니다.

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

위젯은 ref를 통해 provider를 읽습니다. ConsumerWidget은 build에서 ref를 받는 StatelessWidget입니다. 예를 들면 ref.watch(quoteProvider)입니다. 위젯 위에 ProviderScope가 없으면 해당 줄에서 참조할 곳이 없어 앱이 No ProviderScope found 오류와 함께 중지됩니다.

챌린지

쉬움

앱이 No ProviderScope found 오류와 함께 중단됩니다.

main에서 MyApp을 ProviderScope로 감싸세요.
인용문을 Small steps, every day.로 변경하세요.

직접 해보기

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

final appNameProvider = Provider((ref) => 'Daily Quote');
final quoteProvider = Provider((ref) => 'Write your quote here.');

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final appName = ref.watch(appNameProvider);
    final quote = ref.watch(quoteProvider);
    return Scaffold(
      appBar: AppBar(title: Text(appName)),
      body: Center(
        child: Text(quote, style: const TextStyle(fontSize: 24)),
      ),
    );
  }
}