[Part 2] Flutter Web Tutorial - Build Portfolio Website in Flutter #flutterweb

now we can start with our main section I think it's a good idea to take a look at the figma design so that we can visualize what we are going to do with this main section so I'm going to open up uh figma design here so here as you can see uh this is the main section of our website and it has a top nail bar or you can see header with a bunch of buttons and logo and here we have button and text and on the right side we have an image so this is how how our website is going to look like on desktop and on mobile it will look something like this okay as you can see uh we will remove all of the Nar buttons and put it as a sidebar basically when this button is pressed it should open up the sidebar uh with the with our text buttons here or Nar buttons all right uh another thing if you notice it we have uh a bunch of colors that are consistent or basically we have brand colors we are going to Define all of these colors in a separate class as well so that we can uh use them whenever we need them we don't have to type them out every time we need it okay so basically let's start with that color uh C custom color class so I'm going to come to this uh constants folder and inside here I'll create a new file and the name of the file is colors. Dart and here I will Define all of the colors as a custom class I already defined it here I'll copy paste it so that we can actually speed it up so as you can see we have custom color class uh with a with the number of colors as static con values whenever we need them we can actually access this custom color class so I'm going to save it and I'll come to this homepage uh file again and first of all let's actually Define our scaffold background color so for that I'll use that background color property and I can get my custom color class and as you can see all of our uh colors are accessible I'm going to use this scaold PG color okay if I save it you can see our scold background color changed to this color all right so now we can move down here and we can start coding our header or top nevar widget so first of all let's actually Define our CH child property and it's going to be row if you remember uh we had we have a bunch of text buttons and logo that are positioned in a row so we're going to use this row widget for that so the first one is logo and it will be text you can actually use image or anything you want here uh for your website's logo I'm going to use just simple text with my short name and the rest of them will be uh a text buttons text button so for now we can say just like this uh empty method and here for this text and the text for it let's say I don't know button for now all right not that button something like this so if I save it now as you can see we have a logo and button let's actually put position them in a correct way so first of all I want to use a spacer here so that we can separate our logo and text and Nar text buttons so I'll create a bunch of buttons that's why I'm going to use for Loop here and let's make it I uh equal to zero and I is less than let's say five and i++ all right if I save it now we should have a bunch of text buttons and a logo you can see it's kind of getting uh cleaner a little bit and then uh we can actually give this a little bit of decoration so that we can position it up here and also give that some border radius and gradient background color all right let's start with that so here I'm going to use decoration property of container and for that I'll use box decoration and first of all for the Box decoration we are going to use linear uh gradient gradient property and that will will be linear gradient all right just like that linear gradient takes colors and the first color will be colors do transparent okay so the next one will be our custom color and custom color BG light one so if I save it as you can see here this is uh little bit kind of bigger the height is quite big so we are going to change the height as well so for now because it's defined as 500 and then the next one for this uh we will use border radius okay border radius for Border radius we are going to use uh border radius circular and it will be 100 so we're going to make it as rounded as possible and we save it and actually let's change the height as well it's going to be 60 you can see it's actually coming together now we have our uh header up up there with the proper height let's actually give this some margin as well for margin let's use Edge insets let's use symmetric for the vertical it can be 10 and for horizontal we can give uh probably 20 I think 20 should be good and let's save it okay now it's coming together now you can see here uh we have a little bit of uh lighter color on the right side and we have no color on on the left side now let's give our uh nbar buttons a little bit more space between them so for that we can come down here we can actually wrap our text button with a padding I'm going to use padding and for it I think I can give only uh padding of right so it should be probably uh 20 I think 20 should be good if I save it now our buttons are separated a little bit uh with more space now let's style our logo and this Nar buttons as well with their proper uh text content so for that I'm going to come to this constants uh folder and inside here I'll create a new uh file with the name of nav items okay and I'll say Dart and here I'll Define all the text uh all the texts of each button okay so I'm I'm going to copy paste uh the one I already created here you can see this is n titles list and it has all the uh text for our buttons I will save it and I come to this homepage. Dart file again and here I come down and instead of this uh five I'm going to uh use that nav titles list and I'll use the length of it okay basically it will be um that uh it will create that number number of um text buttons uh as this n titles and I will use use it here and for it I will use I if I save it now we should have our uh buttons with their corresponding text so you can see here and now let's actually change the colors of uh each button because we don't want this blue color we want white and we'll come here we change uh we actually set some style to our text okay and style and it will be text style and we are going to change the font size first and the font size will be uh 16 and we will give some font weight as well for the font weight we can use Font weight I think 500 should be good and for the last one it will be color so we are going to use our custom color and it will be uh white primary okay okay and if I save it okay now everything is actually coming together except this logo right so let's actually style this logo as well let's give this uh style some text style and style property we set text style and first of all let's give this font size for the font size we're going to use 22 I think 22 should be good and the next one will be font weight we want this to be as bald as possible so we can use just Bold and the next one we will use decoration because I want to put some underline uh under this logo text so we can use text text decoration and for it I can use underline and the last one will be color for the color I will use custom color again and I will use secondary yellow or yellow secondary all right something like this so now if I save it now our uh logo and all of the buttons are styled properly

Channel: Shohruh AK

Views: 1,524

Keywords: flutter, flutter dev, coding, programming, mobile development, android app, ios app, web app, web development, frontend developper, mobile applications, flutter coding, how to code, how to create flutter, flutter widget, flutter functions, cross-platform application, flutter website, javascript, html, css, python, docker, react js, dart, dart and flutter, deploy flutter, flutter google play, developper life, Shohruh AK, shoha dev

Id: SCEU5R2vUUA

Length: 9min 39sec (579 seconds)

Published: Sat Nov 18 2023