SLC S23W2 - Building a Flutter-Based News Aggregator App with News API

Assalamualaikum my fellows I hope you will be fine by the grace of Allah. Today I am going to participate in the steemit learning club season 23 week 2 by @mohammadfaisal, @kafio, @alejos7ven under the umbrella of steemit team. It is about the technology and development. Let us start exploring this week's learning club.

Made with Canva

I have worked with Flutter in last season. And today I will be creating an application with the help of the Flutter Framework. I have decided to create an application which will provide news regarding different areas such as technology, business, sports, entertainment, and health. These are all the basic and required news types which should be at the hand for everyone. This application will serve like a News Aggregator application.

In my this project of news aggregator there will be these features:

• HomeScreen
• Displaying different categories of news
• Search Bar
• News Details Screen

These will be the major screens and features of my this news aggregator application.

I am going to use the news API from the widely used website https://newsapi.org/v2. This API will help me to fetch and display the data. To use their API I have created an account on the website and after verifying the email I generated the API to use.

And in order to fetch the API data and to display the images and playing the trailers I will have need of following packages:

• http: ^1.3.0
• shimmer: ^3.0.0
• url_launcher: ^6.3.1

These are the latest versions of these packages at the time of building the application and it can be changed later on with the new updates.

I have created a constant.dart file to store the constants in this file. In this application there a total of three constants which do not change over time. The first is the API key I have removed the API because of the security reasons. Then there is the list of the categories for the news.

I have designed a beautiful home screen by using material design elements such as different icons and colours for each icon. At the top in the appBar I have designed a search option. It allows the users to search any type of news.

In the body of the screen I have used grid layout to align the icons in the card widgets. The card widgets has some elevation making them look more beautiful. The use of different colours for the icons is also making the layout and design attractive.

Each card widget with an icon is clickable. It uses navigator.push method to navigate from the home screen to the next screen to display the relevant news according to the category of news.

I have created a model by using different variables as shown above in the class Article. All these variables have their own work and properties. I have used ternary operators and the data is being fetched using the key value pairs. If the relevant data is not available then it returns null.

This is the format of the news_detail_screen. I have used card widget with the custom design specifically of the borders. The top borders of left and right side both have a circular radius which is making them rounded. I have used ListTile to present the news in a more beautiful way. The background has the image of the news.

I have used shimmer effect to make the screen interactive for the user. Due to the shimmer effect the cards are shown as loading until the news are not loaded. Each card widget holding the news is clickable and leads the user from the list of the news to the detail screen of the news.

In the details screen I have divided the full screen into two parts. One is fixed and can be scrolled up or down but the other is the scrollable part. The fixed part includes the cover image of the news by accumulating all the available container size. It has a back button at the left corner. The white container which is looking above the picture is scrollable. It has the complete title and the description of the news and the name of the website which published the news. It also has time of publishing this post. If you find the description and title interesting then you can read full article.

At the end of the details screen I have added another section which is also scrollable but it is horizontally scrollable as it is in the row form. This section includes all the similar news to the currently opened news. To make it look interesting I have used card widget and there is cover image and title of the news. While checking a single post the user can read similar news easily.

This is the screen to search the news. I have designed this screen with such an algorithm that if the user searches any keyword, category and anything other then the search function returns all the relevant news posts.

This is the complete code which is used to search any news using the query based on the keywords. This class gets the access to the NewsService() file and by getting data from this and passing the searched query to the NewsService() it gives all the found results with the required parameters such as the image of the news, title of the news, and the news source website.

I have searched bitcoin and I have received all the news posts related to bitcoin. Each result consists of the news image, news title and news source such as website. The users can search and find specific news world wide. When the user selects any news result then the detail of the news is shown on the details screen.

This is the complete working of my project the home screen shows the search option and and all the categories of the news. When the user searches any keyword all the relevant news are displayed. The user can also go to the specific news list by choosing from the given categories. And in the details screen of the news similar news are also displayed.

---

I have uploaded all the files in the Github Repository.

---

I invite my friends @kouba01, @sergeyk, and @chant to show their capabilities in this technology and development learning club.