[flutter] Flutter Riverpod을 사용하여 간단한 카운터 앱 만들기

14 Dec 2023

flutter

Flutter는 Google에서 개발한 모바일 애플리케이션 프레임워크로, 다양한 상태 관리 도구를 지원합니다. 이번 포스트에서는 Riverpod을 사용하여 간단한 카운터 앱을 만드는 방법에 대해 알아보겠습니다.

Riverpod이란?

Riverpod은 Provider 패키지를 기반으로 하는 상태 관리 라이브러리로, 강력하고 직관적인 상태 관리를 제공합니다. 이를 사용하면 Flutter 앱의 상태를 효율적으로 관리할 수 있습니다.

프로젝트 설정

먼저, Flutter 프로젝트를 생성하고 riverpod 패키지를 추가합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

그리고 패키지를 업데이트합니다.

flutter pub get

카운터 앱 만들기

Riverpod을 사용하여 간단한 카운터 앱을 만들어봅시다.

상태 관리 설정

먼저, riverpod을 초기화하고, 카운터의 상태를 관리할 StateProvider를 생성합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

화면 구성

다음으로, 화면을 구성합니다. 아래 코드는 카운터를 표시하고 증가시키는 간단한 화면을 구성한 예시입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Riverpod 카운터 앱'),
          ),
          body: Center(
            child: Consumer(
              builder: (context, watch, child) {
                final count = watch(counterProvider).state;
                return Text(
                  '$count',
                  style: TextStyle(fontSize: 24),
                );
              },
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              context.read(counterProvider).state++;
            },
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

위 코드에서 Consumer 위젯을 사용하여 카운터의 상태를 확인하고, floatingActionButton을 통해 카운터를 증가시키는 기능을 구현했습니다.

결론

이렇게 Riverpod을 사용하여 간단한 카운터 앱을 만들어보았습니다. Riverpod을 사용하면 간단하면서도 효율적인 상태 관리가 가능하며, Flutter 앱의 개발과 유지보수를 편리하게 할 수 있습니다.

더 많은 기능과 향상된 상태 관리를 원한다면, Riverpod 공식 문서를 참고하여 다양한 기능을 적용해보시기를 권장합니다.

참고: Riverpod 공식 문서