Riverpod — Getting Started#

한마디로 (비개발자용)#

Riverpod은 앱 안에서 여러 화면이 함께 쓰는 정보(예: 로그인 상태, 사용자 이름)를 한곳에 깔끔하게 보관하고 나눠 쓰게 해 주는 도구입니다. 마치 집 안 곳곳에 콘센트를 깔아 두고 필요한 가전제품이 어디서든 전기를 끌어 쓰는 것과 비슷합니다. 이 스킬은 그 콘센트(Riverpod)를 처음 설치하고, 전원을 켜고, 가장 간단한 "Hello world" 예제를 돌려 보는 첫걸음을 안내합니다.

무엇을·언제 (비개발자용)#

• 무엇을 해 주나요
  • 앱 프로젝트에 Riverpod 패키지를 설치합니다(Flutter용 또는 순수 Dart용).
  • 앱 전체를 ProviderScope로 감싸서 어디서든 정보를 꺼내 쓸 수 있게 준비합니다.
  • 가장 기초적인 예제("Hello world")를 만들어 정상 동작을 확인합니다.
  • 필요하면 코드 자동 생성과 코드 점검(linter) 기능까지 켜 줍니다.
• 언제 쓰나요
  • Flutter 또는 Dart 프로젝트를 Riverpod으로 새로 시작할 때
  • 기존 프로젝트에 Riverpod을 처음 추가할 때
  • ProviderScope와 첫 번째 provider를 설정해야 할 때

핵심 용어 (비개발자용)#

Instructions#

Installing the package#

Riverpod is available as a main package (Flutter: flutter_riverpod; Dart-only: riverpod). Optional packages add code generation and hooks.

Flutter:

flutter pub add flutter_riverpod

With code generation:

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

Dart only:

dart pub add riverpod

With code generation:

dart pub add riverpod riverpod_annotation
dart pub add dev:riverpod_generator build_runner

Manual pubspec.yaml (Flutter):

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.0.0  # use latest from pub.dev

dev_dependencies:
  build_runner:
  riverpod_generator: ^2.0.0  # if using code generation

Then run flutter pub get (or dart pub get for Dart-only).

If using code generation, run:

dart run build_runner watch -d

Note: Some Riverpod packages may require Flutter's beta channel for compatibility with latest json_serializable. If pub get fails, try flutter channel beta or use Riverpod <=3.1.0.

Wrap the app in ProviderScope#

Widgets need a ProviderScope (Flutter) or a ProviderContainer (Dart) to read providers.

Flutter — ProviderScope:

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

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

Dart only — ProviderContainer:

final container = ProviderContainer();
final value = container.read(helloWorldProvider);
print(value);
// Don't forget to container.dispose() when done

Hello world (Flutter with code generation)#

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

part 'main.g.dart';

@riverpod
String helloWorld(Ref ref) {
  return 'Hello world';
}

void main() {
  runApp(ProviderScope(child: MyApp()));
}

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)),
      ),
    );
  }
}

Run dart run build_runner build (or watch) to generate main.g.dart. Without code generation, use a manual provider (e.g. final helloWorldProvider = Provider<String>((ref) => 'Hello world');) and the same ProviderScope + ConsumerWidget pattern.

Enabling riverpod_lint#

Add the optional linter via analysis_options.yaml:

plugins:
  riverpod_lint: ^2.0.0  # use latest from https://pub.dev/packages/riverpod_lint

This provides lint rules and refactorings for Riverpod. See the riverpod_lint package page for the full list.

Going further#

• Code generation and hooks: See the riverpod-codegen-and-hooks skill (or docs: About code generation, About hooks).
• VS Code / Android Studio: Consider Flutter Riverpod Snippets extensions for faster boilerplate.