Flutter) Riverpod 상태관리 시작해보기 - 1

이 글은 Riverpod 공식문서를 참조하여 작성했습니다.

 

 

 

Riverpod 설치하기

 

Riverpod에는 여러종류에 패키지가 있습니다.

패키지마다 사용 목적이 있으며, 만드는 앱의 형태에 맞게 설치하시면 됩니다.

기본적으로 flutter_riverpod 패키지를 사용합니다.

 

 

1.  패키지 추가

pubspec.yaml에 사용하고자 하는 패키지를 추가 해줍니다.

버전은 https://pub.dev/packages/flutter_riverpod/install 에서 확인해 줍니다.

작성기준 버전은 2.1.3 입니다.

 

-pubspec.yaml 파일에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.1.3

그리고 Pub get  을 합니다.

이걸로 Riverpod가 앱에 추가 되었습니다.

 

 

 

2. Hello world 출력해보기

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Riverpod Study")),
        body: Center(child: Text("Hello world")),
      ),
    );
  }
}

위에 코드는 평상시에 화면에 Hello world를 찍는 코드입니다.

이 코드를 Riverpod을 사용해서 Hello world를 찍어보겠습니다.

 

 

// 값을 저장하는 "Provider"를 생성  값은 "Hello world"
final helloWorldProvider = Provider((_) => "Hello world");

void main() {
  runApp(
    //위젯에서 프로바이더를 사용하고 읽기위해
    //앱 전체적으로 "ProviderScope" 를 감싸 줍니다.
    //여기에 프로바이더의 상태가 저장됩니다.
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

//기존의 StatelessWidget 대신 Riverpod의 ConsumerWidget을 상속받아 사용합니다.
class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  //기존 orverride에서 WidgetRef를 파라미터에 추가해줘야 합니다.
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Riverpod Study")),
        body: Center(child: Text(value)),
      ),
    );
  }
}

Riverpod를 사용해서 기존의 코드를 변경하였습니다.

각자의 역할은 다음 글에서 설명하겠습니다.