A News App With Flutter

Flutter Fresh Start :)

This is a Three Activity App one is for Home,News feeds and one is for Full Stories.

Lets take a look over the structure of the project

In the lib Folder a file with name constants.dart in the lib directory.

class Constant{
  static String base_url ="https://newsapi.org/v2/";
  static String key = "Enter_your_new_api_key"; 
}

For the Free API Key of news API kindly visit https://newsapi.org

Add Libraries for the project in the file of pubspec.yaml save the file.

http: ^0.11.3+16
flutter_webview_plugin: "^0.1.6"

I am using flutter_webview_plugin for showing the full news story.This plugin is use as web view in Android term.

For the home screen i am using Grid view and in the grid view using card as the children widget i wrap the card under gesture detector for onTap event on the card

new Card(
    elevation: 3.0,
    child: new GestureDetector(
      child: new Container(
        child: Column(
          children: <Widget>[
            Image.asset(
              "assets/business.jpg",
              alignment: Alignment.center,
              width: 120.0,
              height: 120.0,
            ),
            new Padding(
              padding: EdgeInsets.all(15.0),
              child: Text(
                "Business Headlines",
                style: TextStyle(
                    fontSize: 20.0, color: Colors.black),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
      onTap: () {
        var id = 1;
        Navigator.push(
            context,
            new MaterialPageRoute(
              builder: (BuildContext context) =>
                  new NewsFeedPage(id),
            ));
      },
    )),

After the on tab application will move to the news feeds page where we will find the latest news from our news api here we are going to parse the json response of the api here for that we have to request the api and parse the response of the api.

Future<List<News>> fatchNews(http.Client client, id) async {
  String url;
  if (id == 1) {
    url = Constant.base_url +
        "top-headlines?country=in&category=business&apiKey=" +
        Constant.key;
  } else if (id == 2) {
    url = Constant.base_url +
        "everything?q=bitcoin&sortBy=publishedAt&apiKey=" +
        Constant.key;
  } else if (id == 3) {
    url = Constant.base_url +
        "top-headlines?sources=techcrunch&apiKey=" +
        Constant.key;
  } else if (id == 4) {
    url = Constant.base_url +
        "everything?q=apple&from=2018-07-14&to=2018-07-14&sortBy=popularity&apiKey=" +
        Constant.key;
  } else if (id == 5) {
    url =
        Constant.base_url + "everything?domains=wsj.com&apiKey=" + Constant.key;
  }
  final response = await client.get(url);
  return compute(parsenews, response.body);
}

Once we got the response form the api now time to parse the api json response for this we will use a List type method.

List<News> parsenews(String responsebody) {
  final parsed = json.decode(responsebody);
  return (parsed["articles"] as List)
      .map<News>((json) => new News.fromJson(json))
      .toList();
}

Now the time to make the model for the api response and assign them into a map with factory type.

class News {
  String auther;
  String title;
  String description;
  String url;

  News({this.auther, this.title, this.description, this.url});

  factory News.fromJson(Map<String, dynamic> json) {
    return News(
      auther: json['author'] as String,
      title: json['title'] as String,
      description: json['description'] as String,
      url: json['url'] as String,
    );
  }
}

After making the model time to generate the list of the headlines.Here we have take a serious look on onTap we passed the url of the tapped news headline on the “Full Story” page. For page Navigation we are using MaterialPageRoute.

class NewsList extends StatelessWidget {
  final List<News> news;

  NewsList({Key key, this.news}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: news.length,
      itemBuilder: (context, index) {
        return new Card(
          child: new ListTile(
            leading: CircleAvatar(
              child: Icon(
                Icons.star,
                color: Colors.white,
              ),
              backgroundColor: Colors.lightBlue,
            ),
            title: Text(news[index].title),
            onTap: () {
              var url = news[index].url;
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                    builder: (BuildContext context) => new DescriptionPage(url),
                  ));
            },
          ),
        );
      },
    );
  }
}

So we are at the end of our app we have done the good work now the time to give the full story of the news to your user.Here we will create the file description.dart.

import 'package:flutter/material.dart';
import 'newsfeeds.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

void main() => runApp(new DescriptionPage(null));

class DescriptionPage extends StatelessWidget {
  static String tag = 'description-page';
  DescriptionPage(this.urlnews);
  final String urlnews;
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text(
          "Full Article",
          style: new TextStyle(color: Colors.white),
        ),
        iconTheme: IconThemeData(color: Colors.white),
      ),
      body: new SafeArea(
        child: new Column(
          children: <Widget>[
            MaterialApp(
              routes: {
                "/": (_) => new WebviewScaffold(
                      url: urlnews,
                      appBar: new AppBar(title: new Text("")),
                    )
              },
            ),
          ],
        ),
      ),
    );
  }
}

Here the app ends We have created the app now.

For more clear infomation of code kindly take a look over GitHub.

Thank you.