Flutter 뉴스 API 연동하기(2) - 통신하기

저번에 세팅 해 뒀던 뉴스 API 를 받아와서 파싱 해서 보여주기를 진행해 보려고 한다. 

Flutter 뉴스 API 연동하기(1) - 기초 세팅

 

 

[ News 클래스 만들기 ] 

통신을 통해 받아 온 값들을 넣어 둘 News 클래스가 필요하다. 지난번에 포스트맨을 통해 어떤 값들을 해당 사이트에서 주는 지를 확인 했기 때문에 그 값들 중 사용 할 값들만 가지고 클래스를 만들어 준다. 

 

나는 타이틀과, 이미지, 어느 뉴스사 인지 그리고 url 을 파싱해 올 예정이다. 따라서 아래와 같이 4개의 항목들만 클래스로 만들어 준다. 

class News {
  late String title;
  late String urlToImage;
  late String publishedAt;
  late String url;

  News({
    required this.title,
    required this.urlToImage,
    required this.publishedAt,
    required this.url,
  });

  News.fromMap(Map<String, dynamic>? map) {
    title = map?['title'] ?? '';
    urlToImage = map?['urlToImage'] ?? '';
    publishedAt = map?['publishedAt'];
    url = map?['url']?? '';
  }
}

 

 

[ News API 호출 ]

비동기통신을 통해 uri를 를 보내고 값들을 <News> 클래스의 리스트 배열에 담아 해당 리스트를 리턴해 준다. 

uri를 곧바로 파싱 할 수 있는건 저번에  pubspec.yaml에  get 해줬던 의존성 때문이다. 

# 통신용
http: ^0.13.4

api 불러오는 페이지에 
import 'package:http/http.dart' as http;

  Future<List<News>> requestNews() async {
    Uri uri = Uri.parse(
        "https://newsapi.org/v2/top-headlines?country=kr&category=business&apiKey=본인의 앱키");

    List<News> news = [];

    final response = await http.get(uri);

    if (response.statusCode == 200) {
      List<dynamic> articles = jsonDecode(response.body)['articles'];

      news = articles.map<News>((article) {
        return News.fromMap(article);
      }).toList();
    }

    return news;
  }

 

 

[ News 데이터 확인 ]

Api를 파싱해서 값들을 News 에 담아 주었다면 이제 이것들을 화면에 보여주는 작업을 해야 한다. 

따라서 데이터를 잘 받아 왔는지 확인하는 작업을 해주고 buildNewsCard 카드를 통해 화면그려주는 걸 진행 하면 된다.  

 Widget getNewsApi(BuildContext context) {
    double deviceWidth = MediaQuery.of(context).size.width;

    return FutureBuilder<List<News>>(
      future: requestNews(),
      builder: (context, AsyncSnapshot<List<News>> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text("데이터를 가져오는 동안 오류가 발생했습니다."));
        } else {
          List<News> newsList = snapshot.data ?? [];
          if (newsList.isEmpty) {
            return Center(child: Text("뉴스가 없습니다."));
          }

          return buildNewsCard(isDarkMode, context, deviceWidth, newsList);
        }
      },
    );
  }