Flutter Riverpod 사용기 -2 쉽게 하는 상태관리 재미지다

벌써 자고 일어나면 금요일이라니.. 분명 월요일날 포스팅 했던거 같은데..시간이 진짜 빠른거 같다..

오늘은 어제에 이어서 riverpod notifier를 사용해볼 예정이다 약간의 복잡한 상태관리? 한번 가보자고..!

코드로 가보겠다~ 슝

class ShoppingListNotifier extends StateNotifier {

}

State Notifier 는 무조건 상태 관리할 타입이 무엇인지 정의 해줘야 한다.
그래서 타입을 정의하기 전에 모델링을 잠시 할까 한다.

class ShoppingItemModel {
  final String name;
  final int quantity;
  final bool hasBought;
  final bool isSpicy;

  ShoppingItemModel({
    required this.name,
    required this.quantity,
    required this.hasBought,
    required this.isSpicy
  });
}

간단하게 ShoppingItemModel 을 만들고 다시 돌아가보겠다.

class ShoppingListNotifier extends StateNotifier<List<ShoppingItemModel>> {
	ShoppingListNotifier() : super([
    ])
    -> StateNotifier 생성자를 생성 한뒤 super 에다가 초기값을 넣어준다.
}

ShoppingListNotifier()
      : super(
          [
            ShoppingItemModel(
              name: '김치',
              quantity: 3,
              hasBought: false,
              isSpicy: true,
            ),
            ShoppingItemModel(
              name: '라면',
              quantity: 5,
              hasBought: false,
              isSpicy: true,
            ),
            ShoppingItemModel(
              name: '삼겹살',
              quantity: 10,
              hasBought: false,
              isSpicy: false,
            ),
            ShoppingItemModel(
              name: '수박',
              quantity: 2,
              hasBought: false,
              isSpicy: false,
            ),
            ShoppingItemModel(
              name: '카스테라',
              quantity: 5,
              hasBought: false,
              isSpicy: false,
            ),
          ],
        );

super 에다가 처음에 어떤값으로 초기화할지 넣어야 한다.

final shoppingListProvider =
    StateNotifierProvider<ShoppingListNotifier, List<ShoppingItemModel>>(
  (ref) => ShoppingListNotifier(),
);

StateNotifierProvier를 사용해주며, ref 는 똑같다 어떤 클래스를 사용할지.

첫번째 자리는 어떤 클래스인지, 그 클래스의 타입 그리고 ref로 가리켜 준다.
어제 작성한 numberProvider 처럼 이제 가져다가 쓰면된다!

사용을 한번 해보자.

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final List<ShoppingItemModel> state = ref.watch(shoppingListProvider);

    return DefaultLayout(
      title: 'StateNotifierProvider',
      body: ListView(
        children: state
            .map(
              (e) => Text(e.name)
            )
            .toList(),
      ),
    );
  }
}

state 로 가져 온 다음에 Text 위젯으로 해서 name 값을 가져왔다, 다음에는 추가 및 간단하게 정리해서 올려보겠다.

내가 까먹을까봐.. 한번 더 사용해보고 작성해보는! 오늘은 여기까지