Flutter News Toolkit: Portal for Creating a Rapid News App

Seamless content-focused news app development toolkit

Dash reading news

At Flutter Forward on 25th January 2023, Google announced a variety of new integrations into Flutter and Dart, some of the key features were as below.

1. The release of Flutter News Kit
2. Material 3
3. The introduction of FFIgen and JNIgen
4. Support for 3D in Flutter
5. The ability to embed Flutter elements into web applications
6. Dart 3 alpha

And many more! 🤩 The focus of this article will be on the integration of the Flutter News Toolkit right from scratch.

What is the Flutter News Toolkit?

• Flutter unveiled the first version of its news toolkit, promising up to an 80% reduction in development time. The toolkit aims to provide a comprehensive solution for developing a news app that includes both front-end and back-end development.
• With Dart Frog, a powerful tool for developing backends using Dart, the toolkit eliminates the need to build the backend from scratch, significantly reducing development time and effort.
• Additionally, the ready-made template provided with the toolkit serves as a starting point for creating an ideal news app, helping developers quickly launch their projects and achieve their desired results more efficiently and effectively.

How it eases the development cycle?

• The Flutter News Toolkit provides a solution for news publishers with limited resources and development teams.
• The toolkit handles critical components of a news app, such as UI screens, navigation, backend code, and routing.
• Publishers can focus on customization such as branding, content, and database connection with just a simple change.
• The toolkit makes launching a professional and user-friendly app quick and easy.

Features of the Flutter News Toolkit

Here are some of the interesting and out of box features that the toolkit provides:

1. Onboarding workflow and authentication
2. Content Feed Pages
3. Articles, Video, Images, etc., embedding and commenting support
4. Searching and browsing functionality
5. Ads Integration
6. In-App Subscriptions Management for premium news offering
7. Navigation and Routing
8. GitHub Workflow for CI/CD

Now let’s get to the main attraction of this blog: creating a news app using the Flutter News Toolkit with minimal effort. I’ll show you how to easily customize the brand and content. Here for the demo purpose, I will walk you through the process of creating and running the app. Surely you can customize the app UI and contents in your own way. Let’s just dive in real quick.

Prerequisites

The latest version of Flutter must be installed.

A Firebase account. You can create one by following this tutorial.

App Architecture

Although this article majorly focuses on implementation and building the app, it is equally important for us to understand what architecture our app is running.

Here are some high-level notes before we dive into the implementation details.

• The Application Layer is tasked with presenting the user interface, responding to user input, and overseeing state management. In this case, Flutter utilises the bloc library for state management.
• The Domain Layer is in charge of putting together information from different sources and making it usable for the app. It consists of many data repositories.
• The Data Layer is responsible for providing raw data from various sources to components. API client to connect backend stays here.

Installing dart_frog

• Open the Terminal and shoot the command

dart pub global activate dart_frog

dart pub global activate dart_frog output

• You can check if dart_frog is installed properly by running the command

dart_frog --version

• We have installed dart frog to run the backend of the news app.

Installing mason

• Mason CLI is a command-line interface tool that helps manage and automate processes in development and deployment.

dart pub global activate mason_cli

• Check if the mason is installed correctly

mason --version

Add flutter_news_template with mason

• Open the Terminal at the desired location and run the following command.

mason add -g flutter_news_template

mason add -g flutter_news_template output

• Now we can use this template and make our own app

mason make flutter_news_template

mason make flutter_news_template output

• Here, Mason CLI allows you to select the app name, identify your app and bundle IDs, specify code owners from your GitHub repository, and choose from different flavors.
• With Mason, most of the work is done for you, resulting in a ready-made app code generated within a folder named after your app, in this example, “simform_news”.

Building and running the app

• Run flutter pub get. It may take a while. Here, we have a folder structure something like this.

Folder Structure for the news app

• The api folder houses the backend code, including routing, controller, middleware, etc. For demonstration purposes, the backend will run temporarily on localhost for testing before release. Surely, you can host the backend on your own server.

Running the backend on localhost using dart_frog

• Head to the API folder using cd api
• Run the backend with the command

dart_frog dev

dart_frog dev output

Running the app on the emulator

• If you are using the emulator, you may need to change the base URL as we are running on [localhost](<http://localhost>); on an emulator, you can access localhost with IP 10.0.2.2:port

SimformNewsApiClient.localhost({
    http.Client? httpClient,
    required TokenProvider tokenProvider,
  }) : this._(
          baseUrl: 'http://10.0.2.2:8080',
          httpClient: httpClient,
          tokenProvider: tokenProvider,
        );

• Go to api/lib/src/client/flutter_news_example_api_client.dart
• Head to simform_news/android/app/src/development/google-services.json and replace the google_services.json with the firebase account.
• Finally, we can run the app in the development flavor.
• Even with the app ready and running, you can tweak some changes from the backend side, which will reflect on the response.

The output of the news app we just created

Video Output

Customization of the app

Let’s see what Flutter offers in terms of customizing the app and what areas of the app can be customized. Below is the list for the same.

Authentications Provider

• You can create your own firebase project and connect it with the app so readers can authenticate with multiple authentication providers like Google, Apple, Facebook, etc.

Ads Management

• Many news publishers want to integrate Google Ads with their apps, which can help them grow and motivate them to push more articles and content into the app.

Subscription Management

• News publishers can offer premium services to their readers by adding subscriptions to the app, which helps them to cater more premium features to their readers.

Content & Navigation Management

• The News Toolkit focuses on delivering a rich content management system to publishers, providing better readability through inbuilt video and image embedding, supporting comments, and engaging navigation experience based on Google News Initiative research within the app.

Backend Content Delivery Management

• As a news publisher, the primary objective of a news app is to consistently distribute the latest news updates. NewsToolkit allows for dynamic customization of news content, including format, titles, and descriptions, all of which can be easily altered from the backend to immediately reflect changes in the app.

Let’s understand this with a small example. We will tweak some of the changes from the backend, which will reflect in the app.

Changing the response from the backend server

1. Head to api/lib/src/data/static_news_data.dart and try modifying the content header text and URL to see some changes.
2. Here we will modify the heading of the Top News Section from Breaking News to Top News last hour.

Backend side news tweaks and changes

3. You may need to restart the server for the changes to be reflected on the app side.

Official Documentation & Guides

A written article introducing the Flutter News Toolkit

https://medium.com/flutter/announcing-the-flutter-news-toolkit-180a0d32c012

Official repo for the news toolkit 🎉
https://github.com/flutter/news_toolkit

Video tutorial from the official Flutter team 🚀

NewsToolkit tutorial

Conclusion

In this blog, we’ve explained how to create a news app using the Flutter News Toolkit. We’ve explored the usage of Mason CLI and delved into Dartfrog, which is a crucial component for backend development in Dart. Feel free to experiment with the app to maximise its potential and publish your own informative news and article app on various platforms.

Stay tuned and follow Simform Engineering for upcoming informative and exciting flutter forward topics articles.

That’s all for now, Have a great day! Keep Fluttering 💙

My name is Kaival Patel. A creative Flutter developer. You can connect with me on LinkedIn, follow me on Twitter, or check out my portfolio for additional information.