[flutter] 플러터 프로바이더를 사용하여 메모 기능 구현하기

22 Dec 2023

flutter

이번 포스트에서는 플러터에서 상태 관리를 위해 많이 사용되는 프로바이더(provider) 패키지를 사용하여 간단한 메모 기능을 구현하는 방법에 대해 소개하겠습니다.

프로바이더(provider)란?

프로바이더는 플러터에서 상태 관리를 위한 패키지로, 위젯 트리를 따라 상태를 관리하고 상태가 변경될 때마다 해당하는 위젯들에게 즉각적으로 업데이트를 전달합니다. 이를 통해 상태 관리 코드를 깔끔하게 유지하면서도 효율적으로 관리할 수 있게 해줍니다.

프로바이더를 이용한 메모 앱 구현

프로바이더 패키지 추가

먼저, pubspec.yaml 파일에 다음과 같이 프로바이더 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

그리고 터미널에서 flutter pub get 명령을 실행하여 패키지를 다운로드 받습니다.

메모 관리 모델 만들기

다음은 메모를 관리하기 위한 모델 클래스를 만들어보겠습니다.

class Memo {
  final String title;
  final String content;

  Memo({required this.title, required this.content});
}

이제 프로바이더 패키지를 사용하여 이 모델을 상태로 관리할 수 있습니다.

메모 리스트 뷰 구현

메모 리스트를 위한 화면을 만들고, 해당 화면에서 프로바이더를 이용하여 메모 상태를 가져와 화면에 표시합니다.

class MemoListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var memoList = context.watch<MemoProvider>().memoList;
    return ListView.builder(
      itemCount: memoList.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(memoList[index].title),
          subtitle: Text(memoList[index].content),
        );
      },
    );
  }
}

메모 추가 기능 구현

마지막으로, 메모를 추가하는 화면을 만들고 프로바이더를 통해 메모를 추가할 수 있는 기능을 구현합니다.

class AddMemoView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var titleController = TextEditingController();
    var contentController = TextEditingController();

    return Column(
      children: [
        TextField(controller: titleController),
        TextField(controller: contentController),
        ElevatedButton(
          onPressed: () {
            context.read<MemoProvider>().addMemo(
              Memo(
                title: titleController.text,
                content: contentController.text,
              ),
            );
            Navigator.pop(context);
          },
          child: Text('Add Memo'),
        ),
      ],
    );
  }
}

위와 같이 프로바이더를 사용하여 효율적으로 상태를 관리하고 간단한 메모 기능을 구현할 수 있습니다.

본 포스트에서는 플러터 프로바이더를 이용하여 메모 관리 기능을 구현하는 방법에 대해 알아보았습니다. 프로바이더를 이용하면 복잡한 상태 관리 코드를 간단하고 효율적으로 관리할 수 있으므로, 플러터 앱 개발 시 유용하게 활용할 수 있습니다.

참고 자료

플러터 프로바이더 공식 문서: https://pub.dev/packages/provider

목차