Riverpod: StateProvider

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

Provider는 변하지 않는 값을 담습니다. 숫자, bool, String처럼 변하는 단순한 값 하나에는 StateProvider를 사용하세요.

final quantityProvider = StateProvider((ref) => 1);

같은 방식으로 읽습니다. ref.watch(quantityProvider)는 숫자를 반환하며, 값이 바뀌면 위젯이 다시 빌드됩니다.

값을 바꾸려면 ref.read를 사용해 값이 담긴 객체인 notifier를 가져온 다음, state를 설정하세요.

onPressed: () {
  ref.read(quantityProvider.notifier).state++;
},

Provider에서와 마찬가지로 값을 표시할 때는 build에서 ref.watch를 사용하고, 콜백에서 값을 변경할 때는 ref.read를 사용하세요. 복사본을 바꿔도 아무것도 바뀌지 않습니다. var n = ref.read(quantityProvider); n++;는 제공자의 값이 아니라 n에 1을 더합니다. state를 설정해야만 값이 바뀝니다.

챌린지

쉬움

팬케이크 주문에 수량이 표시되지만, 버튼은 아직 아무 동작도 하지 않습니다.

더하기 버튼은 quantityProvider에 1을 더합니다.
빼기 버튼은 1을 빼지만, 수량은 1보다 작아지지 않습니다.

직접 해보기

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

final quantityProvider = StateProvider((ref) => 1);

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

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

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

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final quantity = ref.watch(quantityProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('Pancakes')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(
              icon: const Icon(Icons.remove),
              onPressed: () {},
            ),
            Text('Quantity: $quantity', style: const TextStyle(fontSize: 24)),
            IconButton(
              icon: const Icon(Icons.add),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}