목차
소개
이번 글에서는 Flutter 앱 개발을 위한 상태 관리 라이브러리 중 하나인 Riverpod을 사용하여 하루 일과를 관리할 수 있는 간단한 앱을 만들어 보겠습니다. Riverpod은 Provider 패턴을 기반으로 한 강력한 상태 관리 라이브러리로, Flutter 애플리케이션의 상태를 효율적으로 관리하고 유지할 수 있도록 도와줍니다.
Riverpod란 무엇인가?
Riverpod은 Provider 패턴을 사용하여 Flutter 애플리케이션의 상태를 효율적으로 관리하기 위한 라이브러리입니다. 패턴에 기반한 방법론을 사용하여 이러한 상태 관리를 처리하므로, 복잡성이 감소하고 유지보수가 용이해집니다. 또한, 의존성 주입을 쉽게 구현할 수 있으며, 코드의 가독성과 유연성을 높일 수 있습니다.
일과 관리 앱 구현
이제 Riverpod을 사용하여 하루 일과를 관리할 수 있는 앱을 만들어 보겠습니다. 먼저 모델부터 설정한 후, 상태 관리 및 UI를 구현해 보겠습니다.
모델 설정
// task_model.dart
class Task {
final String title;
final bool isCompleted;
Task(this.title, this.isCompleted);
}
위 코드는 각 일과 항목을 나타내는 Task 모델을 정의한 것입니다.
상태 관리 및 UI 구현
// tasks_provider.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'task_model.dart';
final tasksProvider = StateNotifierProvider<TasksNotifier, List<Task>>((ref) {
return TasksNotifier([]);
});
class TasksNotifier extends StateNotifier<List<Task>> {
TasksNotifier(List<Task> state) : super(state);
void addTask(String title) {
final task = Task(title, false);
state = [...state, task];
}
void toggleTask(int index) {
state = [
for (var i = 0; i < state.length; i++)
if (i == index) ...[state[i].copyWith(isCompleted: !state[i].isCompleted)]
else state[i]
];
}
}
위 코드는 Riverpod을 사용하여 상태 관리를 처리하는 tasksProvider와 TasksNotifier 클래스를 정의한 것입니다.
// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'tasks_provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ProviderScope(
child: MaterialApp(
title: 'Task Manager',
home: TasksPage(),
),
);
}
}
class TasksPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tasks'),
),
body: Consumer(
builder: (context, watch, child) {
final tasks = watch(tasksProvider.state);
return ListView.builder(
itemCount: tasks.length,
itemBuilder: (context, index) {
final task = tasks[index];
return ListTile(
title: Text(task.title),
leading: Checkbox(
value: task.isCompleted,
onChanged: (value) {
context.read(tasksProvider.notifier).toggleTask(index);
},
),
);
},
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Show add task dialog
},
child: Icon(Icons.add),
),
);
}
}
위 코드는 상태를 사용하여 UI를 구성하는 TasksPage 위젯과 앱의 진입점인 MyApp 위젯을 정의한 것입니다.
마치며
이렇게 Riverpod을 사용하여 간단한 하루 일과 관리 앱을 만들어 보았습니다. Riverpod을 통해 상태 관리를 효율적으로 처리하고, 코드를 좀 더 구조화하고 유연하게 작성할 수 있었습니다. Flutter에서 상태 관리를 고려할 때 Riverpod을 사용하는 것을 권장합니다.
내용 참고: