A Deep Dive into Flutter: The 22nd Century Frontend Framework (Part 2)
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.
All View Controllers require a Scaffold as the root widget, and this view is pushed from the Home Page. I utilized a series of Column and Padding -> Container to create the Header View shown to the side. When creating views without the inspiration that I had for the main screen it was important for me to have relatively the same design language to have unity throughout the application.
As for the profile pic it is placed in a Stack with a ClipRect to give a circular border. The stack gives it the overlay effect over the segment with the user information.
I added a Gradient Dependency to the application to ease the creation of cards that are being used to display the events that are upcoming for the user. I created a method that will randomly select a pre-made gradient from an array to present as the background of the card.
Event Details View
The Event details view didn’t take many components to create as it is reusing many of the widgets used in the pool_table_cell — it's essentially rearranging the concise information in a more visible way.
When the pool_table_cell is tapped there is currently no navigation in place. The plan is to have a detail view that has the header image displayed in the cell itself with a zoomed-in and matched with the aspect ratio of the screen. Below I wanted to have a description of the event on a floating view.
I recycled the friend_bubble widget from the profile_view which will eventually be used to display friends that are attending the event.
The bottom join button was created to give the same shadow effect that is used in a floating_action_button with the same color as the advanced options button color from the main screen. The hierarchy for the button goes in the order Padding-> Button-> Padding-> Text
To attain the perspective zoom look of the header image I utilized the AspectRatio widget.
Having the AspectRatio as a native widget part of the Flutter Library will make loading a header image in the detail view load better in real-time.
Multi-Functional ListView
There are many elements in the Pool app which require a list view to display information. For this, I decided to create a view which could be used to display many different forms of data in a concise manner, by modifying the pool_event_cell to be more minimal.
I began by moving the friend_bubble widget from the pool_event_cell into its own class to be used in the pool_list_cell class. I also did this with the distance_away widget to properly display it on the root cell.
Since this view is presented utilizing a modal screen by animating it from the bottom of the screen I made the entire view be presented using a bottom_sheet widget.
By default, the bottom_sheet widget only animates to fit half of the given screen real estate. Therefore I utilized a class I had found on Github that is a subclass of bottom_sheet and expands a given container to fit the entire width and height of the screen.
Conclusion
In recap, this article consisted of creating more data-intensive views involved in Pool. The user profile_view will be expanded to display data of any friends of the user also utilizing the Pool app. The list_view will be utilized in search results, along with additional events. The detail_view will be used any time a user navigates from an event_cell forward.
The next part of the article will consist of implementing the actual functionality of the app. I plan on using MongoDB and Dart itself to create a deployable backend that can be run locally.
I also plan on creating a view for the Search screen and results. But, the next part in this tutorial will predominantly be consisting of wrapping the whole app together and filling out the loose ends.
If you guys have any questions regarding the Pool Tutorial, feel free to reach out to me!
I have provided the link to the source code of this part below:
If you have any feedback, suggestions, or mind-blowing ideas be sure to let me know either below in the comments, message me on Twitter, or contact me from my website https://prad.dev. Be sure to share this article with your friends! The more input the merrier (Also, a couple of claps wouldn’t hurt either!)
