Flutter에서 실제 API 사용 예시

Flutter에서 실제 API 사용 예시: 뉴스 목록 앱 만들기

이 블로그 글에서는 Flutter를 사용하여 뉴스 목록 앱을 만드는 실제 API 사용 예시를 소개합니다.

이 예시를 통해 Flutter에서 API를 활용하는 기본적인 과정을 이해하고, 여러분의 앱 개발에 도움이 되는 실용적인 코드를 살펴볼 수 있습니다.

1. 프로젝트 설정 및 준비

• 새로운 Flutter 프로젝트 생성: VSCode 또는 Android Studio와 같은 IDE를 사용하여 새로운 Flutter 프로젝트를 생성합니다.
• pubspec.yaml 파일 편집: 필요한 라이브러리 (http, dio 등)를 pubspec.yaml 파일에 추가합니다.
• API 키 발급: 사용할 뉴스 API의 API 키를 발급받습니다.

2. 뉴스 API 모델 정의

다음은 뉴스 기사 데이터를 나타내는 Dart 모델입니다.

class NewsArticle {
  final String sourceId;
  final String sourceName;
  final String author;
  final String title;
  final String description;
  final String url;
  final String urlToImage;
  final DateTime publishedAt;

  NewsArticle({
    required this.sourceId,
    required this.sourceName,
    required this.author,
    required this.title,
    required this.description,
    required this.url,
    required this.urlToImage,
    required this.publishedAt,
  });

  factory NewsArticle.fromJson(Map<String, dynamic> json) {
    return NewsArticle(
      sourceId: json['source']['id'] as String,
      sourceName: json['source']['name'] as String,
      author: json['author'] as String?,
      title: json['title'] as String,
      description: json['description'] as String,
      url: json['url'] as String,
      urlToImage: json['urlToImage'] as String?,
      publishedAt: DateTime.parse(json['publishedAt'] as String),
    );
  }
}

 

3. API 호출 및 데이터 가져오기

다음은 뉴스 기사 목록을 API로부터 가져오는 코드입니다.

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List<NewsArticle>> fetchNewsArticles() async {
  final url = 'https://newsapi.org/v2/top-headlines?country=kr&apiKey=YOUR_API_KEY';
  final response = await http.get(Uri.parse(url));

  if (response.statusCode == 200) {
    final jsonBody = json.decode(response.body) as Map<String, dynamic>;
    final articlesJson = jsonBody['articles'] as List<dynamic>;
    return articlesJson.map((articleJson) => NewsArticle.fromJson(articleJson)).toList();
  } else {
    throw Exception('Failed to fetch news articles');
  }
}

 

4. UI 구현 및 데이터 표시

다음은 뉴스 기사 목록을 ListView 위젯에 표시하는 코드입니다.

class NewsListScreen extends StatefulWidget {
  @override
  _NewsListScreenState createState() => _NewsListScreenState();
}

class _NewsListScreenState extends State<NewsListScreen> {
  Future<List<NewsArticle>>? _futureNewsArticles;

  @override
  void initState() {
    super.initState();
    _futureNewsArticles = fetchNewsArticles();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<NewsArticle>>(
      future: _futureNewsArticles,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final articles = snapshot.data!;
          return ListView.builder(
            itemCount: articles.length,
            itemBuilder: (context, index) {
              final article = articles[index];
              return NewsArticleTile(article: article);
            },
          );
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

 

5. NewsArticleTile 위젯

 

class NewsArticleTile extends StatelessWidget {
  final NewsArticle article;

  const NewsArticleTile({Key? key, required this.article}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: SizedBox(
        width: 72,
        height: 72,
        child: Image.network(
          article.urlToImage ?? '',
          fit: BoxFit.cover,
        ),
      ),
      title: Text(article.title),
      subtitle: Text(article.sourceName),
      onTap: () {
        // 뉴스 기사 상세 페이지로 이동하는 코드를 추가합니다.
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => NewsArticleDetailScreen(article: article),
          ),
        );
      },
    );
  }
}

 

6. NewsArticleDetailScreen 위젯

다음은 뉴스 기사 상세 내용을 표시하는 NewsArticleDetailScreen 위젯입니다.

class NewsArticleDetailScreen extends StatelessWidget {
  final NewsArticle article;

  const NewsArticleDetailScreen({Key? key, required this.article}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(article.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '${article.sourceName} - ${article.publishedAt.toString()}',
                style: TextStyle(fontSize: 12.0, color: Colors.grey),
              ),
              SizedBox(height: 16.0),
              Image.network(
                article.urlToImage ?? '',
                fit: BoxFit.cover,
                height: 200.0,
              ),
              SizedBox(height: 16.0),
              Text(
                article.description,
                style: TextStyle(fontSize: 16.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

7. 실행 및 확인

위 코드를 실행하면 뉴스 목록 앱이 실행되고, API로부터 가져온 뉴스 기사 목록을 볼 수 있습니다. 뉴스 기사를 선택하면 상세 내용 페이지로 이동됩니다.

 

8. 마무리

이 블로그 글에서는 Flutter에서 실제 API를 사용하여 뉴스 목록 앱을 만드는 예시를 살펴보았습니다.

본 예시를 참고하여 여러분의 앱 개발에 필요한 API 사용 방법을 익히고, 멋진 앱을 만들 수 있기를 바랍니다.

 

참고:

• 위 예시는 기본적인 구조를 보여주는 예시이며, 실제 앱 개발에서는 디자인, 기능 추가, 오류 처리 등을 더욱 완성해야 합니다.
• 사용하는 API에 따라 모델 정의, API 호출 방식, UI 구현 등이 다를 수 있습니다.

궁금한 점이나 추가적으로 다루고 싶은 내용이 있으면 언제든지 질문해주세요.