Flutter Riverpod - 온더테크

Contents

Riverpod은 Flutter 애플리케이션에서 상태 관리를 위한 강력하고 유연한 패키지입니다. 기존의 Provider 패키지를 개선한 버전으로, 더 안전하고 테스트하기 쉬운 상태 관리를 제공합니다. Riverpod은 독립적이고, 종속성 주입을 더 쉽게 처리하며, 전역 상태를 관리할 수 있습니다.

Riverpod의 주요 개념

Provider: 상태를 공급하는 기본 구성 요소입니다. 여러 종류의 Provider가 있으며, 각각의 목적에 맞게 상태를 관리합니다.
Consumer: 상태를 구독하고, 상태가 변경될 때마다 UI를 다시 그립니다.
ProviderScope: 상태의 범위를 정의합니다. 주로 애플리케이션의 최상위에 위치하여 모든 하위 위젯에서 상태를 접근할 수 있도록 합니다.

Riverpod 사용 예제

1. 설치

pubspec.yaml 파일에 Riverpod 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.0.0

2. 기본 사용법

먼저, Riverpod을 사용하기 위한 기본 구조를 설정합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Riverpod Example',
      home: CounterPage(),
    );
  }
}

3. StateProvider 사용

StateProvider를 사용하여 간단한 카운터 예제를 만들어 보겠습니다.

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

// 상태를 관리할 StateProvider 정의
final counterProvider = StateProvider<int>((ref) => 0);

class CounterPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final counter = watch(counterProvider).state;

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Text(
          'Counter: $counter',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read(counterProvider).state++,
        child: Icon(Icons.add),
      ),
    );
  }
}

Riverpod의 다양한 Provider

1. StateProvider

단순한 상태를 관리하는 데 사용됩니다. 기본 값과 함께 상태를 초기화할 수 있습니다.

final counterProvider = StateProvider<int>((ref) => 0);

2. FutureProvider

비동기 작업의 결과를 제공하는 데 사용됩니다. 예를 들어, 네트워크 요청의 결과를 처리할 수 있습니다.

final userProvider = FutureProvider<User>((ref) async {
  final response = await fetchUser();
  return User.fromJson(response);
});

3. StreamProvider

스트림 데이터를 제공하는 데 사용됩니다. 예를 들어, 실시간 데이터 스트림을 처리할 수 있습니다.

final messagesProvider = StreamProvider<List<Message>>((ref) {
  return fetchMessagesStream();
});

4. ChangeNotifierProvider

ChangeNotifier를 사용하는 상태 관리를 제공합니다. 기존 Provider 패키지의 ChangeNotifierProvider와 유사하게 동작합니다.

class Counter extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

final counterProvider = ChangeNotifierProvider((ref) => Counter());

Consumer 사용

Consumer 위젯을 사용하여 상태를 구독하고 UI를 다시 그립니다. 이는 상태가 변경될 때마다 해당 위젯을 다시 빌드합니다.

class CounterPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final counter = watch(counterProvider).state;

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Text(
          'Counter: $counter',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read(counterProvider).state++,
        child: Icon(Icons.add),
      ),
    );
  }
}

결론

Riverpod은 Flutter 애플리케이션에서 상태 관리를 더 쉽게 하고, 코드의 가독성과 유지보수성을 높이는 강력한 도구입니다. 다양한 종류의 Provider를 통해 다양한 상태 관리 요구사항을 충족할 수 있으며, Consumer를 사용하여 상태 변화를 구독하고 UI를 업데이트할 수 있습니다. Riverpod의 유연성과 강력한 기능을 활용하면 더 나은 Flutter 애플리케이션을 개발할 수 있습니다.

Post Views: 118