App description:

Today, I am going to start this article in a very old fashion way. It is 2020, we are living in the age where information is everywhere (or should I say disinformation?). And what better way to contribute to it than creating a cross platform news – blog app!

Well it’s not really cross platform but it still works on IOS and Android, you can even make it work in Web thanks to the power of Google Flutter ❤.

Getting started:

To get started, go ahead and clone my Github repo: https://github.com/cybdom/blog_app

Make sure you have NodeJS installed if you want to run the server, if you don’t have NodeJS yet go ahead and download it from the official website: https://nodejs.org/en/. (Hopefully am going to make a tutorial on how to set up / create the server).

Now before opening the Flutter folder I advise you to buy a coffee for yourself and another for me at https://www.buymeacoffee.com/bi3cp0Zk5, it may help both of us 😉.

In this part we are not going to worry about the Provider package, the notifiers etc… All we are going to do for now is to build this beautiful UI.

Building the UI:

Screens:

Home Screen:

Usually blogging and news apps have some sort of carousel where breaking news are shown, so I called this widget HomeScreenHeader, it takes the posts that we get from the server and display them in a page view.

Because users have different needs and preferences there is a category list right below the important news section.

This list returns all the different categories available on the server and outputs them in a custom widget I made called CategoriesList.

As you can see, instead of using the default Divider I preferred to use a Container which I gave a height of 1 and an infinite width. It also has the default divider color.

The last widget is actually the most important part here, it is the PostsList and because of that it is expanded and it takes the remaining height of the screen. This widget also takes a list of blog/news posts as and shows them nicely.

Profile Screen:

When consuming information online it is important to know who the writer is, and that’s exactly why this profile screen exists. Here our user can find different information about the author such as:

The author name. The account type. How many trending articles. How many bookmarked. A full list of articles by that author. etc…

So to start this screen we begin with a Scaffold obviously, then we add a white app bar with a back IconButton to allow the user to go back to the main screen. Also, because we don’t want the app bar to stand out make sure to set its elevation to 0.

The rest of the screen is in the ProfileContent widget.

Widgets:

Home Header + Breaking News:

The HomeScreenHeader is composed of the three other widgets.

First, a top left positioned menu IconButton, pretty simple.

Then, a bottom positioned progress indicator. As the user scrolls through the trending articles this widget indicates how which position he is at. To achieve this, make the HomeScreenHeader stateful and declare a private variable called _active and give it an initial value of 0. Using the PageView onPageChanged function we increment this value and this reflects in the ProgressBar.

Finally we have a Positioned.fill PageView.Builder that returns a BreakingNews widget.

BreakingNews takes three final variables: imageUrl, title and author.

In a Stack widget, we start with the background image which has to take the full space, so we use Positioned.fill to wrap the FadeInImage.assetNetwork. This widget allows to display a placeholder while we download the actual image.

Then all the text and article information are set in another Positioned.fill widget, inside a column which mainAxisAlignment is set to end.

Category List:

Because this widget has a List in it, we need to wrap it in a container and give it a specific height. Only then we can use the ListView.Builder widget which will return the actual category items.

Each item is tap able and once tapped it becomes active and changes color. In order to achieve this result the CategoryList has to be stateful, we also need to set a _active variable to keep track of the selected category. The category item itself is a Container which has some padding as a separation, as well as a BoxConstrained that makes sure that even if the category title is very short the container itself isn’t too small. As a decoration for the container we have a border radius which is the same whether it’s active or not, but there is also a color which is either black or transparent depending on the state of the widget. The margin of the container depends on whether it is the first item on the list or not, so if it is the first item you probably don’t want it to have a margin on the left side.

Other than that the container takes a Text child, which is either white and bold if it’s active or gray and normal if it’s not.

Post List:

All the news are shown here through the Post List widget, once we get the data from the server we pass it as list of type PostModel to this widget and then we handle the UI part of it.

The UI is composed of three parts, the first one is a RotatedBox which shows the posts’ category as well as the appropriate icon. The second is just a Vertical divider made using a container. And finally, a ListView.Builder that takes most of the space and returns the post containers by giving them the data received earlier.

Post Container:

The individual post container takes a few variables, all of which are Strings.

The children of this widget are horizontally aligned using a Row, so we start with the article image then we give it a bit of space using a SizedBox, then we use another Flexible widget with a flex of 3 to take the remaining space.

This last widget shows the other news post information such as the title, category, etc…

Profile Column Info:

This is a very simple widget, am sure most of you guys don’t need an explication for this one. But here is a quick explanation for those new flutter developers out there!

It takes three final variables:

Icon which an Icon Data: A description of an icon fulfilled by a font glyph. (documentation) Title which is just a String. Count which is an Integer.

Its build function returns a simple column, its first child is a Red Icon, the second one is a Text widget that takes the title string and shows it in a subtitle style, and finally a Text widget that displays the number of types that particular stat happened (you should make sure that if count = 0 to return “time” instead of “times”).

Final thoughts:

Stay tuned for the next tutorial which is going to be about building the NodeJS server and hosting it on Heroku cloud application platform.

Make sure to subscribe to my Newsletter, and follow me on Twitter at @cybdom to receive a notification once that tutorial is out!

Until then, enjoy your coffee.