플러터는 구글에서 개발한 모바일 앱 개발 프레임워크로, 다양한 기능과 편리한 UI 개발을 지원합니다. 그 중 상태 관리는 앱 개발에서 매우 중요한 부분입니다. 이번 글에서는 플러터의 상태 관리 라이브러리 중 하나인 Riverpod를 사용하여 간단한 예제 앱을 만드는 방법에 대해 소개하겠습니다.
Riverpod란?
Riverpod는 플러터의 상태 관리를 위한 라이브러리로, Provider 패턴을 기반으로 동작합니다. Riverpod는 상태 값을 제공하는 Provider와 상태 변경을 알리는 Consumer로 구성됩니다. 이를 통해 간편하고 효율적인 상태 관리를 할 수 있으며, 의존성 주입(Dependency Injection)을 지원하여 코드의 재사용성과 테스트 용이성을 높일 수 있습니다.
예제 앱 소개
이번 예제 앱은 간단한 카운터 앱입니다. 앱 화면에는 현재 카운트 값을 보여주는 텍스트와 증가, 감소 버튼이 있습니다. 각 버튼을 누를 때마다 카운트 값이 증가 또는 감소하도록 구현하겠습니다.
프로젝트 설정
먼저 플러터 개발 환경을 구축해야 합니다. Flutter SDK를 설치하고 IDE를 선택하여 프로젝트를 생성합니다. 그리고 pubspec.yaml 파일에 다음과 같이 riverpod 패키지를 추가합니다.
dependencies:
flutter:
sdk: flutter
riverpod: ^1.0.0
프로젝트 설정이 완료되었다면, 이제 코드 작성에 들어갑니다.
코드 작성
먼저 main.dart 파일을 열고 다음 코드를 추가합니다.
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/all.dart';
final counterProvider = StateProvider<int>((_) => 0);
void main() {
runApp(
ProviderScope(child: MyApp()),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Riverpod Counter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CounterPage(),
);
}
}
class CounterPage extends ConsumerWidget {
@override
Widget build(BuildContext context, ScopedReader watch) {
final counter = watch(counterProvider).state;
return Scaffold(
appBar: AppBar(
title: Text('Riverpod Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Counter Value:',
style: TextStyle(fontSize: 20),
),
Text(
'$counter',
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
],
),
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () => context.read(counterProvider).state++,
tooltip: 'Increment',
child: Icon(Icons.add),
),
SizedBox(width: 10),
FloatingActionButton(
onPressed: () => context.read(counterProvider).state--,
tooltip: 'Decrement',
child: Icon(Icons.remove),
),
],
),
);
}
}
위 코드에서는 counterProvider를 정의하여 카운트 값을 관리합니다. main() 메서드에서는 ProviderScope로 앱을 감싸서 Provider를 사용할 수 있도록 합니다. MyApp은 MaterialApp을 상속하고, CounterPage는 ConsumerWidget을 상속하여 UI를 구현합니다. CounterPage에서는 counterProvider의 값을 읽어와 화면에 표시하고, 증가/감소 버튼을 통해 카운트 값을 변경할 수 있도록 구현하였습니다.
실행 결과
위 코드 작성 후 앱을 실행하면 다음과 같은 화면이 나타납니다.
화면 상단에는 “Counter Value” 라벨과 현재 카운트 값을 표시하고 있으며, 화면 중앙에는 증가/감소 버튼이 있습니다. 버튼을 누를 때마다 카운트 값이 증가 또는 감소하며, 이를 통해 상태 관리가 제대로 되고 있는지 확인할 수 있습니다.
마무리
이번 글에서는 플러터의 상태 관리 라이브러리인 Riverpod를 사용하여 간단한 예제 앱을 만드는 방법을 소개하였습니다. Riverpod는 플러터 앱의 상태 관리를 효율적으로 할 수 있도록 도와주며, 의존성 주입을 지원하여 코드의 재사용성과 테스트 용이성을 높여줍니다. 관심 있는 개발자들은 이를 참고하여 플러터 앱 개발에 활용해보시기 바랍니다.