Flutter Clubhouse Clone UI Tutorial | Apps From Scratch

[Music] welcome back to apps from scratch today i'm going to teach you how to build the user interface of clubhouse the casual drop in audio conversation app we'll create the home screen where you can see the upcoming and live rooms then we'll move on to the room screen where you can see who's in the room throughout the video i'll hit up on some easy ui tricks to help you develop a clean and beautiful user experience [Music] make sure to smash the like button and subscribe as it really helps out the channel if you want to learn how to build real world apps with flutter check out my courses at launchclub.io and with that let's get into it i've linked the starter project below containing all the mock data you need to follow along make sure that you're on the starter branch and download the zip file once you open up the starter project you'll see we have three files we have main.dart palette.dart and data.dart back in main.dart you can see i cleared out the default counter example i gave the material app a title i hid the debug banner and then i also set some theme data for the app bar i set the app bar theme to have a background color of palette background and this is defined inside of palette.dart where we have a background secondary background and green if we take a look at the ui we can see that the background color is going to be this nice background color here the secondary background color is the darker color here and then the green color defined in our palette is this green color right here so after setting our app bar theme to our palette background we also set our scaffold background color to the same color and so that way the app bar and the scaffold background blend together the primary color is set to white accent color again is set to green the icon themes are set to black and then we also have font family and i'm using the google fonts package for this and inside pubspec i've added the google fonts dependency and i've also updated our environment to 2.12 which supports no safety we also have cupertino icons because throughout the app we're going to be using cupertino icons for icons like the search the mail calendar notifications and also the muted mic google fonts gives us access to all the different google fonts and so we're going to be using montserrat for this and so all we have to do is set the font family to the string version of montserrat and then we'll also use the default montserrat text theme by just doing google fonts.monster.txtheme and the last file i have is data.dart data.dart contains all the mock data we're going to use in our app so up here i've defined a user class and each user has a given name family name and an image url i've defined the current user and we use this current user's image url to display the image in the app bar next i've defined a private list of users and these are just a bunch of different users with images from unsplash down here i've defined a room model and these rooms are used throughout the app so for example each one of these blocks inside the upcoming rooms is a room so we see i've defined online 108 flutter and this is the room right here we also have new user onboarding and clubhouse turns one and then the last batch of data i've defined is a list of rooms called rooms list and these are the three rooms that appear on our home screen so we see the social society club good time and then nyu girls roasting tech guys is visible when we scroll down when we go into one of these rooms we can see we have the information about the room and then we have the speakers on top then we have followed by speakers and then below this we have others in room and these are just generated by shuffling the all users list and in the speaker's case we also use get range so we limit the amount of speakers to 4 per room since we're using our private all users list in others followed by speakers and speakers just be aware that there is going to be some duplicate data so people here are also going to show up in each category okay the first thing we're going to do is work on our home screens app bar so let's go into main.dart and we're going to replace our scaffold widget here with home screen and we're going to find a home screen widget inside of a new folder called screens [Music] with a file called homescreen.dart home screen is a stateless widget home screen and then we can import material back in main.dart let's import our home screen file and save that we can replace the container here with a scaffold widget and then we can add our app bar we can get rid of the drop shadow by setting the elevation to zero [Music] and now we need to add our icons our leading widget is going to be an icon button with a search icon and then our action widgets will be three icon buttons and then a custom profile image that we're going to make let's set leading to an icon button icon will be const icon cupertino icons dot search and we need to import the cupertino package we'll set these size to 28.0 and then we also need the onpressed [Music] now for our action buttons we can have an actions list here i'm going to copy the icon button here [Music] and paste it three times [Music] the first one will be an envelope open [Music] then a calendar and then a bell i'm also going to change the envelope open icon to size 26 just to make it a bit smaller [Music] and then we need to add our user profile image so let's make a folder called widgets [Music] and we're going to have user profile image dot dart and we're also going to make something called a barrel file and this is going to allow us to export all of our files inside of widgets by typing export user profile image and then whenever we want to use a widget in this folder we can just import our widgets.dart as we go throughout this tutorial we're going to be creating multiple widgets inside of this widgets folder and we're also going to be using them inside of our home screen at our room screen to avoid having a bunch of import statements to each individual widget we can just import the widgets.art file that way by importing widgets.dart we get access to all the exported widgets inside of here this is really handy for not having a bunch of import statements at the top of our file and before we put the user profile image inside of our actions i'm actually going to put it into our body first so a body will have a center widget child user profile image and the image url we're going to pass in is called current user and we need to import our data.dart file to access our current user dot image url and now let's write our user profile image inside user profile image we have stateless user profile image import material this takes in a string image url and a final double size [Music] we can generate our constructor by hitting command period on mac or control period on windows selecting generate constructor and the reason i have generate constructor is because i'm using an extension called dart data class which you can grab as an extension on vs code we want the image url to be required but for the size we're going to set it to optional and by default it's going to be 48 pixels to create the user profile image we're going to be using a clipar rect widget and supplying a border radius to it now you can see that this is not a perfect circle and so we're going to be doing a little bit of math to get this nice shape clip our erect border radius set to border radius.circular and i'm going to do size divided by 2 minus size divided by 18. and you can definitely play around with this more but this is just what i found to work the best the child will be in image.network imagerl height set to size width set to size and fit will be boxfit dot cover back in home screen let's save and we can see we have our user profile image in the middle of our simulator if we supply a width so let's say size 60 we can see it maintain the semicircular shape so let's take this widget and put it into our actions so after the bell icon we'll paste this in right here and save we can see we run to an issue where the user profile is stretching to the entire height of the app bar and so to prevent this i added a padding widget [Music] and then used from left top right bottom setting this to 8.0 10.0 20.0 and 10.0 and then set the size to 36.0 let me know in the comments if you have a better way to constrain the height of this user profile image and finally we just need to wrap this in adjuster detector because if the user taps on their profile image we would then want to navigate to their profile screen and now we're all done with our app bar now let's work on our upcoming rooms this is going to be a container widget inside of a list view let's go down to our body and change this to a list view with children and then we'll have upcoming rooms where we pass in a list of upcoming rooms and we get this from our upcoming rooms list inside of data.dart in widgets we'll make the new file upcoming rooms dot dart it's a stateless widget and we need to import material.dart go to widgets.dart and we can export this now our upcoming rooms takes in a list of rooms upcoming rooms import data.dart and then we can generate our constructor we're first going to set the container to have a color of palette dot secondary background and that's the darker background color to see this let's just set the height to 100.0 for now and it appeared and you can see on the sides we need to add some padding instead of adding the padding on this container we're going to be adding it on our list view because if we look at the ui again we can see all of the widgets here are 20 pixels away from the sides of the screen so we can add padding to our list view and home screen const edge insets dot from left top right bottom 20.0 from left 20.0 from the top 20.0 from the right and then 120.0 from the bottom now you might be wondering why we have the 120.0 from the bottom and that's because we're going to have a starter room button that's floating and we don't want the starter room button to block our room cards so by having 120.0 padding from the bottom we ensure that our starter room button is not going to block any ui let's add some border radius decoration box decoration and remember when we have a decoration we need to put our color inside of the box decoration otherwise we're going to get an error the border radius will be border radius.circular 20.0 let's fix that typo [Music] the child is going to now be a column widget and this column widget is going to contain the list of upcoming rooms so we can actually take our upcoming rooms and then map this list into individual widgets so the e here is a room let's create a row widget and the first child is going to be a text widget with the time and remember to add dot to list after map so we can convert the iterable widgets into a list of widgets and now our times appear to show the club name and the room name on the right-hand side we're going to be using column widgets for each of these so we have row text and then we have our column with children the first child being a text widget with e.club and then we're going to add a house emoji and on mac you can open up the emoji keyboard by using control command spacebar and then you can either search for home but i have it right here and that adds the emoji i'm not sure what the command is on windows but it's probably something similar and then we want this to be uppercased underneath this we want the name of the room and now we have flutter fluttering gauge recap and then new user onboarding welcome to clubhouse and then this last room here clubhouse turns one doesn't actually have a club and so we only want to show the club name if e.club is not an empty string so add a collection if if e.club dot is not empty then we want to show this line and that removes this line from the last room now we need to fix up our ui by adding some padding because right now we're getting an overflow error so we're going to wrap our column widget in a padding widget and this will be const edge insets dot only left 32.0 top 4.0 and bottom 4.0 and don't forget to remove the height right here because the height of the container is actually being restricted to 100.0 we want this container to be dynamic and expand to the height of our content so remove that and that fixed the overflow error we'll add padding to the row widget [Music] and then to align each time and the club name to the top of the row widget we can set the cross axis alignment to cross axis alignment dot start the reason the rooms with a club name are not perfectly aligned is because we have the house emoji and so if we remove the house emoji hit save we can see it's actually perfectly aligned the emoji adds some padding to the actual text widget so to counteract this we can wrap our time text widget in some padding and only give it edge insets dot only top if e dot club is not empty so if there is a club name then we know the text time is not going to be aligned with our club title and so we have to provide it with a padding of 2.0 from the top if there's no club name then we can just provide it with zero because we know it's going to be aligned perfectly as we see with clubhouse turns one and once we save that we can see it's still a bit off center and the reason for that is because we didn't actually style our text yet so for our club name we can set the style to theme dot of context dot text theme dot overline dot copy with and we'll set the font weight to font weight 600 and the letter spacing will be 1.0 if you've never used textings before i'll leave a link in the description below on the material text themes it has really helpful documentation on all the different types of headlines over lines and subtitles and body texts explaining what the default text styles for each of these are so to recap we're using overline and then we're setting the font weight to w600 with letter spacing 1.0 and now if you look at the simulator we can see that it's pretty well aligned let's add some padding between our time and our column widget with const size box with 12.0 and then to align the flutter and news round boarding all the way to the left we can set cross axis alignment to cross axis alignment dot start one thing we haven't taken into account is how to deal with a club name or a room name that is just too long so if we copy this and paste it a couple more times and hit save we can see we get an overflow error to fix this we need to wrap our text widget in a flexible widget and then we need to add overflow setting text overflow to ellipsis and when we save that we actually get an error inside of our debug console saying that we need to add an expanded widget to our column so once we add that by wrapping our column widget and expand it then adding main axes size to a column to limit the height of our column to min we see that the error is no longer there and our text is overflowing properly let's do the same thing for our name by wrapping it in a flexible widget with overflow text overflow dot ellipsis [Music] and now if we add the name a few more times we should see it all overflows too and it's working perfectly i'm going to delete the extra names here and the extra clubs [Music] and now we're all done with our upcoming rooms let's work on the room card here we're going to be having a card widget with a column widget inside the column widget will have text another text and then a row widget where the left side of the row will have two user profile images and then the right side is going to have four speakers with emojis and a summary of how many people there are in the room and how many people are speaking let's go into our file tree and make a new file in widgets called room card.dart [Music] stateless widget room card import material we'll change this to a card and now inside of widgets we need to remember to export this in home screen.dart we're going to add a size box first to add some padding between the upcoming rooms and the first room card [Music] and then we need to access our rooms list we want to map this to a room card and pass in the room [Music] let's go back to room card and this will take in final room room import data generate the constructor if we look at home screen again we can see we get the error saying that the element type iterable room card can't be assigned to the list widget and that's because this is a list of room cards right now and we can't put a nested list inside of our children here to fix this all we need to do is use the spread operator and that's just a triple period and what that does is it adds the list of room cards and tacks it onto our upcoming rooms and content size box and so now this is all treated as one list the first thing we're going to do here is add some padding inside of our card so i have child padding and we're going to set the padding to const edge insets.all 20.0 the child of our padding will be a column widget and for now let's just add the text for the club widget and since we already wrote this before we can go back to our upcoming rooms copy the text widget right here for the e dot club and then paste it here instead of e it's going to be room.club and we're going to set the font size to 12.0 and the font weight will set to w500 let's also add some vertical padding between the cards by wrapping the card widget and padding edge insets dot symmetric vertical 4.0 and that adds a little bit more space we want the text widget to be left aligned so the cross axis alignment of our column will be cross axis alignment dot start we can increase the border radius of our card by setting the shape to rounded rectangle border border radius border radius.circular 20.0 [Music] we can add the room name underneath the room club text room.name style will be theme.of context dot text theme dot body text one dot copy with and we'll set the font size to 15.0 and the font weight will be font weight dot bold now remember because we're using null safety we need to force unwrap the body text 1 by adding an exclamation point and that just means body text 1 is not going to be null if it were null then we would end up getting an error now let's add the row widget here for our profile images and the list of names row children and to add the profile images we're going to be using a stack widget and this is because if we look closer at the profile images we can see they're actually stacked on top of each other we have the first speaker on top of the second speaker so we'll create user profile image image url will be room dot speakers sub subzero dot image url and we'll set the size to 48.0 to put the second speaker underneath the first speaker we'll use a position widget with the left set to 28.0 and the top set to 20.0 child is user profile image imageurl room.speakers sub1 dot image url and the size will also be 48.0 now we see that the user profile image for speaker 2 is being cut off right now so let's wrap our stack inside of a container widget and set the height to 100.0 we'll add padding above our row widget with const size box height 12.0 then we need to wrap our container inside of an expanded widget and to see how much space this takes up we'll set the container's color to colors.red for now and so we see it's taking up all the space inside of our row widget to add the speakers here we're going to be using another expanded widget and setting the flex to 2 so that way it takes up 2 3 of this row we have expanded with the flex set to 2 the child will be a container widget for now with colors colors.green [Music] and the height will be 100.0 and now we can clearly see how much space each container takes up since we don't actually need the container for this expanded widget i'll remove it and replace it with a column where the children is first going to be the room of speakers so room dot speakers and we'll map this to a text widget with the first and last name so e dot given name e dot family name and then we'll put a little speech bubble after so to get the emoji keyboard on mac that's control command spacebar and then i'm going to use the chat bubble i'll set the style to theme.ofcontext dot text theme dot body text 1 and copy with the font size 16.0 and that looks much better let's set the column's cross axis alignment to cross axis alignment dot start and then we can remove the color from our container [Music] we're also going to set our rows cross axis alignment to cross axis alignment dot start [Music] for the room stats underneath we're going to be using a text widget and that's going to allow us to use a text band to add the icons into our text so down here at the bottom of our column we're going to add text dot rich text span where the children is going to first be the text span text and this is going to be the addition of our roon speakers the users who are followed by the speakers and also the other users in the room so room.speakers.length plus room dot followed by speakers.length plus room dot others dot length and we're going to add a space after that [Music] then we can have a widget span with child icon cupertino icons dot person underscore fill with the size set to 18.0 and the color will be colors.gray [Music] then we have another text span this time the text is going to be space slash space room dot speakers length [Music] with another space at the end and then we have another widget span child icon cupertino icons dot chat bubble fill size will also be 18 and the color will also be gray [Music] and that looks pretty good the last thing we have to do is set a style for our text.rich widget and so we can go down here add style text style color colors.gray 600 and save that let's wrap our text.rich widget in padding and set it to only top 4.0 and now we're all done with our room card widget the last thing we have to do for our home screen is add in the floating starter room button and the menu button right here to do this we'll be using a stack widget and the stack widget will be overlaying our body of our scaffold where we position the starter room button and the menu icon a certain amount of pixels from the bottom of the screen we're also going to have a slight gradient container and so that creates a nice effect when the user scrolls let's go into our home screen and wrap our list view inside of a column widget and then change the column to a stack we'll set the alignment to alignment.center and the first thing we're going to do is take care of the container so we're going to have a container with height 100 decoration box decoration the gradient will be linear gradient that begins at alignment.top center it ends at alignment bottom center the color will be theme.of context dot scaffold background color with opacity 1.0 and then the first one will be 0.1 [Music] now because scaffold background color has opacity 1.0 by default we can actually just remove this and so we just created a gradient container where the colors start at a scaffold background color with 0.1 opacity and slowly blends into a scaffold back in color with 100 opacity the container is currently in the middle of our screen and so we want to wrap it in a position widget set it to bottom zero left will be zero and right will be zero [Music] now you can see when i scroll up here it looks like the card is fading into the bottom when i keep scrolling it looks like it would be an infinite list which is a very nice effect now let's focus on the starter room button this is going to be a container widget and then we're going to be using a text.rich widget again so we have a widget span and then the actual text span here let's go underneath this and we're first going to position bottom 60.0 child is a container widget with padding const edge insets dot all 12.0 the decoration is a box decoration with color theme dot of context dot accent color and that's the green color with a border radius border radius.circular 24.0 child is const text.rich where we have a tech span that has children the first item in the text span is going to be the widget span widget span child icon cupertino icons dot add size will be 21.0 and the color is going to be white for the starter room that's going to be a text span with text set to start a room and the style will be text style color colors dot white font size 20.0 font weight font weight 500. and that looks good finally we just need to add an icon button here and this icon button has a green dot so this is actually going to be a stack widget where we position a green circle to the bottom right of the icon let's go down here we have our third position widget which has a stack bottom 60.0 right write 40.0 we'll do alignment center for the stack and the children first we have the icon button icon const icon cupertino icons dot circle grid three by three fill [Music] and don't forget to add unpressed we'll set the size to 28.0 to add the green dot we have a position widget with right 4.6 and bottom 11.8 and i've played around with both those numbers a lot and i found that that worked best for a container with height 16.0 and with 16.0 the box decoration will have shape box shape dot circle and the color is theme dot of context dot accent color [Music] and now we have our icon button we're all done with our home screen we've created the app bar on top the upcoming rooms widget and then we created the room cards we can see as we scroll up and down we have the nice gradient effect from the stack and the gradient container and we have the starter room button and the menu icon button next up when a user taps on one of these room cards we want to navigate them to a new screen using a full screen dialog so that means the screen will animate up from the bottom to the top we'll have a new app bar where we can dismiss the screen by tapping on all rooms or tapping leave quietly in the bottom sheet down here and then we'll display our room information below that we'll have these speakers and then different sections so the followed by speakers section and then the others in the room section we're going to create the room screen first so we can add in the navigation inside of the screens folder we have room screen dot dart status widget room screen takes in final room room let's import data.dart and generate the constructor this will be a scaffold widget now inside the room card we want to wrap our padding widget in a gesture detector with ontap navigator.ofcontext.push material page route and we want the full screen dialog to be set to true and the builder gives us back context but we don't need it so we can put an underscore here room screen room room [Music] and import room screen [Music] now when i click on any of the cards we can see the room screen appears let's add an app bar and now i can dismiss it by tapping the x the leading widget in our app bar is a text button with an icon then we have an icon button with a document icon and then we have our normal user profile image app bar's elevation will be zero then we'll set the leading widget to text button dot icon on press leave empty the icon const icon cupertino icons dot chevron down [Music] the label is const text all rooms now the first thing to note here is that we're getting an overflow error and to fix this we just need to add a leading width to our app bar and we can set this to 120.0 and that fixes the overflow the style of our icon button will be text button dot style from and we want the color to be black so primary set to colors.black [Music] when the user taps on all rooms we want the room screen to be dismissed so dot navigator.ofcontext.pop and so if i tap it we can see it disappeared and it's working perfectly next we'll deal with the actions we have our icon button icon button icon const icon [Music] cupertinoicons.doc set the size to 28.0 with onpress set to and empty [Music] and then for our user profile image we can go back to our home screen scroll up to our app bar and then just grab the user profile image here [Music] and paste that in import widgets.dart and our app bar looks good from here we can work on adding this container so the white background right here with border radius and then adding the room information on top the body of our scaffold will be a container widget with padding const edge insets dot all 20.0 the height is media query dot of context dot size dot height and the width will be double dot infinity we'll set the color in the box decoration so color will be colors.white border radius is border radius dot circular 40.0 [Music] and then the child will be a custom scroll view because each one of the speakers followed by speakers and others in room section will be a silver grid so we have slivers and then we want to create a column with children with a row first text we'll put club for now and then we'll have an icon cupertinoicons.ellipsis [Music] and once we save that we get an error because column is not of type sliver so to convert a column to sliver we can wrap it in a widget called sliver to box adapter [Music] and that's going to fix our issue the row widget has main axis alignment space between which will push the more icon all the way to the end the cross axis alignment will be cross ax alignment dot start and then our column also has cross x alignment which will be cross axis alignment.start and that's so when we add the other text widget underneath the club here the room name will be left justified to get the club name let's go into our room card scroll down to the text widget here and just you only call the code and i notice that we have overflow text or ellipsis here we can remove this from the room card because on the room card we actually want the entire name of the club to show back in room screen we can just paste this in and we'll set the font size to 14 [Music] and now that's good we can also wrap our icon in a gesture detector the reason i didn't use an icon button here is because if i used an icon button that actually adds some padding to it so it wouldn't be aligned perfectly to the right or top of the screen so to get around that i just made an icon with a gesture detector [Music] now we can put the room name underneath so after the row we'll have text room dot name style is theme dot of context dot text theme body text 1 dot copy with the font size is 16.0 and the font weight is font weight dot bold with letter spacing 1.0 and that matches up we can go into the first room here and we can also go into the second room and that all looks really good now we can work on the user profile images for the room each user profile image is going to be the same profile image we use here in the app bar but on top of that we're going to have a stack so we can display the new user icon and the muted icon underneath the user profile we'll also have a text widget displaying the user's first name and one more thing is that this is a silver grid with a cross axis of three so we show three users horizontally in the grid underneath our silver to box adapter let's add our sliver grid dot count cross axis count is three we'll set the main axis spacing to 20.0 and then the children is room.speakers mapped to a list of room user profile widgets [Music] to list [Music] and let's also preemptively wrap our silver grid in sliver padding so that way the profile images don't stick to the left and right of the screen so const edge insets dot all 20.0 and change child to sliver here we're getting an error because room user profile has not been defined yet so now in widgets we need to make room user profile dot dart stateless widget room user profile import material and this takes in a bunch of variables so we have final string image url final string name final double size final bool is new and final bool is muted generate the constructor and of course not all of these are going to be required looking at this we need the image url we need the name but the size we can set to a default value so 48.0 is new will also be defaulted to false and his muted will also be false by default [Music] let's save this and go down to our widgets folder and export it room user profile and now back in the home screen we can pass in some values so image url will be e dot image url and if we hover over e we can see that it's of type user because we're mapping over a list of users the size will set to 66.0 name will be e dot given name is new will be a random boolean value so either true or false so random dot next to pool [Music] and we need to import dart math to use that and then is muted will be random.net spool so either true or false so we can save that go back to room user profile and let's actually start building this out as we saw before this is going to be a column widget because we are first going to have a stack and then we're going to have a text widget where the text is going to be the first name so this will just be name we need to display the user profile image so we can put user profile image inside the stack image url is image url and size will be the size we pass in to add some padding around the user profile image we can wrap it with a container widget and then add padding constant edge insets.all 6.0 now we pass in is new and is muted so for the stack we first need to check if is new then we want to display the party icon in the bottom left so positioned left zero bottom zero child container padding const engine sets dot all 4.0 decoration box decoration color will be colors.white with a shape box shape dot circle and the box shadow will be box shadow color colors.black 26 [Music] the offset is offset 0 2 and the blur radius is 6.0 this box decoration can be constant and save that and right now we actually see the white circle next to the portraits it's a little hard to see but that'll be fixed once we add a child with const text and then the party emoji so open up the emoji keyboard with control command space bar on mac and we can save that to increase the size of it we'll set the style textile to font size 20.0 [Music] and then we can add the alignment alignment.center and that looks good just be aware that if you don't see the party emoji right now it could be that all of the users have his new to set to false so to make sure it works you can just go back to room screen and instead of doing random bull you can just let it to true for now and we'll actually do this for both [Music] now for is muted it's going to be the same exact thing so let's copy if is new paste it below this time instead of positioned left zero it'll be positioned right zero and the text widget will not be a text widget it will actually be a icon cupertino icons dot mic underscore slash underscore fill and import cupertino and that's good let's go back to room screen and we can change this back to a random next pool [Music] and so whenever we save we can see the values for is new and is muted change [Music] one thing i forgot to check is what happens if the name is too long so to test this out let's add some pluses here and as expected we get an overflow error we need to wrap our text widget in flexible and then set the overflow to text overflow dot ellipsis and now it's good we can remove the extra plus names and while we're here we can add a size box with a height of 4.0 we're almost done with this screen we just need to add the followed by speakers text and then another sliver grid to show the users who are followed by the speakers and then same with the others in room after that we can add our bottom sheet and then we're all done with our ui so let's go to the followed by speakers and here we're going to have inside of our room screen we're going to make a text widget with followed by speakers and the style will be theme.of context dot text theme dot subtitle 2 dot copy with color colors.gray 400 and the font weight will be font weight dot bold to fix the error we need to wrap our text widget in sliver 2 box adapter [Music] and then we can add padding to our text widget with padding const edge insets dot only left 20.0 [Music] for this next squirt of users it's going to have a cross axis of four we can copy our sliver grid here paste it below change this from room.speakers to dot followed by speakers set the cross axis count to four and hit save to fix the bottom overflow error we can change the child aspect ratio to 0.8 and now it gives it more room for these users in this section we're not going to have an is muted icon because they're not speaking in the room so we can just remove this and it looks like the is muted is still showing up so inside room user profile forgot to change is new for the second collection if two is muted [Music] and that fixes it now the followed by speakers section and the others in room section are very similar so you could extract the silver to box adapter and the silver padding silver grid widget out into its own widget but to save time i'm just going to copy this and paste it again then change followed by speakers to others in room change the room.followed by speakers to room.others and once i save that we can see the others in room now appear if i switch to a different room [Music] we see we have these speakers on top followed by speakers and then others in room the final piece to our clubhouse ui is this bottom sheet widget which has a button that allows the user to leave quietly and that just dismisses the room screen and then an add button and a raise hand button let's go to the bottom of our room screen add in the bottom sheet and this bottom sheet is going to have a container with padding const edge insets dot symmetric horizontal 20.0 and vertical 12.0 the height will set to 110.0 with the child roll widget we need to add some padding to the bottom of our list view so the others in the room doesn't get covered by the bottom sheet so right underneath our last lever padding we can add in const sliver padding padding edge insets dot only bottom 100.0 [Music] and that fixes it the first child in a row widget is going to be a container with padding const edge insets dot symmetric vertical 6.0 horizontal 16.0 and this is going to add padding to the sides of the button decoration will be box decoration color colors.gray300 with border radius border radius.circular 24.0 and the child is a text widget well actually a const text dot rich widget because we need to show a peace sign emoji and the leave quietly text so we have text pan children text band text and this will be the peace sign and so you can find it by just typing in peace and to change the color of it on mac you can long press it and select the color you want style text style font size 20.0 for the leave quietly text let's copy this and then we'll change this to leave quietly textile will be font size 16.0 color colors.red font weight font weight w600 and letter spacing set to 1.0 we need to align the button to the top of the container set the row widget's cross axis alignment to cross axis alignment dot start and since we're going to be adding two buttons and we want those buttons to be all the way on the right side we can set main x alignment two main axe alignment dot space between and don't forget to wrap the container in a gesture detector [Music] with on top navigator.ofcontext.pop and so when a user taps leave quietly it dismisses the view let's add in the final two icons under our adjuster detector we have another row widget children and here we have gesture detectors for each of these on tap child is going to be a container with decoration box decoration the shape will be box shape dot circle and the color will be colors.gray 300. the child is const icon cupertino icons dot add with the size of 30.0 and then we can increase the padding by setting it to dot all 6.0 let's duplicate the gesture detector and the container but change the cupertino icon to hand underscore raised and then for spacing const size box with 16.0 and now we have our two buttons and that's a wrap on our clubhouse ui so to recap let's not restart the app we first created the app bar on top with the different icon buttons and the user profile image then we created the upcoming rooms which is a container widget with a slightly different background color we show the club name and the name of the room and if there's no club name we just show the name of the room then we created the room cards and at the bottom of our screen we have the nice gradient so whenever you scroll it looks like each card is rising out of the bottom of the screen we have the starter room button and the menu icon button when you tap into any one of the rooms it's displayed as a full screen dialog and we have the speakers on top then the followed by speakers section and then the others in room you can tap all rooms to dismiss the screen or you can tap the leave quietly button some users have party pooper emojis so you can tell if they're new members and these speakers can also have a muted icon so you know that they're muted and that's all for this video if you enjoyed the video remember to leave a like and subscribe and if you're interested in building real world applications such as instagram you can check out my full flutter firebase courses on launchclub.io thanks for watching and i'll see you in the next one [Music]

Channel: Marcus Ng

Views: 29,905

Keywords: flutter clubhouse ui tutorial, flutter clubhouse ui, flutter clubhouse tutorial, flutter clubhouse design, build clubhouse with flutter, flutter clubhouse audio, flutter tutorial for beginners 2021, flutter tutorial 2020, learn flutter ui, flutter ui project, flutter ui tutorial for beginners, flutter layout basics, flutter widgets tutorial, flutter design ui, flutter ui design tutorial for beginners, flutter ui app, flutter tutorial ui, flutter real app, flutter clubhouse

Id: x606y4QWrxo

Length: 60min 9sec (3609 seconds)

Published: Sat Mar 20 2021