Building TikTok’s UI in Flutter — Part 2: Build the small parts.

In this tutorial we’ll do what you see below. From overall layout and structure to matching your designs “Perfectly”.

This tutorial is a continuation of part 1, where we broke the UI down into larger containers and finally into it’s own widgets. If you didn’t follow along with the previous tutorial go to this repo and clone it. Open the tik_tok_ui folder and drag phase2 into your IDE and you’re ready to go. When you run the project you should be seeing all the containers filled with colours in the position our final widgets will be.

So lets use all this setup and produce our desired result.

Video Description

We’ll start by replacing the containers in video_description.dart with Text widgets. We’ll make the last widget a row so that we can add a music note icon in front of the text. All three text entries have a different style so we’ll also add the TextStyles to each widget.

If you look at the UI at this point you’ll see that there’s no spacing between the lines of text and it’s also tight against the left side of the view. To fix this we wrap the column in a Container, give it a fixed height so we can tell the Column to space the children evenly. Additionally we add padding to the container to give it space on the left side.

No screenshot for this you should be seeing three lines of black text with an icon on the white background.

Actions Toolbar

This is definitely where the most of the work has to be done. We have to build three differently style ActionItems to use.

• FollowAction: Rounded Image icon with a border and a round plus sign.
• SocialAction: One of the three social actions you can perform on the video. An icon at the top with a text field below it.
• MusicAction. Also a rounded image (smaller than profile) with a gradient in the background border to make it look like a record.

Social Action

In the actions_toolbar.dart file create a function that returns a Widget called _getSocialAction. The function should take in a String title and IconData icon. This Container will have a topMargin of 15.0, width and height of 60.0 and have a Column as the child. The first child in the column will be the Icon with the data passed in and then the title text.

Remove the generate function from Column in the build method and add three SocialActions in there. Your build function should look like this.

The TikTokIcons are included in the repo, clone it, copy the assets folder from any phase along with the tik_tok_icons dart file and follow the instructions in that dart file to add them to your project if you’re in your own project.

Make sure you don’t miss the import line at the top. You should now be seeing something like this.

As you can see the share icon is a little larger than how it appears in the screenshot, and so is the Share text. We’ll add a boolean parameter called isShare to the getSocialAction function (default value false) and we’ll use that to make some custom adjustments. In your build function set isShare: true on the Share action. In the getSocialAction function we will return custom values for the following things by checking isShare.

Icon Size — size: isShare ? 25.0 : 35.0 , we want to set the size to 25 for the icon when it’s the share icon.

Text Top Padding — top: isShare ? 5.0 : 2.0, we want to return 5.0 padding between the text and the icon when it’s the share icon.

Title Font Size- fontSize: isShare? 10.0 : 12.0, we want to make the font size a bit smaller when it’s the share icon.

Those are the last changes to the SocialActions. See final code here.

Before we continue with the follow action lets get rid of the white background and make all the text white. Update the theme data in main.dart to apply white to the bodyColor and displayColor for the TextTheme, set backgroundColor on the home file’s scaffold and change the music note icon in the VideoDescription to white. And last but definitely not least. Remove color: Colors.red[300] from the actions_toolbar.dart

There we go, much better. Those theme updates makes us feel like we got a bit closer.

Follow Action

This piece of UI contains a round image with a “border” around it and a little plus button to indicate a follow action. The way we’ll build this is by breaking it into two parts, as shown below. The RoundImage with a “border” and the PlusIcon. I say “border” because we’ll use padding to achieve the look, not an actual border, which would be fine too.

We will create a function called _getFollowAction which will return a Widget. At the root we’ll have a Container with the same dimensions as our SocialAction, 60.0. The child of this Container will be a stack where we will add our ProfilePicure first and then our PlusIcon Over that.

Both of these elements will be inside Positioned widgets so we can control where they show up in the Stack widget. The Image will be in the middle horizontally. The plus Icon will be at the bottom of the container and in the middle horizontally. We’ll use the width of the action items and the child items to find the middle.The formula is simple

xMiddlePosition = (ParentWidth / 2) -(ChildWidth / 2);

But before we can do that easily, let’s move all our constant values into some constants so it’s easier to reference and adjust. Take all the constants values out and put them at the top of your actions_toolbar.dart file, like so:

Now lets add the missing functions and import our image library CachedNetworkImage

We use the formula described before to set the left value of the items to the centre. We use containers with in both cases to size our children, the sizes are indicated next to the constant names with values in case you missed it. Lets go over what we just did here.

getProfilePicture: This a Container that is positioned in the middle of a 60x60 container. It has a borderRadius of half the main container’s width (to make it round), a white background and padding of 1.0 pixel to produce the outside border. The child of this container is a CachedNetworkImage with an imageUrl pointing towards my personal gravatar. It has a placeholder and an error widget for loading and incase something goes wrong.

getPlusIcon: A Container positioned to be in the middle of the parent with a border radius of half it’s width (to make it round), a background color (pink/red) and an “add” icon as the child.

Would you look at that. Just a one more step to go and our Toolbar is complete.

Music Action

This action is very similar to the FollowAction but to avoid overly complicated functions I’m just going to make a new one called _getMusicPlayerAction(). This will be a function that returns a Widget with the root widget being a Container with the same ActionWidgetSize (60.0). This time our Container will have a gradient background instead of a solid one and a padding of 11.0. Those are the only differences from the Inner UI code in the _getProfilePicture method. But we won’t use that now to keep things simple and avoid refactors at this point.

Add the below function into your actions_toolbar.dart file and add it as the last child in your main build function Column.

Aaaaaand, there we go! Doesn’t this look nice! now it’s just the Yellow block at the top left and the purple navigation icons.

Lets start by removing the top yellow block and putting out two text widgets there. Following and For You. We’ll wrap our text fields in a Row, then use the alignment property in the Container to push it to the bottom and then add some padding inside to make it fit our needs. Change your topSection property in home.dart to look like this.

Onto the Bottom bar we go.

Bottom Toolbar

The first step is easy, just add the icons from the TikTok icon pack I added in a row and that’s done. Make your bottom_toolbar.dart file look like below.

All we did is replace the children: generate call with children: [] with 4 icons in it and voila! Look how nice that looks. Project manager and designer instantly happy. in under 20 minutes you can do all this in Flutter, amazing.

Next step is to produce our custom create button with the blue and red sides. We’ll do this in a property to keep our build method small. Lets see how we’ll break this down.

Whenever we overlay items on top of each other we need a stack. So we add a Stack as the root, a blue container on the left, a red container over that to the right and a our white container in the centre, they all have the same size, 38.0. We’ll make the parent container larger than 38.0 so you’ll see the edges of the left/right aligned boxes just a bit to give use the same effect.

Then the cherry on top is our Icon as the child of our centre (white) container. Add this property to your bottom_toolbar.dart file and use it in the build function in the middle of all 4 icons.

AND. WE. ARE. DONE. Isn’t that a cool looking UI. Man I love making apps and building UI’s in Flutter.

Please give me a clap or two. Follow me for future Tutorials, I have a few planned an please share this with a fellow coder or Flutter beginner. I would very much appreciate that.

Thank you for reading. I hope this helped. Any feedback would be appreciated.

If you need help building a UI or some expertise in Flutter on your team. Don’t hesitate to contact me. Email me at dane@filledstacks.com or contact me through my personal website.