This article/tutorial is a continuation of my previous post, so if you haven’t read through that yet please do to get a full background. That being said I would like to start by thanking all the support that has come through the development of Pool, the community gave me great feedback and seemed to generally enjoy the journey and structure of the article. In this article, I will be tackling some common UI components in Social Networking Apps that weren’t addressed in the first part.

What We Have So Far?

By the end of the previous article, we already created a beautiful UI that draws to the attention of the user with very little code. The overall Home Screen managed to be beautiful, verbose yet functional. The Featured Events section consisted of an Event Cell which was concise with the necessary details that were easy on the eyes. Then there was the Header View which by being Animated immediately conducted the attention of the user. All of these widgets were constructed with less than 5–6 native widgets.

What’s Next?

There are a couple of views left to make which we will be making in this part of the tutorial. Essentially we are going to finish a majority of the core components and save the final part of the article to add the functionality to the App.

Views we will create in this part:

Profile View

Multifunctional ListView

Event Detail View

Functionality Left to Implement:

A Backend that runs locally

Button interaction

Event Creation

Login

Working Search

Let’s Get Started!

Before we begin the bulk of the programming I am assuming that you have Flutter setup with your machine with an extension installed on your choice IDE. I will be using Xcode and deploying to iOS but in theory, you can deploy this app to Android as well.

General

The purpose of this app is to provide an easier method of finding public events in a given area — whether it is for students or the community in general. As this seems to be a basic Utility/Social Networking App that can be created with little code, it is the ideal starter app for anyone learning Flutter for the first time.

When orchestrating User Interfaces for Flutter Apps or React Apps I like to visualize the general widget/component hierarchy as a diagram and work from there. Creating a diagram, instead of shotgunning and going headfirst into the code is a good practice that prevents confusion when you are knee-deep in widgets.

The Profile View

When creating an effective Profile View, you will need to have three main components: user details, user picture, and related user involved content. When creating the ProfileView for Pool I wanted to incorporate bold colors and horizontal scrolling panels for Users to be able to able to access information that is easy on the eyes.