[flutter] 플러터 프로바이더를 사용하여 게시물 목록 가져오기

22 Dec 2023

flutter

플러터에서 상태 관리를 위해 프로바이더(Provider) 패키지를 사용하여 게시물 목록을 가져오는 방법을 알아보겠습니다.

1. 프로바이더(Provider) 패키지 추가

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

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

그런 다음, 터미널에서 다음 명령을 사용하여 패키지를 설치합니다.

flutter pub get

2. 모델 및 데이터 서비스 생성

게시물 데이터를 다루기 위한 모델 및 데이터 서비스를 생성합니다. 예를 들어, Post 모델과 PostService 클래스를 만들 수 있습니다.

class Post {
  final int id;
  final String title;
  final String body;

  Post({required this.id, required this.title, required this.body});
}

class PostService {
  Future<List<Post>> getPosts() async {
    // 게시물을 가져오는 비동기 작업 수행
  }
}

3. 프로바이더 생성

다음으로, 프로바이더를 생성하여 데이터를 관리합니다.

class PostProvider extends ChangeNotifier {
  final _postService = PostService();
  List<Post> _posts = [];

  List<Post> get posts => _posts;

  Future<void> fetchPosts() async {
    _posts = await _postService.getPosts();
    notifyListeners();
  }
}

4. 프로바이더를 위젯에 연결

마지막으로, 프로바이더를 위젯에 연결하여 데이터를 사용할 수 있습니다.

class PostListWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final postProvider = Provider.of<PostProvider>(context);

    return ListView.builder(
      itemCount: postProvider.posts.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(postProvider.posts[index].title),
          subtitle: Text(postProvider.posts[index].body),
        );
      },
    );
  }
}

위와 같이 프로바이더를 사용하여 게시물 목록을 가져와 화면에 표시할 수 있습니다.

이제 프로바이더 패턴을 사용하여 플러터 앱에서 데이터를 효과적으로 관리할 수 있게 되었습니다.