Fetching Data in Flutter and Displaying in ListView

One of the most common operations in mobile apps is to fetch data from a Web API and display it in a ListView control. Luckily, Flutter makes it super easy. In this post you will learn how to display news in your Flutter app which is downloaded from NewsAPI.org.

Implementation

In order to perform any request with NewsAPI you first need to get an API key. This can be done by registering on NewsAPI.org website. Please make sure that you have an API key in order to follow this tutorial. Without the key you will not be able to make any network calls to NewsAPI service.

Now, that you have got your API key let’s get started.

Models

Our first task is to implement the models associated with the data we will receive back from the NewsAPI service. For our app we will be fetching all the recent headlines from the NewsAPI using this url. The implementation of the model is shown below:

In our NewsArticle model we implemented the fromJson function which is responsible…