[flutter] 플러터 프로바이더를 사용하여 뉴스 앱 만들기

26 Dec 2023

flutter

플러터는 구글에서 개발한 모바일 앱 개발 프레임워크로, 프로바이더(provider)를 사용하여 상태 관리를 할 수 있습니다. 이번 블로그에서는 플러터와 프로바이더를 이용하여 뉴스 앱을 만드는 방법을 알아보겠습니다.

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

프로바이더를 사용하기 위해 provider 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.3.2

패키지를 추가한 후에는 flutter pub get 명령을 통해 패키지를 설치합니다.

2. 모델 클래스 생성

프로바이더를 사용하여 뉴스 정보를 관리하기 위해 News 모델 클래스를 생성합니다.

class News {
  final String title;
  final String description;

  News({required this.title, required this.description});
}

3. 프로바이더 클래스 생성

이제 뉴스 데이터를 관리하기 위한 프로바이더 클래스를 생성합니다.

import 'package:flutter/material.dart';
import 'news.dart';

class NewsProvider with ChangeNotifier {
  List<News> _newsList = [];

  List<News> get newsList => _newsList;

  void addNews(News news) {
    _newsList.add(news);
    notifyListeners();
  }
}

4. 메인 앱에서 프로바이더 사용

이제 앱의 상위 레벨에서 NewsProvider를 사용하여 뉴스 데이터를 관리할 수 있습니다.

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => NewsProvider(),
      child: MyApp(),
    ),
  );
}

5. 화면에서 프로바이더 사용

마지막으로 화면에서 NewsProvider를 사용하여 뉴스 데이터를 가져와 화면에 표시합니다.

class NewsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final newsProvider = Provider.of<NewsProvider>(context);

    return ListView.builder(
      itemCount: newsProvider.newsList.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(newsProvider.newsList[index].title),
          subtitle: Text(newsProvider.newsList[index].description),
        );
      },
    );
  }
}

이제 프로바이더를 사용하여 간단한 뉴스 앱을 만들었습니다. 플러터와 프로바이더를 사용하여 상태 관리를 효과적으로 할 수 있으며, 이를 통해 앱의 성능과 유지보수성을 향상시킬 수 있습니다.

더 많은 내용을 학습하고 싶으시다면 플러터 공식 문서를 참고하시기 바랍니다.