시작하기
Riverpod의 내부 메커니즘에 들어가기 앞서, 우선 Riverpod을 설치하는 방법과 "Hello world"를 표시하는 방법부터 함께 시작해봅시다.
어떤 패키지를 설치해야하나요?
Riverpod은 여러 종류의 패키지가 있습니다. 각각 다른 사용 목적을 가지고 있으며 개별마다 상이한 특징을 가지고 있습니다. 어떤 Riverpod 패키지를 설치할지는 만드는 앱의 형태에 따라 다릅니다.
다음 아래의 표를 참조하여 사용할 패키지를 결정할 수 있습니다.
| 앱의 형태 | 패키지명 | 설정 |
|---|---|---|
| Flutter + flutter_hooks | hooks_riverpod | flutter_hooks 과 Riverpod을 함께 병용한 패키지 |
| Flutter | flutter_riverpod | Flutter 앱에 Riverpod 을 사용할 경우의 기본 패키지 |
| Dart（Flutter 사용안함） | riverpod | Flutter 에 관련된 모든 클래스가 완전제거된 Riverpod 패키지 |
패키지 설치 방법
설치할 패키지의 종류가 결정되었다면, pubspec.yaml에 아래의 방법으로 패키지를 추가합니다.
- Flutter + flutter_hooks
- Flutter
- Dart
environment:
sdk: ">=2.12.0 <3.0.0"
flutter: ">=2.0.0"
dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.18.0
hooks_riverpod: ^2.1.1
그리고 dart pub get 명령을 실행해주세요.
environment:
sdk: ">=2.12.0 <3.0.0"
flutter: ">=2.0.0"
dependencies:
flutter:
sdk: flutter
flutter_riverpod: ^2.1.1
그리고 dart pub get 명령을 실행해주세요.
environment:
sdk: ">=2.12.0-0 <3.0.0"
dependencies:
riverpod: ^2.1.1
그리고 dart pub get 명령을 실행해주세요.
이걸로 Riverpod이 앱에 추가되었습니다.
사용예시: Hello world
Riverpod설치를 완료하였다면 이제 사용을 시작해봅시다. 아래의 예제코드를 실행하면 Hello world가 화면에 표시됩니다.
- Flutter + flutter_hooks
- Flutter
- 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 {
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가 표시됩니다.
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// 우리는 값을 저장할 "provider"를 만들겁니다(여기서 값은 "Hello world"를 의미합니다).
// 프로바이더를 사용하는 것으로 값의 mock/override가 가능하게 됩니다.
final helloWorldProvider = Provider((_) => 'Hello world');
void main() {
runApp(
// 위젯에서 프로바이더를 사용하고 읽기위해
// 앱 전체적으로 "ProviderScope" 위젯을 감싸줘야 합니다.
// 여기에 프로바이더의 상태가 저장됩니다.
ProviderScope(
child: MyApp(),
),
);
}
// StatelessWidget 대신에 Riverpod의 ConsumerWidget을 상속받아 사용합니다.
class MyApp extends ConsumerWidget {
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가 표시됩니다.
import 'package:riverpod/riverpod.dart';
// 우리는 값을 저장할 "provider"를 만들겁니다(여기서 값은 "Hello world"를 의미합니다).
// 프로바이더를 사용하는 것으로 값의 mock/override가 가능하게 됩니다.
final helloWorldProvider = Provider((_) => 'Hello world');
void main() {
// 이 객체는 프로바이더 상태를 저장하게 됩니다.
final container = ProviderContainer();
// "container" 덕분에, 여기서 우리의 프로바이더 값을 읽을 수 있습니다.
final value = container.read(helloWorldProvider);
print(value); // Hello world
}
dart lib/main.dart 명령어를 실행합니다.
콘솔창에 Hellow world가 출력됩니다.
더 나아가기: Code Snippets 설치하기
Flutter를 VS Code 에서 사용하는 경우, 확장에서
Flutter Riverpod Snippets
패키지를 검색하여 Riverpod 전용 Code Snippets을 설치하여 사용할 수 있습니다.
Flutter를 Android Studio 또는 IntelliJ 에서 사용하는 경우,
Flutter Riverpod Snippets
를 설치하여 사용할 수 있습니다.
