How to parse RSS Feed in Flutter?

Last updated Jun 12, 2020

In this post we are going to learn how to parse RSS Feed in flutter.

Let's get started.

Step 1: Create Flutter application

Step 2: Add dependencies in pubspec.yaml

in this example we are using http for http request install this plugin also by adding.

dependencies:
  flutter:
    sdk: flutter
  webfeed: ^0.4.2
  https: ^0.12.1

Step 3: Create Model class NewsModel.dart

class NewsModel {
  final String title;
  final String description;

  NewsModel({this.title, this.description});
}

Step 4: update main.dart file with below code

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:webfeed/domain/rss_feed.dart';

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

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

class MyApp extends StatelessWidget {
  static String rssUrl = 'https://feeds.bbci.co.uk/news/rss.xml';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: Container(

          child: FutureBuilder(
            future: fetchNews(),
            builder: (context, snap) {
              if (snap.hasData) {
                final List _news = snap.data;
                return ListView.separated(
                  itemBuilder: (context, i) {
                    final NewsModel _item = _news[i];
                    return ListTile(
                      title: Text('${_item.title}'),
                      subtitle: Text(
                        '${_item.description}',
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    );
                  },
                  separatorBuilder: (context, i) => Divider(),
                  itemCount: _news.length,
                );
              } else if (snap.hasError) {
                return Center(
                  child: Text(snap.error.toString()),
                );
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            },
          ),
        ),
      ),
    );
  }
  Future> fetchNews() async {
    final _response = await http.get(rssUrl);

    if (_response.statusCode == 200) {
      var _decoded = new RssFeed.parse(_response.body);
      return _decoded.items
          .map((item) => NewsModel(
        title: item.title,
        description: item.description,
      ))
          .toList();
    } else {
      throw HttpException('Failed to fetch the data');
    }
  }
}

 

Step 5: Run application

RSS Feed in Flutter

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

4162 Views