Creating News Apps with Flutter News Toolkit
- By Aiza Anjum
In recent years, there has been a significant decrease in the use of web browsers to consume information. This trend can be attributed to several factors, including the widespread adoption of mobile devices, the rise of mobile apps, and the increasing popularity of social media.
One of the primary reasons for this shift as stated earlier, is the ubiquity of smartphones and tablets. These devices offer users a more convenient and portable way to access information than desktop computers or laptops. Mobile apps, in particular, have become increasingly popular, with many users preferring to access their favorite websites through dedicated apps rather than using a web browser.
It is therefore important that news based portals turn towards mobile applications in order to retain and grow their audience and consequently their revenues. To make this easier, Flutter and the Google News Initiative have collaborated in order to create a news application template, which aims to make reliable information easily accessible to all by helping news publishers build mobile applications quickly.
The template significantly reduces the development time required for typical news applications by providing developers with a head start on core components and features. In this article, we talk about what the Flutter News Toolkit is, as well as its key features and advantages and how it can be used at a basic level.
What is the Flutter News Toolkit?
The Flutter News Toolkit, which is built with Flutter and Firebase, includes common news app UI workflows and core elements. It also implements best practices for news apps based on Google News Initiative Research. With the toolkit, publishers can immediately monetize their apps with ads and subscription services.
Common services such as authentication, notifications, analytics, and ads have been integrated using Firebase and Google Mobile Ads. However, developers have the flexibility to substitute these services with other publicly available packages on pub.dev.
With its customizable UI and built-in functionality for fetching news from popular sources like NewsAPI, the Flutter News Toolkit is a powerful tool for developers looking to create news applications rapidly.
Also, by providing pre-built modules for essential features such as those listed below, the Flutter News Toolkit significantly reduces mobile app development time by up to 80%:
User Onboarding
Content Feeds and Pages
Analytics
Notifications
Social sharing
Subscriptions
Ads
Searching and Browsing Functionality
GitHub Workflow for CI/CD
Next, we take a look at the key advantages of using Flutter News Kit as well as the basic steps that can be taken to integrate it into an application.
Key Advantages:
Customizable UI: One of the key features of Flutter News Kit is its customizable UI. The library comes with a range of UI widgets that can be used to create a unique and visually appealing news application. Developers can customize everything from the colors and fonts used in the application to the layout of the news articles.
NewsAPI: Flutter News Kit also comes with built-in functionality for fetching news from popular sources like NewsAPI. This means that developers can easily add news articles to their application without having to manually curate content.
Cross Platform Support: Flutter News Kit is built with Flutter, which is a powerful and flexible framework for building cross-platform applications. This means that developers can create news applications that work seamlessly on both iOS and Android devices. It also allows developers to use the same codebase for both platforms, which can save time and reduce the risk of errors.
Overall, Flutter News Kit is a great tool for developers looking to create news applications quickly and easily. Its customizable UI and built-in functionality for fetching news make it a valuable asset for any developer looking to create a news application.
With Flutter News Kit, developers can focus on creating a great user experience for their application without having to worry about the underlying code.
Integrating Flutter News Kit
Here's a basic guide on how to integrate Flutter News Kit in your application:
1. Install Flutter: Before you can use Flutter News Kit, you need to have the latest version of Flutter installed on your computer. You can download and install Flutter from the official Flutter website.
2. Create a new Flutter project: Once you have Flutter installed, you can create a new Flutter project using your preferred IDE or the command line.
3. Add the Flutter News Kit dependency: To use Flutter News Kit in your project, you need to add it as a dependency in your project's pubspec.yaml file. You can do this by adding the following code to the dependencies section.
4. Import the Flutter News Kit package: Once you have added the dependency to your project, you need to import the Flutter News Kit package in your code. You can do this by adding the following code at the top of your Dart file.
5. Create a NewsAPI client: To fetch news articles from NewsAPI, you need to create a NewsAPI client. You can do this by creating a new instance of the NewsAPIClient class:
6. Fetch news articles: Once you have created a NewsAPI client, you can use it to fetch news articles. You can do this by calling the getTopHeadlines method on the client.
7. Display news articles: Finally, you can display the news articles in your application using the Flutter News Kit widgets. You can use the ArticleList widget to display a list of articles:
It is also important to note that with the use of Dart Frog, which is a powerful and simple to use tool for powering backends with Dart, developers can allow for efficient backend development by eliminating the need to create the backend from scratch. This also results in a significant reduction in development time and effort.
To read more about how backend works with Dart Frog, you can refer to our article.
Let’s Make a Difference Together
Do you have a project idea in mind and would like to bring your vision into reality?
Walturn would love to support your mission. Reach out to us below: