Flutter Facebook Clone Responsive UI Tutorial | Web and Mobile

[Music] hey everyone i'm marcus eng and today i'm going to teach you how to build facebook's user interface for mobile and web using flutter you'll learn how to create reusable and responsive widgets that change their appearance and size based on the current screen size i'm really excited to show you how to build this project before we get started i'd appreciate it if you check out my flutter courses on my website marcus dashing.com in addition to teaching you how to build user interfaces interact with local device storage and apis i also teach you how to implement a backend using firebase by building multiple apps from a notes app to instagram to real-time chat so you can learn how to develop a full stack mobile app also only a small percentage of people who watch my videos are actually subscribed so if you like my content remember to subscribe and hit that notification bell it really helps out the channel and with that i hope you enjoy the video if you want to follow along go to the github repo linked in the description to download or clone the starter project switch to the starter project branch [Music] click on this drop-down and download the zip file this project contains the mocked up data you need in order to follow this tutorial don't forget to store the repo while you're there once you download the starter project open up your terminal at the time of this recording flutter web is supported on the beta channel to see which channel you're on type in flutter channel right now i'm on the beta channel if you need to switch to the beta channel you can type in flutter channel beta and then type in flutter upgrade let's walk through the starter project files inside pubspec.yaml we can see that i added two packages the first is cache network image which allows us to load images and cache them locally on the device and the second is material design icons flutter which gives us access to more material design icons next let's take a look at our palette palette.dart consists of a bunch of colors and gradients that we're going to be using throughout our app we can access these colors and gradients by just typing palette dot and then the name of the variable next let's take a look at our models models.dart is a barrel file where we export all of our different models within our app this means whenever we need to import one of our models we can just import the models.dart file and we'll have access to all the different models in our app let's look at user model.dart user has a string name and a string image url and this image url is the profile image of our user storymodel has a user a string image url and an is viewed boolean which will allow us to show if the story is viewed or not and our last model is our post model which consists of a user a caption time ago image url and then likes comments and shares are all integers and now let's take a look at data.dart and this file contains all the mocked up data we're going to be using in our app first we have the current user if we take a look at the ui the current user is used in the pre-post container where we show the profile image and it's also used to show the current logged in user here our next piece of data is online users which we show as the list of users here in our app if we scroll down we can see that we have stories and looking back at the image we see that we have a list of stories here where the blue border means that the story is not viewed and no border means that the story has been viewed and our last batch of data is a list of posts and these posts are the posts we display in our users feed one thing to note about our data is that some of it is duplicated so if we look at the top here we see that we have the users david brooks jane doe and if we scroll down a bit we can see we have david brooks and jane doe again and so if you see any duplicated data while creating the app don't worry about it it's just the data that i use to populate the app okay let's go into main.dart and we'll start cleaning this file up [Music] let's remove all the comments and we can get rid of the my homepage widget we're going to rename our app to flutter facebook ui and then we'll get rid of the debug banner by setting debug show check mode banner to false [Music] our scaffold color we can set it in the theme data scaffold background color and then we can import our palette dot scaffold and instead of returning the my home page widget we can instead return home screen which is a widget we're about to write let's hit save and we're not going to see any updates yet in our simulator because we still have an error so we're going to make a new folder inside our lib directory called screens and the file we want to make is home screen.dart [Music] which will be a status widget and we can get that by typing in stl and i'm using the awesome flutter snippets plugin for vs code where i can just type a few characters and get the snippet let's hit enter and or write home screen and remember to import material.dart instead of returning the container we will return a scaffold widget [Music] and back in main.dart instead of just importing the home screen directly let's make a barrel file inside screens called screens dot dart and here we can export our home screen.dart hit save go back to main.dar and then we can import screens.dart and now we can see screens.dart is now imported and we're now rendering our home screen the first widget we're going to build is the sliver app bar we know facebook uses a silver app bar in their mobile ui because when you scroll down the app bar disappears and when you scroll up the app bar reappears let's go into homescreen.dart and we can start by defining a body which will be a custom scroll view and custom scroll views take in slivers i'll explain more about slivers as we build out the rest of this ui so let's make our silver app bar [Music] which will have a brightness of brightness.light and when we save we can see that the status bar turned from white to black and now we have a blue app bar but we want the background color to be colors.white and then we want our facebook title text so let's set the title of our silver app bar to text facebook and then here we can write the text style which would be context style with the color palette dot facebook blue let's increase the font size of our text to 28.0 and then the font weight we can set to font weight.bold [Music] and the letter spacing we want the letters to be closer together so we'll set this to negative 1.2 if we set this to a positive number like 2.5 we can see the letters are more spaced out let's change this back to negative 1.2 we want our title to not be centered so we can set center title to false and that'll push our title to the left side and now if we scroll up we can see our app bar disappears and when we scroll back down we want our app bar to reappear but it doesn't reappear until we hit the top of our screen so to make it peak out as we scroll up we need to set a property called floating to true now it's hit save and if i scroll up here and pull down just a little bit we can see the app bar starts peeking out again now let's focus on building out these two buttons in order to add buttons on the right side of our app bar we need to add actions and this is just a list of widgets to create the button let's use an icon button with an icon icon and we'll set the first icon to icons.search we'll set the icon size to 30.0 the color of the icon to colors.black and then in order to make the icon button appear we have to set an unpressed [Music] so let's hit save and now we see we have our icon button but those icon buttons had a circle around them so in order to add that we need to wrap our icon button in a container and this container will have a decoration box decoration color colors.gray 200 [Music] and then in order to make the box a circle all we have to do is set the shape to a box shape dot circle [Music] let's add a little bit of merging to the container margin const edge insets dot all and we'll use the value 6.0 and now for the second icon what we could do is just copy this and then paste it again underneath [Music] and even though this does work we're repeating a bunch of code so instead of this let's go into our file tree again we're going to make a new folder in our lib directory called widgets [Music] and here we're going to make a new file called circle button.dart circle button.dart will be a stateless widget circle button remember to import material.dart and all we're going to do is copy paste that code into here and now we have our circle button which contains the code for each one of these buttons [Music] to make the circle button more customizable we need to add some parameters to pass in first we want to specify the icon we want so that's going to be icon data [Music] next we want to pass in the icon size and then we want to pass in an unpressed function and now if you command period on mac you get the create constructor for final fields and then it builds the constructor automatically and since all of these are required to build a circle button we can label them as required so whenever we instantiate a new circle button we remember to add these variables [Music] let's change out the icon button down here where we add icons.search we can put icon icon size is icon size [Music] and then the on pressed we can pass in on pressed and hit save since we're going to be building a lot of widgets in our app and we don't want to keep importing a bunch of different widgets into our home screen let's make a barrel file widgets.dart and here we can export our circlebutton.dart back in home screen let's remove these two containers here and now for our actions we can write circle button and import widgets.dart pass in the icon icons.search the icon size will set to 30.0 and the on pressed will set to have it print out search and we can see it appeared in our ui for the facebook messenger button let's copy this paste and then this time instead of passing in the search icon we're going to pass in a material design icon from the material design icon package [Music] so let's write mdi icons import that dot facebook messenger and then print out messenger when it's tapped hit save and now we have our two icons now let's build our create post container this container is going to have the current user since we need to be able to access the profile image and then we'll have a text field here a divider two vertical dividers and then three flat buttons we want this widget to be right underneath our sliver app bar so let's scroll down and under silver app bar let's just try to make a container and this container is going to have a height of 100.0 and a color colors.red [Music] and now if we hit save we can see we get an error and we get this error because we're trying to pass in a container into a list of slivers and even though if we hover over slivers it says it's a list of widgets we actually need to be slippers where everything inside these slippers here is a sliver and so to fix this we can wrap our container in something called a sliver to box adapter and now if we hit save the container renders and other examples of slivers we can pass in are sliver padding their sliver list sliver grid and even more slivers for this tutorial we're going to be mostly focused on sliver to box adapter sliver padding and sliver list so now back to our create post container let's remove this and our child will be a create post container and we know that we want to pass in the current user so we'll have current user as a named parameter where we pass in the current user from our data.dart and the reason we pass in current user from data.dart into the createpostcontainer is so that our createpostcontainer is not dependent on this file of mocked of data and that way we can pass in any user into our create post container and it will change accordingly inside of widgets we'll make our new create post container dot dart and right now let's go into our barrel file and export this hit save and then our create post container will be a stateless widget create post container [Music] for now let's have it return a height of 100.0 color will set to orange this time we need to take in the user so final user current user import models.dart and create the constructor and we have to make this required because createpostcontainer will always need a user to render it [Music] and we can see that our create post container updated accordingly so now if we take a look at the ui once again let's first build out the circle avatar and the text field with the divider below let's remove the height here and the child of the container will be a column widget with children we'll have our row widget let's add our circle avatar with a radius of 20.0 the background color will be colors.gray200 and then our background image we get from cached network image provider passing in the current user dot image url and now if we hit save we can see our image loads to add the text field we'll create a text field with a decoration input decoration hint text what's on your mind question mark hit save and we can see that the text field didn't render and that's because the text field doesn't know how big to be and to fix this we can wrap our text field in an expanded widget which will make the text field expand to the remaining width of the row to get rid of the line underneath we can add dot collapse to input decoration and that's going to remove the line [Music] to add some spacing between our circle avatar and our text field we'll add a const size box with 8.0 [Music] and the reason we had cons before our size box is so whenever our widget tree re-renders our size box doesn't have to be rebuilt let's scroll up a bit to our container or we can add some padding const edge insets dot from ltrb 12.0 8.0 [Music] 12.0 and the bottom will set to 0.0 as the flat buttons we'll add for the buttons underneath will have their own padding underneath this row widget we need to add a divider [Music] and this divider will be const divider with a height of 10.0 and a thickness of 0.5 [Music] for these three flat buttons we need to create a row widget we'll have row children and for the first flat button we can use flat button dot icon and for the on pressed we'll make this one print out live the icon we can set to const icon icons.videocam the color will be colors.red [Music] and then the label will be text live let's change the color of our container from orange back to white now we need to add a vertical divider and luckily there's a widget for that so vertical divider with 8.0 and this can be const let's copy our flat button [Music] add another vertical divider [Music] and one more flat button and we can see that we have our three flat buttons now but we want these flat buttons to be spaced out so we can go back to our row widget and add something called main axis alignment main axis alignment dot space evenly and that's going to space out our buttons let's change the middle flap button to print out photo and the text will be photo instead of the video cam we want to have icons dot photo library and the color will set to colors.green [Music] for the last one instead of live we'll print out room and then the icon will be icons dot video call with a purple accent in order to make these flat buttons take up less space we can wrap the row here with a container widget and set the height to 40.0 and now we can see that our vertical dividers also showed up and now we've completed our create post container now let's create this widget that's going to have our list of users on the right side and then a create room button we can close out of create post container and inside homescreen.art let's add another sliver to box adapter and this is going to have a child called rooms which takes in a list of online users that we pass in [Music] let's make our rooms widget inside of our widgets folder rooms.dart this is a stateless widget rooms material and it takes in our final list of user online users [Music] and create the constructor for now let's set the height of the container to 60.0 and the color will make colors dot orange and now in widgets.dart we need to export our rooms widget and we can see it appears now but if we look back at the ui we can see we have some padding around our rooms widget so if we go into our home screen we can actually wrap our sliver to box adapter in sliver padding where we set the padding to const edge insets dot from left top right bottom and here we'll set it to 0.0 10.0 0.0 and 5.0 and instead of child sliver padding takes in a sliver and that works because sliver to box adapter is a slipper and now if we hit save we can see there's a little gap between our orange container and our crate post container our rooms widget is pretty straightforward it's just a list view builder where the first index is the create room button and the rest are the online users so the child of our container will be a list view builder the item count will be one and that's the create room button plus the length of our online users that we pass in and for now we can just pass back a container with a height of 20.0 width of 20.0 and a color colors.red let's also add on some margin so it's easier to see [Music] hit save and we can see the list view is a vertical scroll so to change this we need to add scroll direction axis.horizontal and now we see all of our boxes and control left and right let's also add some padding to our listviewbuilder const edge insets dot symmetric vertical 10.0 and horizontal 4.0 inside of our item builder we want to first create the button when the index is equal to zero so in here let's return a padding widget with padding const edge insets dot symmetric horizontal 8.0 and the child will be a create room button and the reason we put an underscore here is because create room button will be a private widget that we make inside of this rooms.art file so underneath rooms let's make a new widget stateless create room button and create room button is an outline button [Music] with unpressed we'll have a print out create room [Music] the shape is a rounded rectangle border border radius dot circular 30.0 [Music] and here we can see the button we'll set the color of our outline button two colors.white [Music] in order to increase the size of the border we can access border side border side width will make 3.0 color colors.blue accent 100 and now we have our border next up we'll set the text color and we want the text to be palette dot facebook blue and then to show the gradient icon and the text we'll make a row widget where the row widget has an icon icon to that video call size will make 35.0 and the color colors.white [Music] hit save and since we want this to be a gradient here we can easily do that by wrapping our icon and something called a shader mask and this shader mask requires a shader callback where we get erect and we can create the gradient by doing palette dot create room gradient and i created this gradient already in our palette dot create shader and pass in rect so now if we hit save we can see we have a gradient on that icon now and one thing to note is that if our color was not colors.white so let's say we wanted this to be colors.red for whatever reason the gradient changes so if it's white then the gradient will work perfectly if we make it black then the icon will be black so basically whatever color you put inside here the gradient will have that tint and so by making it white we just get the great room gradient without any tin to show the text let's add some padding with a size box with 4.0 and then the text is just create room and i'm putting a new line character in between this so they show up on different lines and now we have our create room button let's actually change the color of our container from orange to white so it's easier to see and now we can focus on adding our profile avatars for these circle avatars we actually created part of it already by making this circle avatar here all we have to do is add the little green icon here to show that the user is online and so in the spirit of not repeating ourself let's go back to our code and here we're going to make a new widget called profile avatar and this is a stateless widget profile avatar it's going to be taking in a final string imagerl which is the user's profile image a final boolean is active and then make the constructor [Music] and we'll make the image url out required but we'll make is active optional and by default set it to false so that way when we instantiate the profile avatar for other widgets we don't need to specify is active all the time now let's go into our create post container which is where we made the first circle avatar and we have it right here so let's cut this out and instead we'll instantiate the profile avatar with the required image url and pass in the current user dot image url we have the error here because if we go back to widgets.dart we need to export our new profile avatar.dart [Music] and then import widgets.dart so now once we save we see that the profile image disappeared and that's because our profile avatar is not currently rendering the circle avatar yet let's remove the unused import here hit save and then if we go into our profile avatar we can paste the circle avatar [Music] and import cache network image and get rid of the current user here now the profile image is back let's go into room set dart and we can start rendering these profile images so inside our item builder let's grab the user with user user equals online users index and here we have to subtract one because we added one in our item count in order to make room for the button so by minusing one the first index will actually be the zeroth user and now instead of the container we'll write padding padding const edge insets dot symmetric horizontal 8.0 [Music] and the child will just be a profile avatar [Music] with image url user.imageurl and is active is set to false by default so we need to specify that we want it to be true [Music] and now all our images are here back in profile avatar let's add the little green icon and so we can do that by wrapping our circle avatar with a column and changing this column to a stack and the stack allows us to overlay the circle avatar with the green icon so let's add a position widget [Music] and here we'll set bottom to 0.0 and the right 0.0 which means it's going to be in the bottom right [Music] and the child is a container with a height 15.0 a width 15.0 and the decoration is box decoration the color will be palette dot online and that's our online color the shape is box shape dot circle get the circle and if we hit save we can see the icons appeared for everybody and we'll fix that for the create post container in a second and lastly we need the border which is the white border so border.all with 2.0 and the color will set to colors.white [Music] now to remove the active icon from our create post container we know that when we instantiate the profile avatar inside of our create post container his active is set to false so all we have to do is before positioned we write is active question mark and that's the ternary operator and this means that if is active is true we return the positions widget and if it's false then we want to return a const size box dot shrink and that means if is active is false we're turning a shrunken size box so it doesn't appear for the create post container let's move on to adding the list of stories to our app back in home screen.dart underneath this sliver padding let's copy paste it [Music] and instead of returning rooms here we want to return stories and that's going to be the next widget we're going to be building out here we want to pass in the current user current user and stories stories for our silver padding we want the padding for the top to be five because then the padding between our rooms and stories will be 10.0 and that will be the same as the distance between our crew post container and our rooms widget let's go into our widgets folder create stories.dart inside widgets.dart we'll add the export right now stories.dart save and then stories.dart is a stateless widget stories let's add the parameters final user current user import models and final list story stories [Music] and create the constructor [Music] since both of these are required to create the stories widget we'll add the app required to make sure we don't forget to add them our container will have a height of 200.0 and we'll set the color to colors dot purple this time and we want the child to be a list view builder similar to our rooms so the list view builder has an item count and this item count will be one plus stories dot line and the reason we had one is because if we take a look back at our ui we can see that the first card is add to story and that's not a story that's actually the button to create the story and so position zero will be our add story and the rest will be the stories our listview builder will have scroll direction access.horizontal and the padding is const edge insets dot symmetric vertical 10.0 horizontal 8.0 inside of our item builder we need to check if the index is equal to zero and if it is then we want to return padding [Music] padding const edge insets dot symmetric horizontal 4.0 [Music] and the child here will be a story card so we'll have story card and this will be taking in two different parameters the first is is add story and izad story is the boolean value we take in so we know whether to render the plus button up here we're going to be setting is that story to false by default and that's how you know to render an actual story so we'll set this to true and then current user so we know the profile images show and pass in current user if we want to show an actual story then we need to grab that story from our list of stories stories index -1 and then the padding will be the same as above so const edge insets dot symmetric horizontal 4.0 and the child this time would be storycard and instead of passing in is that story and current user since we don't need those we need to pass in the actual story so story story now below here let's actually write our private story card story card is a stateless widget story card it takes in final bool is add story final user current user and then the story if it's available so let's create a constructor and none of these are required since as we saw above these story cards passed in the story and the add story card passed in is that story and current user so we don't need to add at required for these we do need to set his ad story to false by default and then we're done with our story card constructor now our story card is a stack widget where we have an image behind it with rounded corners and on top of it we're displaying the create icon or the circle avatar and then the text for the add to story or the name so let's start off with a stack widget with children and let's first focus on showing the image so let's make a cached network image where the image url is add story is the current user imagerl and if it's false then we know to show the actual story image [Music] we'll set the height to double dot infinity so it expands the full height of the container the width will be 110.0 and the fit will be boxfit.cover [Music] and now we see all of our images loaded in in order to get the border radius on each of these we need to wrap our cache network image in a widget called clip r rect and cliparect has a border radius that we just set to circular 12.0 hit save and now we got the nice curves on it now let's take one more look at the ui we can see that there's a light gradient on these so we can see it's darker on the bottom and it goes lighter on top so like a black to white gradient and that's so the white text here is more readable after our clip erect we need to add a container with the height double dot infinity so it stretches to the max height the width is 110 for the decoration we have a box decoration the gradient will be palette dot story gradient and the border radius with the same as above so border radius.circular 12.0 and now you can see that we just have the nice fade on our images now let's add the image in the top left so this will be a positions widget top 8.0 left 8.0 the child we need to check if is that story is true and if it's true then we want to return a container with a height of 40.0 and a width of 40.0 the decoration will be a box decoration with color colors.white the shape is box shape dot circle so we get a circle and then the child of this container will be an icon button with padding edge insets.0 [Music] the icon is const icon [Music] icons.add icon size will set to 30.0 the color of the icon is palette [Music] dot facebook blue and then on pressed we'll make it print out add to story now if we hit save we can see we get the icon in the top left of the first story and then the rest of these have a bunch of errors because i'm passing in null so let's not pass the null here and instead we can pass in our profile avatar which is the widget we wrote before and pass in the image url [Music] story.user.imageurl and remember to import widgets.dart so we have access to this widget and hit save now to add the circle to the profile avatars we need to actually go into our profile avatar and we want to take in a new value so final bool has border [Music] and this dot has border will be optional so by default we need to set it to false [Music] we can't just set like a border property on the circle avatar because it doesn't have one so instead we're actually going to wrap our circle avatar in another circle avatar and the radius will set to 20.0 with the background color palette dot facebook blue so now let's hit save and the reason it didn't show up is because our inner circle avatar has a radius of 20. so it's actually covering the border right now so if we set this to 17 we can see that all of our profile avatars have a blue ring around them now and so if haz border is false we want it to have a radius of 20.0 so the radius will be has border if it's true 17.0 otherwise 20.0 so it covers up the blue ring so let's hit save and now we can see we removed the blue ring but if we go back to stories.dart all we have to do is pass in profile avatar has border and set equal to story dot is viewed and if it has been viewed we don't want the border to show so we put an exclamation point here to indicate it and if we scroll through these we can see that the blue ring only appears around people whose stories have not been viewed finally let's add in the text below so let's add another position widget with bottom 8.0 left 8.0 and the right side will make 8.02 so it's all even the child will be text and we need to check if is that story is true then we display the text add to story otherwise we just want to return the person's name so story.user.name the style will be const textile [Music] where the color is colors.white and the font weight will be fontweight.bold and to make sure the text never gives us an overflow error let's set the max lines to two and the overflow will be text overflow dot ellipsis and now let's go back to the top of stories changing the color from colors.purple to colors.white and now we built out our stories widget now let's work on adding these post containers to the app we're able to support posts with both text and an image and also posts with only text so let's go into our home screen and underneath our stories here we need to create a sliver list and this liver list takes in a delegate called sliver child builder delegate and this is basically the equivalent to a listview.builder the silverchildbuilderdelegate gives us a context and index which we can then use to render each post so we get the final post posts index and we need to import models.dart here and we want to return a post container which is the widget we're about to write which takes in the post and inside our delegate we also need to specify a child count and that's just going to be posts.length let's go to our widgets folder create postcontainer.dart this is a stateless widget post container import material we take in a post import models create the constructor and then we need to make this stop post required because our post container will always need to have a post and then for now we'll set the height to 100.0 and the color will be colors.red and then widgets.dart we need to remember to have the export for our post container and now we see all of our posts here as red containers let's add some margin to the container margin const edge insets dot symmetric vertical 5.0 [Music] and for padding we'll do edge inside stat symmetric again vertical 8.0 we'll set the color of our container to colors.white and we'll remove the height since we want the height to be dynamic based on the size of the content so if we look at our ui we can see in order to build out this post header here this is going to be inside of a column widget first so we can have the post header and the text and then the post header itself will be a row widget with the profile avatar a column with the name and the timestamp and then we have a more button all the way on the right side so the child of our container will be a column widget children and we want this column to stretch across the entire width of our container so we can set cross axis alignment to cross access alignment dot stretch the first child in our column will be our post header where we pass in the post and this widget will write below our post container so stateless post header takes in a final post with the constructor and since we always need the post to create the post header we'll set this.post to required now postheader is a row widget with children first being the profile avatar image url we get from the post dot user dot image url and then for the column text we can create a size box first to add some padding [Music] 8.0 and then our column will have children where the first widget is a text widget post dot user dot name and underneath this we want to show post.time ago so that's going to be first in a row widget text post.time ago and then we also want to show the globe icon so let's add that in icon icons.public color colors.gray 600 and the size will set to 12.0 now if we hit save we can see we have the text there 58 minutes and then the globe icon let's set the style of our text here so style cons text style the color will be colors.gray 600 and i realize that we can't make this const because colors.gray and specifying shade is not constant and then our font size will be 12.0 to keep it consistent with the icon and now the last widget in our row is going to be an icon button icon const icon icons.more horizontal and on pressed we'll set to print more and if we hit save we can see the icon button appears now in order to get the more icon all the way to the right side of the container let's wrap our column here in a new widget called expanded and that pushes it over to fix the alignment of items in our column we can set cross axis alignment to cross axis alignment dot start and that's going to make sure everything starts on the left side let's also bold our username so style const textile and we just want to set the font weight to font weight dot w 600 and now we're done with our post header so let's scroll back up and let's actually add some padding to our column so padding const edge insets symmetric horizontal 12.0 and now everything's pushed in the reason we have the padding on our column as a separate widget instead of the container is because we don't want horizontal padding on the images we want them to take up the entire width so now let's add the post caption cons size box height 4.0 for some spacing and then we'll set the post caption as a text widget and hit save and now we see that all of our posts have text and one more thing i'm going to do is check if post image url is not equal to null and that's so i can provide the right padding so if it's not equal to null i have con size box dot shrink and if it is then we want some extra padding on the bottom so the height will be 6.0 and this will make more sense once we actually add the image and you'll see the difference between the text posts and the image posts for adding a post image all we have to do is wrap our padding widget here in a column [Music] and then after the padding widget we need to check if post.imagerl is not equal to null and if it's not equal to null then we want to render the widget so now all we have to do is cached network image image url and pass in the post image url [Music] otherwise we want to return const size box dot shrink since there's no image [Music] and now all of our images load let's add a bit more padding so around the cache network image we can wrap it with padding where edge insets.symmetric vertical is 8.0 and that looks a lot better last part of our post container consists of post stats and also the post interaction buttons right after we create our post image we can create another widget which is padding const edge insets.symmetric horizontal and so we have the same 12.0 padding around our widgets child will be post stats and we pass in the post so let's scroll down underneath our post header and create status widget post stats takes in a post create constructor as usual we make it out required [Music] and now this is going to be a column now to display the post statistics we're going to be putting this into a row and the first item here will be a container with the decoration box decoration color palette dot facebook blue and this is the like button over here that we're making right now so the shape will be box shape dot circle and the child will be const icon icons thumb up size will be 10.0 and the color of the icon will be colors.white let's hit save and we can see that the icon appeared here but we need to add some padding to the container so padding cons edge insets dot all 4.0 next up we need to show the number of likes so below this we'll have text post.likes style text style and the color will be colors.gray 600. let's add a bit of spacing between these two with a size box with 4.0 and then we also want to display the number of comments and post shares so let's copy the post likes text here and paste it below twice we'll change this to post.comments with comments after it and here we'll change this from likes to shares shares let's first add spacing between our comments and chairs with a size box of width 8.0 and then in order to push the comments and chairs all the way to the right side we just need to wrap our post.likes text and then expanded widget which will push it all the way to the right side now let's work on adding the divider and then the three buttons below so below this outside of the row but inside of our column still we have a const divider [Music] and then we have another row so this row is going to have three buttons and here we're actually going to make our own widgets for these buttons instead of using flat buttons dot icon because the default flat button.icon widget has a bunch of padding and margin and they take up too much space so instead we're going to create our own custom post button [Music] so we'll have post button and this will take an icon icon mdi icons dot thumb up outline the color will be colors.gray 600 and the size will be 20.0 we'll have the label like and then the on top will print out like [Music] so let's start with this post button first blow here we'll make our stateless widget post button final icon icon final string label final function on top create the constructor and all of these are required not required and here let's first make an inkwell widget so we get the nice ink effect on our buttons the ontap will be the ontap we pass in the child is a container with a height of 25.0 the child will be a row widget so we can display the icon and the text next to each other icon content size box with 4.0 for padding and the label hit save and now we see we have our like button let's spruce this up a bit by adding some padding to the container edge insets dot symmetric horizontal we'll set to 12.0 and that pushed it in and now we also want to wrap our ink wall here inside of a material so we get the ink effect we'll set the color of the material widget to colors.white so it's save and now when we click on this we can see the ink effect and finally let's wrap this button and expand it so it expands to the full width now if we scroll back up all we have to do is copy this post button two more times [Music] and remember to add your commas instead of the like label we want to write comment and then for the other one we want share our comment button will have the icon mdi icons.comment outline and the share button will have mdicons.shareoutline let's hit save and we can see the share icons a bit smaller so let's increase the size of the share icon to 25.0 and now that looks better when we take a closer look at the buttons we can see that they're not centered so let's scroll down and inside the row widget for our post button we'll set the main axis alignment to mainaccessalignment.center and now all the buttons are centered and now for the final piece of our mobile ui we just need to add the custom tab bar down here so to do that let's first create a new screen and this screen is going to contain the custom tab bar right click on screens we'll make navscreen.dart short for navigation screen this will be a stateful widget nav screen import material and for now we'll return a scaffold now inside screens we need to export this so navscreen.org and now if we go to main.dart let's change our home screen here for nav screen [Music] and this is going to make this whole screen disappear the reason we made nav screen is so we can have our custom tab bar at the bottom and whatever screen we switch to the custom tab bar will always be there so inside nav screen let's first start by defining the list of screens so i have a final list of widgets called screens and these screens will be the screens we want our app to have so first is home screen and the next five screens will be scaffold widgets as we didn't build the screens out next we need to have our list of icons so list of icon data icons equals const icons.home icons.on-demand video mdi icons dot account circle outline icon to that account group outline mdi icons dot bell outline and finally icons.menu and the reason our nav screen is a stateful widget is so we can maintain the state of our selected tab so in selected index is equal to zero now in order to show a tab bar on the screen we're going to wrap our scaffold in a default tab controller and if we hover over default tab controller we can see that a length parameter is required and the length will just be the number of icons dot length next we'll define the body of our scaffold and for now this is just going to be screens selected index so we can see something on the screen and finally our scaffold has a bottom navigation bar which will be our custom tab bar in this custom tab bar widget we'll take in icons the selected index and the on tap for when an icon is tapped on and we expect to get an index back so we can set the state of our selected index to the new index let's start working on our custom tab bar we'll make a new widget called custom tab bar dot dart stateless custom tab bar import material we'll take in our final list of icon data icons final int selected index final function returns an int on top and then we need to create a constructor where all these are required let's go to widgets.dart and export our custom tab bar so inside navscreen.org we can import widgets.dart now custom tab bar is going to return a tab bar and this tab bar requires tabs so let's define some tabs we already have the list of icons so we can do icons dot map where we map each of these icons to a tab icon icon e and then we need to convert this back to a list because dot map returns an iterable and so dot 2 list converts it back to a list of tabs and once we hit save we can see we have all the icons on the bottom first let's deal with the indicator we can see that the indicator is at the bottom and instead we want it at the top so we can access indicator box decoration border border top border side color palette dot facebook blue and width will be 3.0 and now the indicator is on the top we'll set the indicator padding to edge insets.0 and then the on top of our tab bar we'll just call our ontap and so if i tap through these we can see that the tab is updated accordingly but now we need to deal with the color of our selected icon so in order to tell which icon is selected we need to do a check in here and the first thing we need to do is get the index of the tab so we actually need to convert our list of icons to a map and this will give us access to the index and the icon so i is the index here and use the icon when we do dot map over a map we need to return a map entry and we'll have i as the key and then to get the icons back we do dot values which will just be the tab icon part and then we're converting the values to a list [Music] we'll set the selected icons color to palette dot facebook blue otherwise colors dot block 45 and now we see all of our icons when i tap the icons are colored accordingly and finally let's set the size of our icon to 30.0 [Music] on ios we can see that the tab bar is blocked by the bar down here so back in our nav screen let's just add some padding to our custom tab bar with constant edge inside slot only bottom 12.0 and that pushed it up and now even though it looks like our tab bar is functioning properly we shouldn't be using screen selected index to render the body instead we should be using a tab bar view where we set children to screens however now when i scroll i can scroll left and right but the index isn't being updated properly so to fix that i can just disable scrolling by setting physics never scrollable physics hit save and now if i click i can't scroll anymore and i can only click now using a tab bar view is totally fine but when i was building this out i found that tab bar views were a bit laggy on web so i actually changed this to an index stack [Music] index stack where the index is selected index and the children is screens hit save and we can see it works the same way another benefit of using the index stack is if we scroll and then change tabs we maintain our scroll position and if we use the tab bar view the screen would have re-rendered putting us at the top of the list view now that we've completed the mobile version of our app we can now start working in the web version let's first start by running the app on the web in the terminal i'm going to type in flutter devices to see which devices are connected and i can see that i can run the app via chrome so in the terminal i can type flutter run d chrome and this would launch the web app for me but instead i'm actually going to run the app through vs code so i'm going to cancel this and in the bottom right here i can click that select chrome and then hit f5 and now the app is going to launch the chrome we see that even though the web browser opened we're getting an error in the terminal so if we scroll up we can see that there's an error about a shader mask and the reason for this error is because right now shader masks don't work on flutter web so unfortunately we're not able to make gradient icons to fix this let's go into rooms.dart and we need to go to our create room button where we specify the shader mask we're going to comment this out copy the icon here paste it below and then we'll replace the color with colors.purple now if we hit save and open the app we can see that our app loaded without any issues and we can scroll left and right in these scroll down click on the different tabs and it works correctly and just so we can see that there are no more errors let's clear the debug console hit hot restart and we can see that there are no errors now we're going to create a very useful widget for building out responsive ui inside of our widgets folder let's make a new widget called responsive.dart and this is going to be a stateless widget called responsive [Music] let's go into widgets.dart and export it responsive is going to take in three different parameters first is a final widget mobile next will be tablet and then we need desktop let's create the constructor and we'll make the mobile and desktop widgets required we're going to use this widget to display mobile tablet or desktop ui based on the size of the screen we can do this by using the layout builder widget builder we get the context and constraints [Music] and in here we check if constraints dot max with is greater than or equal to 1200 and we return the desktop elseif constraints.max width is greater than or equal to 800. we want to return the tablet else we just returned mobile and so what this is doing is it's checking if the max width is greater than 1200 pixels if it is then we return the desktop or the largest version of our app if the max width is greater than or equal to 800 pixels then we return a tablet and anything less than 800 will return mobile one thing we have to take into account is that we're not always going to be specifying our tablet so for facebook when our max width is between 800 and 1200 we actually want to return the mobile version so we'll use the null aware operator and pass in mobile we're also going to create three helpful static functions first we'll create static bool is mobile which takes in the build context context and all we're doing here is we're checking if the current size dot width is less than 800. let's copy this two more times and the next one will check if the screen is is tablet where the media query of context.size.with is where they're equal to 800. and mediaquery.ofcontext.size.with is less than 1200. and then finally we have this desktop which checks if the width is greater than or equal to twelve hundred and these functions will be very useful for making our individual widgets responsive let's start working on getting this app bar to display at the top of the screen inside of navscreen.dart let's scroll down and the first thing we're going to do is remove the bottom navigation bar when our screen width is greater than 1200 which means it's in desktop mode so here we're going to do a check for responsive dot is desktop we pass in context the idea here is that if responsive is desktop is true that means we want to return a constant size box dot shrink so let's negate this and here we're saying if we're currently in mobile or tablet mode then we want to have the custom tab bar at the bottom of the screen otherwise we just want to return size box dot shrink and now if we save this and take a look at the web version we can see if i shrink this down the tab bar is here but when i pull it wider the tab bar disappears so now we need to working in the tab bar up here to do this we're actually going to make an app bar and our nav screen is going to have a custom app bar so first we check if the screen is desktop and if it is then we want to return the custom app bar otherwise we can return null to make a custom app bar we need to create a preferred size widget and preferred size takes in a preferred size where size has a max width of screen size dot width and the max height will set to 100. screen size is a variable that we're going to define at the top of our build function final size screen size is equal to media query dot of context dot size preferred size is going to take in a child custom app bar which is the widget we're about to write this will take in the current user because we need to show the current user in the app bar icon icons the selected index we need [Music] and then we also need untap which i'm going to copy right here and remember to import current user from data.door let's go create custom app bar it's a stateless widget custom app bar import material final user current user [Music] final list icon data icons final in selected index and final function which gives us an integer back on tap create the constructor and we'll make all of these out required because they're all necessary to create the custom app bar inside of widgets.dart we can export our custom app bar and now we can start building it out so our container is going to have a height of 65.0 we're also going to have some padding so const edge insets dot symmetric horizontal 20.0 and that's going to give us a nice padding on the left and right sides of the app bar decoration box decoration we'll set the color to colors.white and we also want a box shadow which will give us a nice drop shadow coming at the bottom of our app bar const box shadow color colors dot black 12 offset offset 0 2 and the blur radius will set to 4.0 and now let's start adding content so our container will contain a row widget and let's first add the text on the left side which just says facebook and since we wrote this before we can just go into our home screen and actually copy the text style here import palette we'll increase the font size to 32 the letter spacing will keep the same and hit save next we'll add our custom tab bar so this will be a container with a width of 600.0 the child will be the custom tab bar icons icons selected index selected index and ontap and before we can view the changes we have to fix the errors custom app bar or an icon here that should be icons and that should do it so i'm going to relaunch the app and now we see that we have the app bar at the top of the screen with our selector up here don't worry about the extra silver app bar here we're going to be removing this let's take another look at the ui we can see we need to center this tab bar here and we also need to add a profile image with the user's name and then two circular icon buttons so let's go back to our code inside of custom app bar in order to make the app bar move to the center of the screen we need to add main axis alignment main access alignment dot space between which will push our custom tab bar to the right side and then we also need to add expanded to our text facebook and then below this let's create the rest of the ui this will be a child row with main axis alignment main axis alignment dot end which will push the content here all the way to the right side of the screen and in here we want to instantiate a user card which would be just the profile image and the user's name so we'll pass in the current user into this [Music] then we'll have const size box with 12.0 for some padding and here we just want to make the two circle buttons icon icons.search icon size 30.0 unpressed print search and then we'll do the same for messenger [Music] mdi icons facebook messenger print messenger now for this user card we need to make a new widget [Music] usercard.dart remember to export it inside of our barrel file and usercard.dart is a stateless widget [Music] that takes in a user final user don't forget the app required and all this widget is is a row widget with the children profile avatar image url user dot image url content size box with 6.0 for padding and then text user.name with style const text style font size 16.0 and hit save now if we take a look at our app bar we can see that our tab bar centered here and we have our profile and the name over here and two buttons let's also add main access size main access size dot min so our row is shrunk into the small size and then to make the user card clickable we can add an inkwell widget with ontap equal to an empty function taking a closer look at chrome we can see that our tab bar has the selector indicator at the top and we actually want that at the bottom the way we fix that is by going to our custom app bar going to our custom tab bar and passing in a value is bottom indicator setting that to true inside custom tab bar we need to fix this inside of the box decoration where we set our border so here we first need to take in the boolean is bottom indicator add this to our constructor is bottom indicator we'll default this to false and then inside of the border here we'll check is bottom indicator and render a new border where the bottom has the boulder side then let's hit save and now if we take another look at chrome we can see the indicator is on the bottom one more thing we have to do is make the indicator reach the bottom of the tab bar and we easily do that by going back to the custom app bar the container where we create our custom tab bar we need to set the height to double dot infinity and that's going to make sure the custom tab bar expands to the full height and now the tab bar is at the bottom now we're going to make our home screen responsive and first let's wrap our scaffold and a gesture detector [Music] with ontap focus scope dot of dot unfocus and what this does is if you're on mobile and you click the text field you can tap anywhere on the screen to get rid of it and this is just a line i forgot to add when we're doing the mobile version so now to make the home screen responsive we can wrap our custom scroll view in the responsive widget where we get the mobile version and the desktop version now we know for the mobile version we want to render all of this so let's cut this out and for mobile we're going to have home screen mobile which we'll add just right under here stateless home screen mobile and now for desktop we want to return home screen desktop stateless home screen desktop i would make separate files for each of these so i would create a home screen mobile.dart and a home screen desktop.dart but for the sake of this tutorial it's easier just to put it inside of the home screen.dart file so now when we save this and take a look at chrome we can see when our app is in desktop mode all we have is the app bar but when we shrink it down all of a sudden we get the mobile ui and this is perfect if we change tabs and expand we can see the tab stays the same in the ui we can see our home screen split up into three parts we have one block over here then we have another block here for our content and then we have the contacts over here so let's work on getting this to appear where we have one color block here another colored block here and then a third colored block here replace the container with a row widget the first child will make a container with a color colors dot orange and let's paste this two more times so i have colors dot red and colors dot blue and to make the containers appear we need to add a flex to them so flexible we'll set the flex of this one to two [Music] and then on the last container we'll also add flexible here with a flux of two the middle container we already know is going to have a width of 600.0 and that's because our custom tab bar we set to a max with a 600.0 inside of our custom app bar now let's save and here we can see we have our orange container red and our blue container let's also add a spacer here between each of these containers [Music] and now that looks a lot more like a ui where we're going to have the more options list on the left side the feed in the middle and then the contacts on the right let's add the user's feed to the middle container for this all we have to do is copy the custom scroll view inside of our home screen mobile and we can remove the color here child and paste it let's remember to remove the sliver app bar since we don't need it on desktop hit save and now look at our ui we can see the mobile feed loads if we compare this to our ui though we can see that there are some differences the first being that the stories come first then we have the create post container then rooms and then the list of posts there are also subtle changes where if we scroll in we can see that we no longer have a white container around the stories we also have some box shadows and then for each of these containers they actually turned into cards with some shadow underneath and so we'll work on adding all these changes and making them responsive so on desktop they look like this but on mobile they stay like this let's start by reordering stories and moving it to the top the top padding will be 20.0 and the bottom padding will be 10.0 let's go into stories and we can start changing some of this so first we know that the colors.white background for the container is gone on desktop so we need to check if responsive dot is desktop passing in the context then we want the color to be colors dot transparent otherwise we're fine with it being colors.white next our story cards have a box shadow and we need to add that in on this container here so the decoration box shadow we'll write responsive dot is desktop context and return const box shadow color colors.black 26 offset will be offset 0 2 and blur radius will be 4.0 otherwise we just return null which means we don't have any box shadow let's save that and check chrome now we see we have the box shadow on our stories so it looks like they're floating and also no background color but now if we shrink it we see we get the background color and no box shadows next let's work on our create post container the first thing we're going to do is define a variable rule as desktop equals responsive dot his desktop and to turn our create post container into a card we can wrap our container in our card widget where the margin is edge insets dot symmetric horizontal is desktop 5.0 and if it's not desktop then we return 0.0 elevation we'll set to is desktop 1.0 otherwise 0.0 so that way if we're not in desktop mode then the margin and elevation have no effect and finally we need shape so is desktop we want to return a rounded rectangle border with border radius border radius.circular 10.0 otherwise we don't want a shape so we set it to null the reason we set the margin here is so that the drop shadow on our card is visible on the left and right sides if the margin's zero then the drop shadow is not visible and now we see that our create post container turned into a card let's do the same for our rooms widget and our posts for roomsat dart i'm actually going to copy in from shape all the way up to his desktop rooms.dart let's scroll up and here we can wrap our widget in a card widget and paste in the new values so now our rooms.dart has the margin elevation and shape keeping it consistent with the create post container let's make sure this worked and it did work so now all we have left are the posts for our post container we're going to wrap the container in a card again and paste in the same values but this time we need to make an adjustment to the margin and add in vertical 5.0 and if we scroll down we see that we also define a margin here in our container we can remove this and hit save let's open up the web browser and now we see that loaded and all of our ui is working correctly now for our feed if we drag this and make it smaller we see that we still maintained all of our original ui for mobile and when we pull it larger we see that we have our responsive desktop ui one thing you may have noticed when scrolling was that if we scroll on desktop or mobile and then make the screen smaller our custom scroll view renders at the top to fix this let's go into our home screen and at the top we're going to change home screen to a stateful widget and inside the home screen state we need to create a tracking scroll controller of type tracking scroll controller don't forget the dispose method which is why we made home screen stateful so we can actually dispose of our tracking scroll controller when our home screen is disposed from our view [Music] and what this is going to do is allow us to keep our custom scroll views in sync even when we're changing the ui because right now what's happening is when we're on mobile or desktop we load the custom scroll view when we scroll on one and then we resize to load the mobile or desktop ui we're actually re-rendering the whole entire custom scroll view so that's why we need to have the tracking scroll controller to keep track of the position of the scroll view we want to pass in this scroll controller into both mobile and desktop tracking scroll controller copy this paste into desktop final tracking scroll controller scroll controller create the constructor make this ad required so we remember it and then do not forget to add the controller to the custom scroll view so custom scroll view controller scroll controller and now we'll do the same exact thing for our desktop version so i copied all this let's bring it down here paste it in change this to desktop [Music] and now our custom scroll view also needs to have the controller scroll controller so now save that and we need to hot reload the app and if we scroll down we can see that we're looking at david brooks amy smith and jesse sampson we pulled wider to web mode and we can see that we have jesse sampson here and david brooks so it's a little bit off but i think that's pretty good considering all we had to do was add a tracking scroll controller since we already created our user card reading the contacts list should be pretty straightforward for this let's go into our home screen and at the bottom here instead of returning a blue container [Music] let's instead return a padding widget with padding const edge insets dot all 12.0 and the child will be contacts list where we pass in the online users let's create contacts list contacts list.dart it's a stateless widget contacts list material takes in the list of users and we need to create the constructor make this ad required and then remember to export this inside of our barrel file so this contacts list is pretty straightforward first we have our container and that's so we can constrain the width of our contacts list so no matter how big the screen is the max size we want it to be box constraints max width of 280.0 the child will be column children the first being a row and inside this row we need to have the text contacts and a search and a more icon so let's make expanded child text contacts the style of this text [Music] will be style text style font size 18.0 font weight will be font weight.w500 and we'll set the color to colors.gray600 the icon will be icons.search with color colors.gray600 [Music] and let's copy this again add a const size box with 8.0 for some spacing and paste it below where you have more horizontal and so that's going to be the top of our contacts list next we need to actually display all of our contacts so here we need to create a list view builder with the item count users.length we'll add padding const edge insets dot symmetric vertical 10.0 and the item builder we get the current user that we're looking at based on the index and return padding padding const edge insets dot symmetric vertical 8.0 for padding between the user cards and then child user card and we pass in the user now if we hit save and we can take a look at this we see that all of our widgets disappeared and if we look at our console right now we can see that we get an error and if we scroll all the way to the top it's basically saying that the list view builder inside of our contacts list does not have a height so we need to wrap our list view builder expanded widget so it takes up the rest of our column now if we go back we can see that we have our list of contacts one thing to note is that if these contacts become too long with their name we're going to have an overflow error so we can actually handle this inside of our user card by wrapping our text inside of a flexible widget [Music] and then adding overflow text overflow dot ellipsis to test that this actually works let's just add a plus to the username and add a bunch of text here hit save go back to chrome give it a second to load and we can see that on top i have a bunch of text after my name that's not overflowing because we didn't set a max width for this but all the values over here are overflowing and cutting off correctly so let's remove that we also need to remember to wrap our padding here in a line and then alignment alignment dot center right and that will make sure our contacts list is always aligned to the right side of our screen and now we're all done with our contacts list the last widget we need to build is the more options list and that's going to be the left side of our screen so if we look at what we did for our contacts list we can just take this all the way from a line down go up to here replace the container here with a line alignment dot center left this time [Music] and now instead of the contacts list we're going to return the more options list the more options list will take in current user which is the current user and we'll make this now inside of widgets more options list.dart stateless more options list material final user current user create the constructor and make sure you set this to not required so whenever we instantiate this we always know to have current user and then inside of widgets.dart the last file we need to export is moreoptionslist.dart now the first thing we need to do is actually create a list of all the icons we need and their text so at the top of more options list we're going to define a final list of lists more options list equals const and in here i'm going to copy paste all the icons the colors and the text and we can go over it so let's import material design icons and the first thing we have here is material design icon shield account with the color deep purple and then the text so for all of these icons index 0 is the icon index 1 is the color of the icon and then index 2 is the text take a second to pause the video and copy this now let's go down to our build function and in here we're going to have our container with constraints box constraints max width 28.0 so we set our max width for our more options then we have a child list view builder the item count is one plus the more options list.length and the reason we have one here is so we can display the user card for our current user if the index is equal to zero we want to display the user card so return padding padding constant edge insets dot symmetric vertical 8.0 and the child is the user card we wrote where user is the current user otherwise we want to return an option so options equal to more options list index and don't forget the minus one because the zero index right now is the user card and we added one here return padding padding const edge insets dot symmetric vertical 8.0 to keep you consistent with the user card and the child would be an option that we're going to write in a second where we pass in the icon option sub 0 the color option sub 1 and label option sub 2. below our more options list let's write the option status widget takes in the icon data color string and then we need the constructor each option consists of an inkwell widget so we can get the selection on it and for the on tap we'll just make it print the label out child row with children passing the icon icon we'll set the size to 38.0 and the color will be equal to the color we pass in next we'll have a size box for padding [Music] and then we have to have flexible text and this is similar to what we did for the user card where we have text here and we wrap it in flexible so even if the text overflows we won't get an error [Music] and don't forget to set overflow text overflow dot ellipsis and now when we look at chrome we can see that we have all of our information in the more options list from the user card and all the icons with their colors and the text ideally all these icons would have gradients but because the shader mask does not work on flutter web at the moment i have to use solid colors and now we've completed our flutter facebook ui for web and mobile we can expand this and everything stays centered and aligned to left and right if we make it smaller the ui changes to mobile and it worked perfectly i can pull it back wider and we can see that our feed still stays in the same general area and i can scroll through it the tab bar works where i can change screens i also have stories here that i can scroll through seeing which stories the user is viewed and the stories the user hasn't viewed and we also have create room here where we can see all of the users that are online that we can create a room with one more awesome thing we did with our responsive widget was add the rounded corners here and turn these containers into cards while in desktop mode but then when we shrink it back down to mobile it turns back into the mobile ui without any of the drop shadows and the cards and that's all for this video remember to leave a like subscribe share this video and start the repo on github thanks for watching and i'll see you in the next one [Music] you

Channel: Marcus Ng

Views: 266,121

Keywords: flutter facebook ui, flutter responsive ui, flutter responsive tutorial, flutter web tutorial, flutter web mobile, flutter mobile and web, flutter facebook tutorial, flutter facebook web, flutter responsive guide, flutter responsive ui tutorial, flutter website, flutter website tutorial, flutter responsive design, flutter responsive web, flutter facebook clone, flutter 2 web, flutter 2 web app, flutter 2 web app tutorial, flutter 2 web tutorial, flutter 2 website, flutter 2

Id: HvLb5gdUfDE

Length: 112min 11sec (6731 seconds)

Published: Fri Aug 07 2020

Reddit Comments

[u/Jmodell]

Just saw it pop up on YouTube this morning. Can’t wait to watch it; your videos always rope me into wanting to try flutter again.

[u/78sarmad]

Watched it on YouTube. Brilliant work!

[u/kgainz]

Haven't watched a Flutter tutorial in a while. This is great.

[u/Snoo80242]

wow great , waiting to try it

[u/benedreddit]

Thanks a lot! What a nice web-friendly show here!
I think I will 'devour' your other videos that I did not know until now.

I have a question: can't SafeArea solve your notch problem (at the bottom) by itself?