[flutter] Flutter Riverpod에서 투두리스트 앱 만들기

Riverpod은 Flutter에서 상태 관리를 하기 위한 훌륭한 라이브러리 중 하나입니다. 이번 블로그에서는 Riverpod을 사용하여 간단한 투두리스트 앱을 만드는 방법에 대해 알아보겠습니다.

Riverpod이란?

Riverpod은 Flutter 애플리케이션의 상태 관리를 위한 강력한 도구입니다. Provider 패키지의 다음 버전으로, 프로바이더 기반 상태 관리 및 종속성 주입을 훨씬 편리하게 해줍니다.

프로젝트 설정

먼저, 프로젝트에 Riverpod을 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

그리고 터미널에서 다음 명령어를 실행하여 의존성을 업데이트합니다.

flutter pub get

Riverpod을 이용한 투두리스트 만들기

이제 프로젝트에 Riverpod이 설치되었으니, 투두리스트 앱을 만들어봅시다. 먼저, Riverpod 프로바이더를 정의합니다.

final todoListProvider = StateProvider((ref) => <String>[]);

위 코드는 todoList를 상태를 저장하는 프로바이더를 정의하는 것입니다. 이제 UI에서 이 상태를 사용할 수 있습니다.

class TodoListScreen extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final todoList = useProvider(todoListProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('할 일 목록'),
      ),
      body: ListView.builder(
        itemCount: todoList.state.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(todoList.state[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(todoListProvider).state.add('새로운 할 일');
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

위 코드는 투두리스트 화면을 만드는 것입니다. useProvider 훅을 사용하여 todoListProvider에서 상태를 가져오고, 이를 화면에 표시하고 새로운 할 일을 추가할 수 있는 버튼을 만들었습니다.

마치며

이제 Riverpod을 사용하여 간단한 투두리스트 앱을 만드는 방법에 대해 알아보았습니다. Riverpod은 유연하고 강력한 상태 관리 라이브러리로, Flutter 애플리케이션의 상태를 효율적으로 관리하는 데 도움이 됩니다. 더 많은 기능을 포함하도록 이 앱을 확장해보세요!

더 많은 정보는 Riverpod 공식 문서에서 확인할 수 있습니다. Happy coding!