[flutter] 플러터 프로바이더를 사용하여 블로그 글 목록 가져오기

22 Dec 2023

flutter

플러터 앱 개발 중에, Provider 패키지를 사용하여 외부 API나 데이터베이스에서 블로그 글 목록을 가져오는 방법에 대해 이야기해보겠습니다.

1. Provider 패키지 설정

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

dependencies:
  provider: ^5.0.0

이후 터미널에서 flutter packages get 명령어를 사용하여 패키지를 다운로드합니다.

2. 모델 및 서비스 생성

다음으로, 블로그 글 모델 및 서비스를 생성합니다.

class BlogPost {
  final String title;
  final String content;

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

class BlogService {
  Future<List<BlogPost>> getBlogPosts() async {
    // 외부 API나 데이터베이스에서 블로그 글 목록을 가져오는 코드
  }
}

3. Provider 설정

이제, Provider를 사용하여 BlogService를 제공합니다.

class BlogProvider extends ChangeNotifier {
  final BlogService _blogService = BlogService();
  List<BlogPost> _blogPosts = [];

  List<BlogPost> get blogPosts => _blogPosts;

  Future<void> fetchBlogPosts() async {
    _blogPosts = await _blogService.getBlogPosts();
    notifyListeners();
  }
}

4. 화면에서 Provider 사용

마지막으로, 화면에서 Provider를 사용하여 BlogProvider를 소비하고 데이터를 가져옵니다.

final blogProvider = Provider.of<BlogProvider>(context, listen: false);

@override
void initState() {
  super.initState();
  blogProvider.fetchBlogPosts();
}

// 나머지 화면 작성 코드

이제 당신의 플러터 앱은 Provider를 사용하여 외부 소스로부터 블로그 글 목록을 가져올 준비가 되었습니다. 페이지가 렌더링 된 후 데이터가 표시되는 것을 확인할 수 있을 것입니다.

이렇게 함으로써, Provider를 사용하여 블로그 글 목록을 가져오는 방법에 대해 배워보았습니다. 이를 기반으로 더 많은 기능을 추가하여 더욱 풍부하고 유용한 앱을 만들어보세요.