주요 콘텐츠로 건너뛰기

시작하기

Riverpod 온라인으로 체험하기​

Riverpod이 어떤 느낌인지 Dartpad에서 바로 체험해 보세요.

패키지 설치하기​

Riverpod은 그 자체로 완결된 메인 패키지인 "riverpod"과, 코드 생성(코드 생성에 대하여) 및 훅(훅(hook)에 대하여)을 위한 선택적 패키지로 구성되어 있습니다.

설치할 패키지를 정했다면, 다음과 같이 한 줄로 앱에 의존성을 추가합니다.

flutter pub add material_ui
flutter pub add flutter_riverpod

또는 pubspec.yaml에 의존성을 직접 추가할 수도 있습니다.

pubspec.yaml
name: my_app_name
environment:
  sdk: ^3.12.0
  flutter: ">=3.44.0"

dependencies:
  flutter:
    sdk: flutter
  material_ui: ^1.0.0
  flutter_riverpod: ^3.4.3

그런 다음 flutter pub get으로 패키지를 설치합니다.

정보

코드 생성을 사용한다면, 이제 다음 명령으로 코드 생성기를 실행할 수 있습니다.

dart run build_runner watch -d

이것으로 끝입니다. 앱에 Riverpod을 추가했습니다!

riverpod_lint 활성화하기​

Riverpod은 선택적으로 riverpod_lint 패키지를 제공합니다. 이 패키지는 더 나은 코드를 작성하도록 돕는 lint 규칙과 커스텀 리팩터링 옵션을 제공합니다.

riverpod_lint는 analysis_server_plugin으로 구현되어 있으므로 analysis_options.yaml을 통해 설치합니다.

간단히 말해, pubspec.yaml 옆에 analysis_options.yaml을 만들고 다음을 추가하세요.

analysis_options.yaml
plugins:
  riverpod_lint: <https://pub.dev/packages/riverpod_lint 의 최신 버전>

이제 코드에서 Riverpod을 잘못 사용하면 IDE에 경고가 표시됩니다.

전체 경고 및 리팩터링 목록은 riverpod_lint 페이지에서 확인하세요.

사용 예시: Hello world​

Riverpod을 설치했으니 이제 사용해 봅시다.

다음 코드는 새로 추가한 의존성으로 "Hello world"를 만드는 방법을 보여줍니다.

lib/main.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:material_ui/material_ui.dart';

// 값(여기서는 "Hello world")을 저장할 "provider"를 만듭니다.
// provider를 사용하면 노출되는 값을 모킹하거나 오버라이드할 수 있습니다.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // 위젯이 provider를 읽으려면 앱 전체를
    // "ProviderScope" 위젯으로 감싸야 합니다.
    // provider의 상태는 여기에 저장됩니다.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// StatelessWidget 대신 Riverpod이 제공하는 ConsumerWidget을 상속합니다
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를 사용한다면 Riverpod Gen Shortcuts 또는 Flutter Riverpod Snippets를 사용해 보세요.

예시: Generator 사용 - Riverpod Stream (riverpodStream) riverpod-class

예시: Generator 사용 - Riverpod Class (riverpodClassKeepAlive) riverpod-stream

Flutter Riverpod Snippets img