[flutter] 상태관리되는 ToDo List 만들어보기

Flutter 프로젝트: Riverpod과 ToDo 관리

이 문서는 Riverpod과 Flutter를 활용한 상태관리 및 ToDo 리스트 구현에 대해 정리한 내용입니다. Tistory에 게시할 수 있도록 깔끔하게 정리하였습니다.

---

1. Riverpod을 활용한 책 관리 시스템

1-1. 책 관리 창고 생성

NotifierProvider를 사용하여 책 리스트를 관리하는 상태 관리 시스템을 구현합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 초기 데이터 선언
String myBook = '홍길동전';
List<String> books = [];

// Notifier 클래스 정의
class MyBookStore extends Notifier<List<String>> {
  @override
  List<String> build() {
    // 초기값 설정
    books.add(myBook);
    return books;
  }

  // 새로운 데이터를 추가하는 메서드
  void updateData(String book) {
    state = [...state, book];
  }
}

// NotifierProvider 정의
final MyBookStoreProvider = NotifierProvider<MyBookStore, List<String>>(
  () => MyBookStore(),
);

---

1-2. 책 관리 UI 구현

ConsumerWidget을 사용하여 MyBookStoreProvider에서 데이터를 가져와 UI를 구현합니다.

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

class BookPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    List<String> bookStore = ref.watch(MyBookStoreProvider);

    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('현재 저장된 책: ${bookStore.toString()}'),
              ElevatedButton(
                onPressed: () {
                  MyBookStore store = ref.read(MyBookStoreProvider.notifier);
                  store.updateData('새로운 책 추가');
                },
                child: Text('책 추가하기'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

1-3. 주요 개념 정리

• NotifierProvider: Riverpod 2.x에서 제공하는 상태 관리 클래스입니다. StateNotifierProvider의 개선된 버전으로, build() 메서드를 통해 초기값을 간단히 설정할 수 있습니다.
• ref.watch(): 상태를 구독하여 상태 변경을 감지합니다.
• ref.read(): 상태 관리 창고에 직접 접근하여 상태를 읽습니다.

---

2. ToDo 리스트 관리

2-1. ToDoItem 모델 정의

ToDo 리스트의 개별 항목을 나타내는 모델을 정의합니다.

class ToDoItem {
  String title;
  bool isDone;

  ToDoItem({required this.title, this.isDone = false});
}

List<ToDoItem> todoItems = [
  ToDoItem(title: '플러터 공부'),
  ToDoItem(title: '낮잠자기', isDone: true),
  ToDoItem(title: '프로젝트'),
];

---

2-2. ViewModel 구현

ToDo 리스트를 관리하는 ViewModel을 정의합니다.

class TodoListViewModel {
  List<ToDoItem> _items = [];

  List<ToDoItem> get items => _items;

  void addItems(String title) {
    _items.add(ToDoItem(title: title));
  }

  void changeToggle(ToDoItem item) {
    item.isDone = !item.isDone;
  }

  void initItem(List<ToDoItem> items) {
    _items = items;
  }
}

---

2-3. ToDo 리스트 UI 구현

StatefulWidget을 사용하여 ToDo 리스트의 UI를 구성합니다.

import 'package:flutter/material.dart';

class TodoListView extends StatefulWidget {
  @override
  State<TodoListView> createState() => _TodoListViewState();
}

class _TodoListViewState extends State<TodoListView> {
  final TextEditingController _titleController = TextEditingController();
  TodoListViewModel _todoListViewModel = TodoListViewModel();

  @override
  Widget build(BuildContext context) {
    _todoListViewModel.initItem(todoItems);

    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('ToDo 리스트'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _titleController,
                decoration: InputDecoration(
                  hintText: 'ToDo 항목 추가',
                  suffixIcon: IconButton(
                    onPressed: () {
                      setState(() {
                        _todoListViewModel.addItems(_titleController.text);
                      });
                    },
                    icon: Icon(Icons.add),
                  ),
                ),
              ),
              SizedBox(height: 50),
              Expanded(
                child: ListView.builder(
                  itemCount: _todoListViewModel.items.length,
                  itemBuilder: (context, index) {
                    final ToDoItem item = _todoListViewModel.items[index];
                    return ListTile(
                      title: Text(item.title),
                      trailing: Checkbox(
                        value: item.isDone,
                        onChanged: (value) {
                          setState(() {
                            _todoListViewModel.changeToggle(item);
                          });
                        },
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

3. 정리

• Riverpod: Flutter에서 강력하고 유연한 상태 관리 솔루션으로, 상태 관리를 위한 다양한 Provider를 제공합니다.
• NotifierProvider: Riverpod 2.x에서 제공하는 상태 관리 도구로, 상태 관리와 변경 메서드를 손쉽게 구현할 수 있습니다.
• ToDo 관리: Flutter의 StatefulWidget과 ViewModel 패턴을 활용하여 동적인 ToDo 리스트를 구성하고 관리할 수 있습니다.