[flutter] Flutter Riverpod에서 토도 리스트 앱 만들기

14 Dec 2023

flutter

개요

이번 포스트에서는 Flutter와 Riverpod을 사용하여 간단한 투두 리스트 앱을 만드는 방법을 알아볼 것입니다.

준비물: Flutter 개발환경

Riverpod이란?

Riverpod은 Flutter 어플리케이션에 상태 관리와 종속성 관리를 위한 강력한 라이브러리입니다.

프로젝트 설정

우선 flutter 프로젝트를 생성합니다. 그리고, flutter_riverpod 패키지를 pubspec.yaml 파일에 추가해줍니다.

dependencies:
  flutter_riverpod: ^1.0.0

이제 flutter pub get 명령어를 통해 패키지를 설치합니다.

투두 리스트 앱 구현

이제 간단한 투두 리스트 앱을 만들어보겠습니다.

상태 모델 정의

먼저, 투두 아이템의 상태를 나타내는 모델을 정의합니다.

class Todo {
  final String title;
  final bool isCompleted;

  Todo({
    required this.title,
    this.isCompleted = false,
  });
}

상태 관리 설정

그 다음, Riverpod을 사용하여 투두 리스트 상태를 관리합니다.

final todoListProvider = StateNotifierProvider<TodoList, List<Todo>>((ref) => TodoList());

class TodoList extends StateNotifier<List<Todo>> {
  TodoList() : super([]);

  void add(String title) {
    state = [...state, Todo(title: title)];
  }

  void toggleCompletion(int index) {
    state = [
      for (var i = 0; i < state.length; i++)
        i == index ? state[i].copyWith(isCompleted: !state[i].isCompleted) : state[i]
    ];
  }
}

UI 구성

마지막으로, 투두 리스트 앱의 UI를 구성합니다.

class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Todo List'),
        ),
        body: Consumer(
          builder: (context, watch, child) {
            final todos = watch(todoListProvider);
            return ListView.builder(
              itemCount: todos.length,
              itemBuilder: (context, index) {
                final todo = todos[index];
                return ListTile(
                  title: Text(todo.title),
                  trailing: Checkbox(
                    value: todo.isCompleted,
                    onChanged: (_) => context.read(todoListProvider.notifier).toggleCompletion(index),
                  ),
                );
              },
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => AddTodoScreen())),
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

앱 실행

위의 코드를 포함하여 앱을 실행하면, 투두 리스트 앱을 사용할 수 있게 됩니다.

마치며

이렇게 Flutter와 Riverpod을 사용하여 간단한 투두 리스트 앱을 만들어보았습니다. Riverpod은 상태 관리와 종속성 관리를 효율적으로 처리할 수 있도록 도와줍니다. 만약 더 복잡한 앱을 구현할 때에도 Riverpod은 효율적인 상태 관리를 지원할 것입니다.

더 많은 정보는 Riverpod 공식 홈페이지에서 확인할 수 있습니다.