시작하기

---

Try Riverpod online

To get a feel of Riverpod, try it online on Dartpad.

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

pubspec.yaml

name: my_app_name
environment:
  sdk: ">=2.17.0 <3.0.0"
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.0.2
  riverpod_annotation: ^1.0.4

dev_dependencies:
  build_runner:
  riverpod_generator: ^1.0.4

패키지 추가 후 flutter pub get 를 실행해주세요.

마지막으로, 를 실행하여 코드를 생성합니다.flutter pub run build_runner watch

Dart only

pubspec.yaml

name: my_app_name
environment:
  sdk: ">=2.17.0 <3.0.0"

dependencies:
  riverpod: ^2.0.2
  riverpod_annotation: ^1.0.4

dev_dependencies:
  build_runner:
  riverpod_generator: ^1.0.4

패키지 추가 후 dart pub get를 실행해주세요.

마지막으로, 를 실행하여 코드를 생성합니다.flutter pub run build_runner watch

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

사용예시: Hello world

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

Flutter

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
@riverpod
String helloWorld(HelloWorldRef ref) {
  return 'Hello world';
}

void main() {
  runApp(
    // For widgets to be able to read providers, we need to wrap the entire
    // application in a "ProviderScope" widget.
    // This is where the state of our providers will be stored.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Extend ConsumerWidget instead of StatelessWidget, which is exposed by Riverpod
class MyApp extends ConsumerWidget {
  @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가 표시됩니다.

Dart

lib/main.dart

import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
@riverpod
String helloWorld(HelloWorldRef ref) {
  return 'Hello world';
}

void main() {
  // This object is where the state of our providers will be stored.
  final container = ProviderContainer();

  // Thanks to "container", we can read our provider.
  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 를 설치하여 사용할 수 있습니다.

다음 단계 선택하기

기본 컨셉에대해 확인하기:

• Learn more about providers

cookbook 따라가기:

• How to test providers