Flutter Web - Building a Responsive Website in Flutter | Flutter UI Design Tutorial

[Music] hey hello friends and welcome to this new flutter tutorial and this we're going to be taking a look at creating responsive web pages using flutter so this is the example of the page that we're going to be creating today and you can see that there is a nav bar and some content on the left-hand side and a nice image on the right-hand side and as the page shrinks itself you can see that the content shifts itself to fill the area that is given to it by the device so this is the type of page that we are targeting in this tutorial and okay so let's get started okay so right now I'm in a new flutter web project that is created using this procedure here given on the official flutter website that is at flutter dev slash dogs so let's get started slash web so you can follow these exact steps to create this project that I'm that I have put it here you know what you get is a this HTML file index dot HTML and this main dot or file this main dart or file resembles the web page that you get when you create a new flutter project or where the regular one so the command you need to run to run this website is flutter run slash D and the browser that you have installed so they basically recommend you to use Chrome because right now they have optimized some things for Chrome only but okay so this is the way you run it and when you press ENTER it takes a bit of time ok so now the page is running and you can see that you have this basic web app that is given to you by the default flutter web project okay so as I press the plus button you can see that the state changes and the number is incremented by 1 each time so okay we don't really need this right now and what I'm going to do is I'm just gonna remove this my home page I need to delete this code right now because we'll create this by ourselves okay so what I'm gonna do is I'm gonna create this new in my home page again so let's start with a stateless widget state less widget and what I'm gonna do is my home page okay and I'm using Visual Studio this time to create this project I can't really find the support for Android for flutter web on the Android studio so this is the first time that I'm using the visual studio code for flutter okay so right now I have this container here what I'm going to do is I'm going to remove this and add a scaffold in place of it scaffolds and add a body in this and in the body I'm going to add a container so what we need to develop is we need to create this page and we need to create it responsive as I showed you previously so the first thing that we're gonna do is we're gonna create this sort of gradient or we should create a navbar so the first thing I'm gonna do is I'm gonna create this gradient as I'm in the container so okay so in the container what I'm going to do is I'm going to add a decoration and then add a box decoration here box decoration and in the Box decoration I'm gonna add a gradient for the color I'm gonna add a linear gradient and in the linear gradients what I'm going to do is I'm going to give it a beginning at a beginning of alignment dot Center left maybe center left and end off line mint dot Center right and for the colors I have the colors here so we're gonna add an array a list of colors that is going to be color dot from RGB we have the color code here I have this year like 195 20 50 and we're going to keep the opacity 1.0 that is full and for the second color I'm going to add a color dot from RGB oh and we're gonna have 36 comma oh sorry 36 comma 11 and for the third color I'm going to add 54 and for the opacity it's gonna be 1 1 0 so these are the background gradient colors that we need so the first thing that one that we need to do is after adding the gradients I'm gonna add a child sorry not here after the decoration I need to add a child in the container and the child is gonna be a column make it basically column okay so why we need the column here is because we need to create a nav bar here and below that we need this landing page content that is the center content so for creating a nav bar what I'm going to do is I'm just gonna create a new folder here in the Libet falter and I'm gonna name is named nav bar okay so in the nav bar what I'm going to do is I'm gonna create a new file that is nav bar dot dart okay so in the nav bar dart I need to create a new state the less widget that is the nav bar so what I'll do is I'll use the shortcut well the state list widget and I'll name it nav bar I don't really need the constructor and so basically what we need to do is we also need to import the material for God I'll add the materials at our file here and what I also need to do is I need to make this responsive so for making the navbar responsive what what we will do is we'll add a layout builder okay and the layout builder gives us a builder property that gives us the context and the constraints so these constraints will help us to detect what type of screen we are using so based on the constraints will give different layout for a different type of nav bars so for example when we have the version will return this type of navbar and when we go to the smaller version of screens will display a smaller and navbar that is will shift these elements below the retro portal studio title so for that want to do is mm-hmm okay so here what we're gonna do is we're create an if statement and check if constraints dot max with max sorry max width is greater than 1200 so that is going to be for desktops okay so we'll return a desktop nav bar will create this later on and else if the constraints dot max width max width is greater than 800 and the constraints dot width dot max width is less than 1200 then it's going to be of tablet size or the medium size screens that you can support and also we can add an else statement for a lesser screens for example the mobile views okay so we'll return a mobile navbar that we're going to be creating very soon so I'll add a semicolon there and for the else I'm also going to return a desktop navbar we're not gonna really care about tablets here I'm just gonna tell you how to create it and you can create if you want to so okay so what we need to do now is we also need to create desktop navbar and mobile in that bar okay so for this we're gonna create a new class we'll create a new class off stateless widget that's gonna be a desktop navbar well create a new stateless was it and we'll name it desktop and that bar I'm just going to remove this constructor and in the desktop navbar I'm going to add a new container that is here and we in the children what I'm going to do is for the desktop we need to add it as a row okay because the elements would need we need to place them in a row okay you know a horizontal row the first element is gonna be the name of the website and all the other elements are going to be on the right hand side so in the row we're gonna create another row that'll hold the other elements so okay let's get into it so the first element that I'm going to do is I'm going to create a row I'll give it a children and then the children what I'm going to do is I'm going to add text and in the text I'll add the simple text of retro portal studio and for the style and for this style I'm a textile and in the textile I'm gonna add font weights that I'm gonna keep it at bold font-weight:bold and the color of the fonts I'll keep at colors daughter white and the font size and for the phone so I'll keep it at 30 it's just a guess and also after the text I also need to add another row to handle the other elements of the nav bar that are these four elements so I'm also going to keep them in a row so for this row I'm going to add children and I'll add a simple text and okay so for the texts I'm an at home and I like style and for the style or at a text style Texas style color calm coloration color start white okay so have the single text here and I'm gonna add another text coma out of the text and coma of the text and I think we have three buttons here okay we have three home about us in portfolio I'll name this about us us and another one that is portfolio and let's run this project right now but I don't really have this mobile navbar so we'll just create an empty class right now we'll name it stateless widget and create it as mobile and that bar and we don't really need this constructor and for the children I'm gonna key to keep it empty for now so in the main dart file I'm just gonna add in the columns I'll add children and the children I'm gonna add this nav bar now bar okay so right now if I run this project let me remove this extra code don't really like this one and what we need to do is we need to go to the terminal and press R to refresh the code perform hot restart and you can see it'll take a bit of time it's really in the development phase right now and you can see that we have this nice gradient here plus okay plus we have the text but right now the text that we have here is really in a congested way we want the other items to be on the right-hand side and the retro portal studio to be on the left-hand side so for that or what we can do is we can give constraints to the container we can go to the nav bar and in the nav bar what we can do now is for the desktop nav bar we can add constraints to the container and in the container what I will do is I'll add a box constraints and I'll give max width to 1200 and for the row that we have here is al-amin axis alignment sorry main axis alignment main axis alignment dot space between so if I go to the terminal on right now and first R we can see okay so we have this retro portal studio on the left hand side and all the other elements on the right hand side but there is not really any space between the elements themselves so for adding the space what I will do right now is I'll add a simple sized box sized box box okay and in the sized box I'm going to add a width off let's say 10 I guess 10 will be fine no I'll just keep it at 30 10 will be 2 less , and I need the space sized box between the other two elements and also after the text to add the button sorry ok so right now if I run the app I'll press R and go to the browser and you can see that we have nice little space between the elements and also the elements the retro portal studio is really touching these signs of the signs of the page so we don't really want that so for that what I think we should do is we should go to the desktop nav bar and we should cover the container with a new padding and for the padding right now I'll just go up here and for the padding what I'm going to do is I'm going to add ads and sets symmetric and for the symmetric I'll add a vertical of 20 I guess and for the horizontal I'll add at 40 let's say and I'll just run the code again press R and load and you can see that we have nice little space here to keep the elements separated and after the portfolio what we need to do is we need to add a button to you for the get started button right here so for that I'm gonna add a material button so after the sized box what I can do now is I can add a material 1 material materi all button and in the material button what I'll do is I'll add a color of colors dot what color do we need here is it's reddish pink yeah I'll just add pink colors dark pink yeah it's pink and for the shape I'll add rounded rectangle quarter and for the poorer I'll pass in the border radius that is gonna be a border radius dot all and for the radius all paths radius dot circular and for that I'll just pass 15.0 let's say let's say twenty point zero right now and okay so after the shape what I need to do is I need to add an on pressed we'll just keep it empty right now and after the on pressed I'll add a child to add the text to it and for the text I'll just paste in and get started like it's on the page and for the style I'll add a text style and I'll pass in the color that is color start white okay I need to refresh the page terminal refresh and okay we have this getting get started here but I think the button is too round but it's fine okay we're just creating a demo right now but the problem arises when we go close okay we have the responsive navbar we need to also add the mobile in that bar okay so what we can do for that is so the way we're approaching for the things is we have this main nav bar class that is giving you a layout filter which gives up the which gives us the context and the constraints and depending upon the constraints we check for the max width and depending upon that we either return a desktop navbar or a mobile app bar so right now we have the desktop Network created what we also need to do is we also need to give it a mobile in that bar so as you can see right now for the desktop nav bar we have the elements laid out in a horizontal row but obviously when we shrink the screen we don't really have that we have that area to display this type of horizontal row so what we'll do is we'll just ship the elements below the title okay so for that we're gonna use a column so when I come to this mobile in that bar what I'm gonna do is I'm just gonna in the container itself what I'm gonna do is I'm going to add child and for this child I'll add a column and for the column I'll add a text like we did in the previous class so okay so what I'll do is I'll just take the elements I won't really type them again I'll just take the elements from this here here up till the budget I think and I'll pass it here let's say okay so everything is working fine we have the widget here so okay so let's just run it and see what happens I'll just press R and then the mobile in that bar when we shift down yes we have the elements here so one more thing that we need to do is in the case of mobile we don't really want this get started here I'll just remove this button from the mobile navbar class and I'll just shift the elements in the center so for that what I need to do is I need to go to this material button and just remove it here completely like what the sine sized box also and in the row what I need to do is I need to add me axis alignment and for the main axis alignment Center and now when I press the R button here you can see that the elements are in the center but they don't really have a padding so I'll just add it add some padding to the row I'll just wrap the row with some padding and the padding I'll just increase it to ten so let's keep it twelve and when I run the code again okay so we have nice little padding here but we also need to add some padding to the column itself and in the container okay okay I'll we have the padding here we and I need to add the padding to this also so I'll add some padding here I'll copy the same edge in sets cons to edge in sets everything from here we can copy and paste that here so we're doing this in a sloppy way what we could have done is we could have added this here below the layout builder so just don't worry about it let me just refresh the page and we can see that we have nice little menu here as you can see when we shift from desktop to mobile we have this responsive UI okay so the first thing that I think we should do is we should change the font we have a separate font different font here and right now I have 10 times new roman' so I don't really like that so let me take new fonts the first thing that I'll do well I'll create a new assets file here not in the Lib folder I'll go the main project directory I'll create new assets folder here in the assets what I'm going to do is I'm going to create a new folder I'll call it fonts and for the fonts I'll just go here to my desktop and I'll just copy the fonts that I have I think we should use monster right I'll copy that I'll come here I'll reveal in Explorer and the fallen soldiers pasting and also with the phones I think I should also create a new directory I should create a new directory I'll call this images and I'll copy the images that I have here on the desktop I'll take the images I'll take him here and come here and paste them here okay so we have these set up I have two fonts in the fonts directory and images in the images directory so I'll just go to the pub Specter demo file and just uncomment these lines for the phones I'm going to do is I'm just going to uncomment those and for the fonts I'll just name is Montserrat that is the font total are 80 Montserrat and and in the fonts I have is assets slash phones slash below CDF Montserrat slash regular that is the regular font okay bold one I'll add the bold one first and I'll just copy the same line and I'll paste it here regular and let me check the Spelling's again Montserrat bold and Montserrat auricular in the fonts directory and also we need to do is we need to add the image to the images directory so let the packages get upgraded and let me go up in the assets I'll just uncomment this okay so in the assets what I need to do is let me check this facing okay the spacing was a bit off I don't know why they keep it this way but it's really stressing and what I will do is I'll just pass in the path assets slash images slash add the path that its logo dot PNG I think it is logo dot PNG and for the second path I need to put a PNG here look at PNG and LP underscore image dr.p she okay so we have the assets file here let the package is upgrade and let's hope it works I'll just close the close the pub spec dot EML file and I don't really need the logo by the way I have added the text here so I'll just keep it for the sake of it and what we can do now is we can add we can go to the main file and we can add this to the team data I'll just add font family and for the font family I'll add Montserrat let's see if it works let's just refresh the page and yeah you can see that the fonts changed so it's you're looking really cool right now fine so the upper portion of the website is complete we have this nice-looking navbar here that is completely responsive you can add more effects to this but I'm just keeping this short for the tutorial purposes and let's start with the bottom portion ok so right now the problem that we have is we have this extra white space right here and the problem that I think that is is we have this in the nav bar we have added this 1200 here for the box contents that I don't think is working in our favor so I'll just remove this line for now and I'll just reset the page and okay so yeah the problem is gone it was basically the constraints property that I used in the container for the nav bar so right now it's working completely fine and if I just decrease the size of the nav bar and yeah it works fine so there is no issue with that I'll just maximize the screen and what we need to do now is we need to create this bottom portion and we'll be using a column for the smaller devices and where I'll be using the row for the bigger devices so we'll be following a relatively similar approach for this will create a new directory and the Lib folder I'll just create a new folder I'll just landing page and in the landing page I'll just create a new file that is gold landing page door and this I'll just create a new stateless widget and I'll name it landing page and I also don't really require this and all this import material dot sorry material dot our file okay okay so what we need to do now is we need to look at the web page and we're gonna put the elements in a row when they're displayed in the displayed on the bigger device for example a PC or a laptop or something and we when we have the device and when we have a smaller device we're going to shift the elements in a column so basically we're gonna use a similar approach to the nav bar but we're gonna change a few things right now okay so what I'm going to do is I'm gonna go to this landing page I have this child element and in the child will use the same approach as we'll get this part here we'll get the layout builder we don't really need to write it again I'll just copy this and I'll just come here and paste this in the return but what I don't really need right now is I don't really need these constraints we'll check if it is more than eight hundred and for the smaller device we'll just use the else statement because we don't really need another any other thing right now because we only have two elements on the screen so okay so for the first element what I'll do is I'll just create a row if the if the device is a desktop or anything more than 800 pixels I'll just add a new row and in the row I'll add a mean axis alignment of main axis alignment dots Center to keep the elements in the center and for the children what I will do is I'll just create a new page children method okay because what I think right what I'm thinking right now is we only need same type of elements in both the webpages the only difference will be that in the column there will be upside down there will be in a there will be aligned vertically and for the bigger device there will be aligned in the horizontal way so we can pass the same area of elements to both the devices so we don't really need to create two separate classes for those so I'm just going to create this new method that is the payer page children here and also here I'm gonna pass the same method page children okay and now what we're gonna do is we're gonna Co come up here and create this new method that is gonna return a list of widget and I'm going to name it page children and okay so it's gonna return a list of widget that is going to contain the first element of container and in the container what I'll do is I'll create a new child of column column so right now I'm just creating this left-hand portion of the website that says website developers and this text and this button so I'll just minimize the code I'll go to this column and I'll add the cross as a across axis alignment to keep everything aligned at the left that is cross axis alignment start and here I'll add children the first element that is going to be a text and for the textile add a website slash and developers to keep the developer developers were on the next line I'll add a new style here and for this trial I'm going to add a new text style and for the Texas style I think I'll need a font weight that'll keep it fun wait to bolt and font size to 50 I think 50/50 I think 40 would be fine 40 and we also need the color to be white color to the color start white I think that's gonna be fine and also we need some text below it let's add text and let's see what the text is it is we have taken each and every project handed over to us okay we have taking each and every thoughts project handed over to us as a challenge which has helped us achieve [Applause] chief a high project success rate o project success rate yeah it was a tedious thing copping this line but yeah that's fine I'll add a new style and the style I'll add a new text style and the text style I'm going to add a pause the font okay well it can pass the font size or keep it at 16.0 and the color and color is Don white so at this point I think it should look fine all we also need to add the landing page there and we have not yet I think the function name is different page children okay I don't really need this here I need to add a column column and column for the children I'll add this metric sorry it was my bad and for the landing page I'll add this here in the main page I'll add the landing page and let's okay we have the error here I need to pass in a semicolon for the method and I'll just press R and start the app it's gonna take a bit of time okay so we have the text aligned to the left we have not yet added the second element to the page so let's do that first let's add another element and the first thing that I have in mind is I need to add a bit of padding to this text so what I will do is I'll just wrap this text with a new padding with a new padding I'll just add a bit of symmetrical padding to it symmetrical and we only need to add a vertical padding that is gonna be let's keep it 20 and we also need to add a button so I'll just create a new material button material button and for the button what I think we should do is we should add a color colors don't white and other than this I'll add a shape that we used there we used a rounded rectangle border and for the border radius I'll add border radius dot all and for the radius it's a circular we'll add it at let's say 20 point zero yeah it's gonna be fine and we'll add a simple on pressed to add the ripple effect and for the child I'll add new text that is gonna be our packages I think this was a text there or packages yeah and for the text what I can do is I can add a new style and for this time I'll add text style I'll add a new color that is going to be colors don't rent okay this is looking fine let me just run the page I'll run the pads again and we have this our packages button here okay so I also need to add a bit of padding to this so what I will do is I'll just go to this text and I'll just wrap it with a new padding and for the padding I also need to give it some a trickle I'll just add some vertical and horizontal padding I'll just keep the vertical to 20.0 and the horizontal to 40.0 okay and also okay let's just start with this let's reload the page and yeah it's looking fine we have a bit of less bezels here but it also it also looks good so what we need to do now is we need to add the image and for that what we can do is other than the column that we have added it ends here what we can do is we can also add a new image and for that I'm gonna call image assets and from the assets I'm gonna pass the path let's check what the path was I think it was assets it's drawing from assets assets /i wishes /lp underscore images dot PNG I think this is it let's see what the air is here image stuff as sets oh sorry [Music] let's see what the errors in the container I don't really need to add it in the container I need to add it to okay we need to add it here okay so for the image what I can do is let's let's just run the code right now I'll just run it and okay so there is some problem with the naming got the asset file as I can think of it so because the the page that we have loaded here is not really showing the image and you can see that there is some black shadow there and also there is an error that the image cannot be loaded let me just give a width and height here let me just give some width and we'll just keep it with that 400 for now and height to 400 we won't use this width and height for the final one because we need to create that responsive okay so let me see what the hell is going on here so we have this image here and we also need to give some width to the other container that is here for this container I'll add a new width so what I will do right now is I'll just go to the page children and depending upon the constraints I'll give up with to the page children widget here so what I'll do is I'll pass in constraints dot biggest contained constraint start biggest dot width and for the row we'll just keep it a half so I'll just passing by two and when we go here I'll just pass in constraints that biggest dot with because for the column and the column will be used when we are on the small device so we want the image to take the full device width with some padding of course and for the row we want the image to take half the place okay as you can see the image takes half the page and the text takes half the page also so we we will what we'll do here is I'll just add a double to the arguments double what and for the container I'll pass the same width and for the image I'll just pass in the same width and I won't pass the height of course because it will take that automatically I'll just refresh the page and yeah the image is not being loaded and let will look at the image problem in some time I'll just add some padding to the landing page I'll just go to the landing page sure or the main door file and in the landing page I'll just wrap this landing page with the new padding we'll just keep it symmetrical symmetrical and for the portico I'll add vertical I'll add a 20-point zero and for the horizontal I'll add 40 point zero like we do in most cases for this website I'll just refresh the page and yeah we have nice little padding here so we need to do something about the image because the image is not being loaded from the assets and let's see what we can do okay so let me just take this logo example for now let me just to replace the image I think it should work I'll just pass in the logo dot PNG and if it doesn't work there is some problem and I perform the hot restart and the logo is working fine so let me just put in the other one they passing LP underscore what is the named LP underscore image dot PNG and I'll just refresh it again and yet this time it works so so okay the image is working now what we need to do now is we need to fix the scroll for this page because the page is not scrolling right now so what I'll do for that is I'll just go to the main to our file and in the column I'll just wrap this column with a new widget that is going to be single child scroll view single child scroll view and for the child I'm going to add this column I'll just refresh that and see what happens and yeah we're having this nice looking page we have a few texts here with the heading a text and a button and we have a nice navbar and the image so when I just shrink the page to come here okay so we need to add some padding to the image from the top so for that what I'm gonna do is I'm just gonna go to the landing page for the image I'll just wrap that with a new padding and for the padding I'll add symmetrical and for the symmetrical I'm going to add a working padding that is gonna be a 40.0 let's take a look at it I'll just refresh that and okay it's looking good I think 40 is a bit too much I'll just add 20 I'll just refresh the page again and yeah it's look it looks fine and when I shrink the page there is enough distance between those I can also add some distance some margin to this our packages button but you get the point so basically flutter is going at a rapid pace and we can hope to see major improvements in the flutter web SDK in the coming year and there are some minor drawbacks in the flutter web SDK this for example if you click the refresh button it takes a bit of time to load itself and when it loads itself it works fine and moreover it is currently supported in Chrome it's in Chrome only like it can work on the other browsers also but the major support is for Chrome right now so okay so I hope you liked this tutorial and if you want to learn much about flutter you can check out other videos on my channel and if you have suggestions for new videos please hit the like button for this video and leave the leave your suggestions in the comment section below I'll be going through the comments and replying to those who have any questions so thank you for watching see you next time peace

Channel: RetroPortal Studio

Views: 163,018

Keywords: flutter web, flutter for web, flutter web app, flutter web tutorial, flutter web development, flutter, flutter tutorial, flutter for web development, flutter for web tutorial, flutter ui, flutter app tutorial, flutter app development, flutter responsive ui, google flutter, google flutter tutorial, flutter ui design, flutter responsive design, flutter sdk, flutter tutorial for beginners, flutter tutorial vscode

Id: rpkKYQCioW0

Length: 42min 56sec (2576 seconds)

Published: Fri Nov 08 2019