[flutter] 플러터 프로바이더를 사용하여 댓글 작성하기

22 Dec 2023

flutter

플러터 앱에서 상태 관리를 할 때 Provider 패키지를 사용하는 것이 매우 일반적입니다.
이번에는 Provider를 사용하여 댓글을 작성하고 표시하는 방법에 대해 알아보겠습니다.

1. `Provider` 패키지 추가

먼저, pubspec.yaml 파일에 provider 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

이후 패키지를 다운로드하고 설치하기 위해 터미널에서 다음 명령어를 실행합니다.

flutter pub get

2. `Comment` 모델 생성

다음으로, 댓글을 나타내는 모델을 생성합니다.

class Comment {
  final String text;
  final String author;

  Comment({required this.text, required this.author});
}

3. `ChangeNotifier` 클래스 생성

이제, ChangeNotifier 클래스를 사용하여 댓글 목록을 관리하는 모델을 만듭니다.

import 'package:flutter/foundation.dart';

class CommentsModel extends ChangeNotifier {
  final List<Comment> _comments = [];

  List<Comment> get comments => _comments;

  void addComment(Comment comment) {
    _comments.add(comment);
    notifyListeners();
  }
}

4. `Provider` 사용

댓글 작성 화면에서 provider를 사용하여 CommentsModel에 접근합니다.

class CommentScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Consumer<CommentsModel>(builder: (context, model, child) {
        return ListView(
          children: [
            for (var comment in model.comments) CommentWidget(comment: comment),
          ],
        );
      }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          var newComment = Comment(text: '새로운 댓글', author: '사용자');
          Provider.of<CommentsModel>(context, listen: false).addComment(newComment);
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

class CommentWidget extends StatelessWidget {
  final Comment comment;

  const CommentWidget({Key? key, required this.comment}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(comment.text),
      subtitle: Text('작성자: ${comment.author}'),
    );
  }
}

위의 예시에서는 Consumer와 Provider.of를 사용하여 CommentsModel에 접근하고, 새로운 댓글을 추가하는 방법을 보여줍니다.

마치며

Provider를 사용하여 플러터 앱에서 상태를 관리하고, 간단한 댓글 시스템을 구현하는 방법에 대해 알아보았습니다.
Provider를 사용하면 상태 관리가 쉬워지며, 코드도 깔끔해집니다.
더 많은 기능을 추가하고 싶다면, 공식 문서를 참고하는 것이 좋습니다.

위 내용은 Provider 패키지 공식 문서를 참고하여 작성되었습니다.

1. Provider 패키지 추가

2. Comment 모델 생성

3. ChangeNotifier 클래스 생성

4. Provider 사용

마치며

1. `Provider` 패키지 추가

2. `Comment` 모델 생성

3. `ChangeNotifier` 클래스 생성

4. `Provider` 사용