본문으로 건너뛰기

시작하기

Riverpod의 내부 메커니즘에 들어가기 앞서, 우선 Riverpod을 설치하는 방법과 "Hello world"를 표시하는 방법부터 함께 시작해봅시다.

어떤 패키지를 설치해야하나요?

Riverpod은 여러 종류의 패키지가 있습니다. 각각 다른 사용 목적을 가지고 있으며 개별마다 상이한 특징을 가지고 있습니다. 어떤 Riverpod 패키지를 설치할지는 만드는 앱의 형태에 따라 다릅니다.

다음 아래의 표를 참조하여 사용할 패키지를 결정할 수 있습니다.

앱의 형태패키지명설정
Flutter + flutter_hookshooks_riverpodflutter_hooksRiverpod을 함께 병용한 패키지
Flutterflutter_riverpodFlutter 앱에 Riverpod 을 사용할 경우의 기본 패키지
Dart(Flutter 사용안함)riverpodFlutter 에 관련된 모든 클래스가 완전제거된 Riverpod 패키지

패키지 설치 방법

설치할 패키지의 종류가 결정되었다면, pubspec.yaml에 아래의 방법으로 패키지를 추가합니다.

pubspec.yaml
environment:
sdk: ">=2.12.0 <3.0.0"
flutter: ">=2.0.0"

dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.18.0
hooks_riverpod: ^2.0.0-dev.9

그리고 dart pub get 명령을 실행해주세요.

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

사용예시: Hello world

Riverpod설치를 완료하였다면 이제 사용을 시작해봅시다. 아래의 예제코드를 실행하면 Hello world가 화면에 표시됩니다.

lib/main.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

// 우리는 값을 저장할 "provider"를 만들겁니다(여기서 값은 "Hello world"를 의미합니다).
// 프로바이더를 사용하는 것으로 값의 mock/override가 가능하게 됩니다.
final helloWorldProvider = Provider((_) => 'Hello world');

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

// Note: MyApp은 hooks_riverpod의 HookConsumerWidget을 상속받습니다.
class MyApp extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final String value = ref.watch(helloWorldProvider);

return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Example')),
body: Center(
child: Text(value),
),
),
);
}
}

flutter run 명령어를 실행합니다. 디바이스 화면에 Hello world가 표시됩니다.

더 나아가기: Code Snippets 설치하기

FlutterVS Code 에서 사용하는 경우, 확장에서 Flutter Riverpod Snippets 패키지를 검색하여 Riverpod 전용 Code Snippets을 설치하여 사용할 수 있습니다.

FlutterAndroid Studio 또는 IntelliJ 에서 사용하는 경우, Flutter Riverpod Snippets 를 설치하여 사용할 수 있습니다.

img