A Deep Dive into Flutter: The 22nd Century Frontend Framework
We are in a time where it’s necessary to develop in both mobile and web for your software. However, maintaining three different codebases for iOS, Android, and Web development results in immense time strain when in most cases you are developing the exact same solution. This has lead to the rise in cross-platform development tools that have traditionally used Javascript to develop apps that utilize Web Views to give native-esque experience. However, a relatively new player which came out of beta earlier this year is Google’s Flutter Framework.
The New Gold Standard
Flutter uses the Dart programming language, which means that the framework will get Native performance. This is because dart uses both a Dart VM with JIT (just-in-time) compilation and an AOT (ahead-of-time) compiler for producing machine code.
At the time of writing this article Flutter for Web just got early adopter sign up, and native desktop applications are on the road map.
App Structure
In Flutter everything is a widget, from the topmost view on the screen, to the text on any button, to the padding around the button. This simplicity allows developers to rapidly develop complex user interfaces with relative ease. Every item on the user interface is a widget inclosed in another widget until it’s reached to the topmost root widget.
Flutter comes with its own widgets that we will be mainly using in this example app, but we can also easily get custom widgets from the flutter packages at pub.dartlang.org
What we’ll be making
I found this App UI will browsing Pinterest a few weeks back and thought it was the perfect one to be able to turn into a Flutter Application. It is created by the Designer Ionut Zamfir everyone should check out his work he does great stuff!
I will split this tutorial into three parts:
- Recreating the UI Design into a Flutter App (Current)
- Expanding the UI to have a more verbose feature set
- Implementing a Backend stack with (MongoDB, Node.js)
My goal for the end of this series is to provide you with the skills to be able to create a flutter app and deploy it in a rapid team with a basic backend as well.
Let’s Get it 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 whole application at this point is only a single view encased in a Scaffold widget. Which is essentially the bare bones screen view, that implements material design and the general visual structure. The Container widget is essentially a blank view that can be constructed programmatically.
When I construct UI for Flutter Applications I like to visualize the general widget 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 Top View
The first part of the UI to create is the top widget, it seemed too simple at face value so I decided to implement an animated background. This was made using the simple-animations third-party library. I put all this code in a custom class called animated_background and made it the bottom-most item in my Stack widget. The next thing to do is put two Text widgets into Padding widgets and positioning them accordingly. The Padding the class has two functions all() and only() where all() shifts the entire object from all directions, and only() (as you've probably guessed) shifts only specified from directions.
The next part of this object is creating the search widget. Roughly the construction of this goes Padding → Container → Row → Text → Button. In this tutorial opposed to creating the triangular shape button to display additional details, I will be just utilizing a FloatingActionButton for simplicity sake. If you are interested in creating that same exact shape, I would recommend additional reading on CustomPainter.
Adding the Magic
Each element of the widgets we used to create our top view have different kinds of personalization options. If you are using VSCode for Flutter, then each of these elements is documented extensively and can be viewed through the IDE itself.
Final Result
This view is the most fundamentally different from the source material compared to any other widget. This was in part due to simplicity and time constraint. I have opted to make up for this by having an animated background in the header that changes colors, as you will be able to see when you run it in your own simulator.
The TableView Cell
I briefly touched on how the Table Cell layout on the General overview section. The diagram below for the widget architecture is far more extensive.
Since this entire object contains so many moving parts I began by creating a new class called tableview_cell
The first step is to create a background image that stretches to fit the entire portion of the cell. This will be the first element in the stack widget. The subsequent views on top of the stack widget will be a Text widget with shadow and a container widget that contains the pill background and date of the event.
I utilized the padding widget on each individual element to place the items correctly onto the stack view. The next part was creating the information bar below the cell. I added a row widget underneath the stack widget where I added two containers which were spaced using the between alignment form. This means the items on the row are spaced where it utilizes the outside screen real estate while spacing the middle.
Final Result
Some subtle differences between our TableViewCell widget and the source material are less apparent compared to the top view. Aside from the navigation icon being flipped, the calendar font is slightly bolder compared to the original material.
The Navigation Bar
The final major visual element on the home page showcases a bottom navigation bar which displays the current user location and the profile picture of the user. In the next tutorial, I will make the engagement of these elements: set location, and open profile settings.
The bottom bar is a series of containers built within a Row widget that is then attached to the main scaffoldwidget.
Final Result
The bottom navigation bar was straightforward, with essentially no changes being made in the implementation. I choose to use a filled-in pin drop icon as opposed to an outline for design purposes.
Putting It Together
The last thing to do in the visual design of this home screen would be to put it all together into the scaffold. The body of the screen is currently a Column which has the following elements in this order: PoolHeader(), Text Featured Events and TableView. The bottom of the scaffold has a parameter for where we will place the PoolBar() class.
As we can see the final result is not completely 100% accurate to the initial image, but for a quick demonstration of the power of flutter, it more than gets the job done. Adding animation and quickly creating a UI is arguably easier in Flutter than preexisting native solutions.
Conclusion
In the next article, I will be covering expanding the current UI to have a Profile View, a Search Results View, and an Event Detail View. We will also be tying the button interaction together with the current design elements.
Here is the source code for the first part of this tutorial:
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!)
