Thinking Flutter
Thinking logic can often be tough and frustrating 😦.
It can be about anything: UI Design, Escaping FriendZone, Better UX, Proposing your crush, Better Code Architecture, Dumping your partner, or simple data retrieval from Firebase.
Humans can easily understand things that they can relate to. So, this article will be all about building elements of Flutter using the basic foundations. By the end of this article, you will gain the power of thinking the UI Logics -Thinking Flutter.
You will be able code your own perspective after comprehending this article, rather than copying the perspective of a YouTuber you have been following or other articles on Medium. Many of the beginners fall into this pit, and this article will give you a ladder out of it.
This article will have 3 sections:
- AppBar
- Cards
- Final Practice Project
AppBar
I know, you are thinking, “You are just teaching me the same shit all over again”, but now we will break this AppBar by its bones, and learn how to think of making our own AppBar.
If we look at the AppBar by breaking it like this, we can see 2 simple things that we need, take make up the AppBar. A blue coloured rectangular box, and some horizontally aligned widgets. And Hurray! You know the names of both the widgets that give you the power to do so. The Container and The Row.
Marked in Red is the first widget that you need for creating a rectangular box that’s blue in colour. Wanna guess? Yeah, you guessed it right. The Container widget, with its color paramter. You can give it a height so that it does not cover up the whole screen.
Marked in Purple is the second widget that you need as a child of the Container to align your contents of the AppBar horizontally. Yeah, that’s the Row widget.
Marked in Green are the contents of the AppBar. Usually, we use the title paramter in the AppBar for the text you see there. The title parameter takes in a Text widget. So, for the title of our own AppBar we use the Text widget as the first element of the Row’s children parameter, and an Icon as the second element.
Our code now looks something like this:
This preview still has some finishing touch missing: the elevation. The shadow that the original AppBar has. We will now add some shadow by wrapping the first Container widget of by a Material widget which has an elevation parameter. HACK 100!
Here you have your own AppBar code which took less than 7 minutes to code, and 2 minutes to understand. The main motive behind this was understanding how top level widgets like AppBar are made in Flutter, using the basic foundations so that if need comes, because it surely will, we can create our own AppBar in barely 5 minutes.
Playing Cards - The Flutter Way
In this section, you will learn how to create your own customised cards. If you have been playing around with Flutter for more than a couple of weeks or a month you might have gone through these kind of open sourced card designs:
If you are currently in the learning phase where you cannot think and build logic about these kind of UI(s), this section will primarily teach you not only how to make these, but also how to think the logics too!
Points to follow:
1. Break down the UI in terms of basic widgets(Container, Row, Column).
2. Figure out the minute details, if any.
3. Finalise what are the Widgets that you will require.
4. Keep improvising while you code (adding Padding and alignments).
We will now see how this looks simple Card Example.
Now, wonder if you wanted to break this Card Widget more, into basic elements, what elements will you use?
You have 2 options to break this UI down:
- Use a Container widget, wrapped with Material Widget and set some elevation.
- Use a Container widget, and give it a box shadow, so as to mimic the shadow effect produced by the elevation parameter. This trick often comes handy!
Now, it’s Time to figure out the minute detail! Want to take some time to think? You got it……Think! (You can scroll up and see the image, what you missed)
If at first you don’t succeed, stop trying already. You’re probably dumb. Let me help you. 😆
JUST KIDDING. You are doing great, brainstorming your way into the core widgets of Flutter. So, now about the minute detail that we missed before was the rounded corners of the card!
If you are like, “Ah! it was a piece of cake!”, we will now move on to the second phase of this section and practice breaking down a bit complex UI, the Planet Card into it’s elements.
Without spending much time on this exercise, I will just quickly explain, the messy image you see up there.
White Border: Its the base of the design, the container with its height, width, color and borders made circular(the minute detail you left out last time).
Orange Border: You see in the design that the elements are aligned both horizontally and vertically. The Pink borders are the Row, and you will notice that we have multiple Rows and they are aligned vertically. So, from here you get a hint that the child of the Container will be a Column and not a Row.
Pink and Green Borders: These are the children of the Column, all vertically aligned, and the green bordered elements are the children of either the Column or the Row.
You can now try and understand the above widget tree by comparing to the division of elements in the Planet UI Card. It will enhance your knowledge of how widget trees are made and painted on the screen by the Skia Engine.
With this, we come to the end of the second section of this blog, enriching you with the idea and logic of how you can break down widgets into basic founding elements of Flutter, and customise it for your own use.
Practice Project - Applied Learning
In this section, you will be provided with a design and you need to break it into its elements and make the custom AppBar and the custom Card, which looks identical to the design.
You can see the usefulness of knowing how to code your own AppBar here because there is no way you can make this AppBar by using the inbuilt AppBar widget of Flutter.
Now, what should be the approach to make these kinds of designs?
Remember the 4 steps we discussed earlier in the article?
- Breaking Up - We can see there are 2 major Containers in this design and everything else is wrapped up inside them. These 2 Containers are vertically aligned which hints us the usage of Column, that these 2 containers will be wrapped in.
Quickly describing what we have here on the picture above:
Orange Border wrapping up all the elements that are aligned vertically signifies Column. The Green Borders signify the elements of the Column, but apart from the first green bordered element, the bottom 2 are Rows, because they have elements inside them horizontally aligned. The final Row has 3 blue-bordered elements representing Columns, because of the vertical alignment of the elements inside them.
I guess you have learned enough to guess these on your own now, nevertheless, I gave you a sample for the AppBar and now you can think of something similar for the Container in the Center of the screen.
2. Minute Details - Unlike every AppBar with sharp edges, this has a curved one with shadow effects at the bottom, spread a tad farther than the inbuilt AppBar of Flutter. Also, the curve is only at the bottom of the AppBar and not at the top . You can easily achieve the shadow effects with the code we have above while we replicated the Card using Containers. Containers have decoration parameter which can be used for this.
3. Finalizing Widgets - Container, Column, Row, Image.asset are the only widgets that we will be using for creating this UI.
4. Brushing Up - We can use SafeArea, Padding, Align, Center, Positioned, FractionalTranslation, SizedBox for aligning and positioning these widgets according to the UI.
Let’s dive into some code now, we have read and seen enough visualization. Now, its time to make it happen!
With the above code you will have the outer structure of our AppBar, with curved edges and proper shadows. Notice, we have not added anything in the child parameter of the Container yet. It will be used to add in the UI elements as we broke them previously.
Now, its time to bring the child to life, and lucky for you this won’t take 9 months. Oh, of course its not cup noodles either, so it will probably take around 5–10 minutes to code it all in real but you will have your very own Custom AppBar, after your 10 wired in minutes.
We have made our child successfully till here, but we still have some code to write. We need to complete the last Row, which has 3 individual Column.
With this, we come to the end of our article, where we discussed all the important points to consider while thinking UI Logics in Flutter. You can find the complete source code for the final project here, which includes the card in the center of the screen.
If this article helped you a lot in enhancing your ability think UI in Flutter, keep the clap icon pressed and please let me know by leaving me comments on LinkedIn or Facebook and I will write a similar article for Flutter Backend as well.
