주요 콘텐츠로 건너뛰기

시작하기

Riverpod 온라인으로 경험해보기​

Riverpod을 경험해보려면 Dartpad나 Zapp에서 온라인으로 시도해보세요:

패키지 설치하기​

설치하려는 패키지가 결정되면, 아래와 같이 한 줄로 앱에 종속성을 추가합니다:

flutter pub add flutter_riverpod
flutter pub add riverpod_annotation
flutter pub add dev:riverpod_generator
flutter pub add dev:build_runner
flutter pub add dev:custom_lint
flutter pub add dev:riverpod_lint

대안으로, pubspec.yaml에 종속성을 직접 추가할 수도 있습니다:

pubspec.yaml
name: my_app_name
environment:
  sdk: ">=3.0.0 <4.0.0"
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.5.1
  riverpod_annotation: ^2.3.5

dev_dependencies:
  build_runner:
  custom_lint:
  riverpod_generator: ^2.4.0
  riverpod_lint: ^2.3.10

그리고, flutter pub get으로 패키지를 설치합니다.

이제 코드 생성기를 실행할 수 있습니다. flutter run build_runner watch.

이게 다입니다. 당신의 앱에 Riverpod을 추가했습니다!

riverpod_lint/custom_lint 활성화하기​

Riverpod은 선택사항으로 riverpod_lint 패키지를 제공합니다. 이 패키지는 더 좋은 코드를 작성하는데 도움이 되는 린트 규칙과 사용자 정의 리팩토링 옵션을 제공합니다.

이전 단계를 따라왔다면 이 패키지는 이미 설치되어 있을 것입니다. 하지만 활성화하기 위해서는 별도의 단계가 필요합니다.

riverpod_lint를 활성화하려면, 당신의 pubspec.yaml옆에 analysis_options.yaml을 추가하고 다음을 포함해야 합니다:

analysis_options.yaml
analyzer:
  plugins:
    - custom_lint

이제 코드베이스에서 Riverpod을 사용할 때 당신이 실수한 경우, IDE에서 경고가 보이게 됩니다.

전체 경고와 리팩토링 목록을 보려면 riverpod_lint 페이지를 참고하세요.

노트

이 경고는 dart analyze 명령에서는 표시되지 않습니다. CI/터미널에서 이 경고를 확인하려면 다음을 실행하세요:

dart run custom_lint

사용 예시: Hello world​

이제 Riverpod를 설치했으니 사용해볼 수 있습니다.

다음 스니펫은 새로운 종속성을 사용하여 "Hello world"를 만드는 방법을 보여줍니다:

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"가 표시됩니다.

더 나아가기: 코드 스니펫 설치하기​

Flutter와 VS Code를 사용하고 있다면 Flutter Riverpod Snippets를 사용해보세요.

Flutter와 Android Studio 또는 IntelliJ를 사용하고 있다면 Flutter Riverpod Snippets를 사용해보세요.

img

다음 단계 선택​

몇 가지 기본 개념 알아보기:

쿡북(Cookbook) 따라하기: