[flutter] 플러터 RxDart로 RSS 피드 및 뉴스 리더 앱 개발하기

05 Dec 2023

flutter

플러터는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 도구로, 다양한 플랫폼에서 동일한 코드를 사용하여 앱을 개발할 수 있습니다. 이번에는 플러터의 라이브러리 중 하나인 RxDart를 사용하여 RSS 피드 및 뉴스 리더 앱을 개발하는 방법에 대해 알아보겠습니다.

RxDart 소개

RxDart는 플러터에서 반응형 프로그래밍을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. RxDart를 사용하면 스트림과 이벤트들을 조합하여 매우 유연한 앱 로직을 구성할 수 있습니다.

RSS 피드 가져오기

RSS 피드를 가져오기 위해서는 http 패키지를 사용해야 합니다. 먼저, pubspec.yaml 파일에 다음 의존성을 추가해주세요:

dependencies:
  http: ^0.13.0
  rxdart: ^0.26.0

그리고 플러터 코드에서 다음과 같이 http 패키지와 rxdart 패키지를 import 해주세요:

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

이제 RxDart를 사용하여 RSS 피드를 가져오는 스트림을 생성해보겠습니다. 다음은 RxDart의 fromCallable 함수와 flatMap 함수를 사용하여 RSS 피드 URL에서 데이터를 가져오는 간단한 예제입니다:

Stream<List<String>> getRssFeed(String url) =>
  Observable.fromCallable(() => http.get(Uri.parse(url)).then((res) => res.body))
    .flatMap((body) => Observable.fromFuture(parseRss(body)));

Future<List<String>> parseRss(String body) async {
  // RSS 피드 파싱 로직 구현
  // 파싱된 데이터를 List<String> 형태로 반환
}

위의 코드에서 http.get(Uri.parse(url))를 호출하여 RSS 피드 URL에서 데이터를 가져옵니다. 그리고 가져온 데이터를 parseRss 함수로 전달하여 파싱 로직을 수행합니다. 파싱된 데이터는 List<String> 형태로 반환됩니다.

UI 구성하기

이제 가져온 RSS 피드를 사용하여 UI를 구성해보겠습니다. 플러터에서 UI를 구성하는 방법은 다양하지만, 여기서는 ListView.builder 위젯을 사용하여 간단하게 목록을 보여주는 예제를 작성해보겠습니다. 아래 코드를 참고해주세요:

class RssReaderApp extends StatelessWidget {
  final Stream<List<String>> rssFeed;

  RssReaderApp({required this.rssFeed});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RSS Reader'),
      ),
      body: StreamBuilder<List<String>>(
        stream: rssFeed,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data![index]),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else {
            return CircularProgressIndicator();
          }
        },
      ),
    );
  }
}

위의 코드에서 RssReaderApp 클래스를 정의하고, rssFeed라는 스트림을 생성자로 전달받습니다. Scaffold 위젯을 사용하여 기본 앱 레이아웃을 구성한 뒤, StreamBuilder 위젯을 사용하여 rssFeed 스트림의 데이터를 감시하고 UI를 업데이트합니다.

앱 실행하기

이제 main.dart 파일에서 위에서 작성한 RssReaderApp을 실행해보겠습니다:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RssReader',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RssReaderApp(rssFeed: getRssFeed('<RSS_FEED_URL>')),
    );
  }
}

위의 코드에서는 MaterialApp을 사용하여 앱의 기본 테마와 RssReaderApp을 실행하는데 필요한 rssFeed 스트림을 전달합니다. <RSS_FEED_URL> 부분은 실제 사용할 RSS 피드의 URL로 변경해주어야 합니다.

이제 앱을 실행하면 RSS 피드의 뉴스 목록을 볼 수 있습니다.

마무리

이번에는 플러터의 RxDart를 사용하여 RSS 피드 및 뉴스 리더 앱을 개발하는 방법에 대해 알아보았습니다. RxDart를 활용하면 플러터 앱의 로직을 쉽고 간결하게 구현할 수 있으므로, 다양한 앱 개발에 유용하게 활용할 수 있습니다.