[Flutter] Modifier-①Family Modifier

겨레·2024년 7월 23일

[Flutter] 상태관리 패키지

목록 보기

10/16

이번엔 Modifier에 대해서 알아보자!
Modifier는 대표적으로 Family Modifier, AutoDispose Modifier가 있다.
그리고 이 두가지는 어떤 provider든 다 똑같이 사용할 수 있다.

한 번 확인해보자!!!
먼저 Family Modifier에 대해 알아보자!

📍 FamilyModifier

FamilyModifier는 Provider를 생성할 때 생성하는 순간에 어떤 변수를 입력해서 이 변수로 Provider 안의 로직을 변경해야 할 때 사용한다.

① screem/family_modifier_screen.dart 파일 생성

② provider 생성하기
riverpod/family_modifier_provider.dart 파일을 만들고 provider를 생성해준다.

어떤 provider든 아무 상관 없이 다 똑같이 사용 가능하지만,
난 future provider를 사용해보려고 한다!

family_modifier_provider.dart 코드

import 'package:flutter_riverpod/flutter_riverpod.dart';

final familyModifierProvider = FutureProvider<List<int>>((ref) async {
  await Future.delayed(const Duration(seconds: 2));

  return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
});

③ 본격적으로 Modifier 사용하기

일단 ②번 과정까지 진행한 상태라면, 일반적인 FutureProvider를 쓰는 거임!

그런데!!!

Provider라고 쓴 글자 옆에 . 을 작성하면
family랑 autoDispose가 나오는 걸 볼 수 있다.

나는 family부터 사용해볼거임. family를 누른다.

그리고...

⭐ ③-1. family를 누르는 순간 두 번째 파라미터를 받게 된다.
⭐ ③-2. < > 제너릭에도 두 번째 파라미터를 넣어줘야 한다.

③-1 👉 나는 data를 받아올거임...
③-2 👉 데이터가 어떤 타입으로 받게될 건지

family_modifier_provider.dart 코드

import 'package:flutter_riverpod/flutter_riverpod.dart';

final familyModifierProvider =
    FutureProvider.family<List<int>, int>((ref, data) async {
  await Future.delayed(const Duration(seconds: 2));

  // int 값으로 data를 받아온다고 했을 때, 이 data로 뭘할꺼냐면...
  return List.generate(5, (index) => index * data);

  // return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
});

int 값으로 data를 받아온다고 했음...
이걸 어떻게 쓸 수 있는지 FamilyModifierScreen에서 확인해보자.

④ FamilyModifierScreen 코드 수정하기

④-1. StatelessWidget → ConsumerWidget 으로 변경
④-2. build 함수에 WidgetRef ref 파라미터 추가

⑤ ref.watch 해주기

Provider를 watch하면 원래 에러가 안 났는데,
familyModifier Provider를 사용하니깐 에러가 발생하고 있음!

에러를 어떻게 고칠 수 있을까???

👉 family라는 Modifier를 사용하면 Provider 옆에 ( ) 괄호를 생성해 주고,
그 안에 data값에 해당되는 파라미터를 넣어줘야 함!

⑥ Future니깐 .when 추가해주기

family_modifier_screen.dart 코드

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_study/layout/defalut_layout.dart';
import 'package:riverpod_study/riverpod/family_modifier_provider.dart';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(familyModifierProvider(3));

    return DefalutLayout(
      title: 'FamilyModifierScreen',
      body: Center(
        // 이렇게 넣어주면 위젯을 반환해줄 수 있음! 
        child: state.when(
          data: (data) => Text(
            data.toString(),
          ),
          error: (err, stack) => Text(
            err.toString(),
          ),
          loading: () => const CircularProgressIndicator(),
        ),
      ),
    );
  }
}