Build Flutter Web Portfolio - Responsive Flutter Website Tutorial #flutterweb

hey what's going on guys welcome to another tutorial in this tutorial we are building a portfolio website using flutter so this is our portfolio website and we are building this from scratch in this tutorial so as you can see this is how it looks on desktop and for mobile it will look a little bit different basically our portfolio website is fully responsive if you check it on mobile it will work just fine without any overflow issues and on desktop it works just fine as well so regard regardless of the window width it will work uh without any overflow issues so basically on any device so as you can see let's actually check out uh the desktop version first so we have our some nailbar buttons uh Each of which corresponds to the sections we have uh created here so this is skill section and project section which uh where we have work projects and hobby projects and as you can see here we have uh a card per project and on each card we have these small buttons as well so basically these buttons uh when you press on them they will open uh the the actual project on Play store app store or on the web based on the icon uh that is visible on the card okay for example we can actually tap on any of the uh projects let's open our Play Store application so it will open the Play Store on the web on the new tab and you can see this is the actual project I created so I can close it and this is the project section so Bas and we have here contact Section as well where we have uh a form with name and email and you can type some message and tap on the getting Touch button and it should send an email to the email you specify so the logic for this form or the backand for this form is not created so if you want that to be created you can leave a comment in the comment section and asking me to create a dedicated video for this uh forums backand logic okay so I I'll I'll try to create a new video based on the comments all right right so now here we have the some Social account buttons as well so basically for GitHub uh for LinkedIn Facebook Instagram and telegram so if you put your uh SNS links uh and when someone Taps on them or press on the icon it will open a new tab and open your Social account okay so this is how it looks on uh desktop uh we can go to any section by tapping on the N bar button as well so if we actually change the width of the window it will change the layout basically now it changed to uh a mobile version of our portfolio so instead of uh a number of Nar buttons we have one button which opens a sidebar in which we placed all of our uh nabar buttons okay so basically these nabar buttons Works uh the same as the desktop version okay when we tap on it it will scroll down to that section okay so this is how it looks on mobile and everything works just like desktop version okay in this tutorial we are building this from scratch if you want to follow along with me let's get started first of all let's open up our terminal and create a flut project inside our desired folder so I want to change current directory to desktop directory because that's where I want to create this project let's run from FL create command line with the name of the project the name would be my portfolio just simple name portfolio you can name it whatever you want I went for this simple name let's run it and wait a second until it creates the default flutter project all right the project has been created we can change that directory to this newly created uh project directory with this code. command line I can open this project inside vs code so basically open your favorite code editor with this project all right so if I press enter it should open the project on vs code now the project is open let me make this a little bit bigger so that you can see it easily all right now let's go to this lip folder and inside this lip folder we have main. Dart file where we have uh the usual source code that comes with uh default flutter project that's for counter app right so most of the code is not needed for us we can get rid of them so we don't need this my homepage State full widget we can remove from this point till all the way down all right so and this my homepage that no longer exists let's get rid of that let's get rid of all of the comments and we don't need this theme data as well because we want to have our own theme later let's remove this comment and now we have a bare minimum code for flut project so that is main function that's an entry point function for our flutter app that runs my app and my app is a state list widget which has a material app that's being returned from it with a title and the home property that is empty FAL first of all let's actually change this uh title to our name you can uh change it to anything you want I want to uh go for my name so now when you create a project It's always important to have some structure in your mind and apply that structure to your project if you have a good structure it's always easy to maintain your code okay that's what what we want to do um as a first thing so first of all let's go to this lip folder and inside this lip folder we want to create some uh folders that are needed for our project structure or that is specific to this um project structure uh the first one will be Pages where we want to put our Pages uh code okay and the next one inside this lip folder again will be widgets uh inside this widgets folder we want to actually divide our big widgets into smaller Widgets or big components into smaller components and put them inside this widgets folder inside different files all right and the next one will be constants this constants folder will contain some constant values for our project like um some constant string or some URLs and things like that and the next one will be Styles so this Styles folder will have some decoration or styles for our specific widgets okay that's what we want so now we have our project structure set up at least uh minimum project structure setup uh as we as we go along we might want to create some more folders depending on uh the structure we will go together okay now let's create our homepage so we go to this uh Pages folder and inside this Pages folder let's create a new file the name of the file is Page uh page not page uh home page. Dart okay so here inside this file let's create a state full widget uh State full widget and the name of the widget will be home page okay I save it and I come to this to this main Dart file and here to this home property I want to assign this newly created widget so that is home uh oops homepage okay just like this and this is actually const can make it const and as you can see here it already imported uh the vs code automatically imported this uh homepage widget for me I can save it and I can come to this homepage file again and instead of this placeholder let's return scaffold because we want to have all the default uh decorations or Styles or widgets of flut okay this body and for the body for now I want to show some text so that we can have something child and and the text text will be home just like this we can save it and let's go to this main. Dart file and let's change this to okay I think here okay it's already Chrome I can run it and let's actually see what we have so far okay our project uh our application is running as you can see we have this white background with the uh text home at the center okay so now let's actually change some of the properties of this material app uh first of all I want to get rid of this debug banner up there okay I don't want that so that is debug show check mode Banner we can set this to false and if I save it this should be gone as you can see here and let's give this theme as well I want to have dark theme for this app so for that we can use theme data and theme data dark and we want to modify this uh for our specific use case as we code along okay if I save it now we should have a dark background with white text at the center all right as you can see just like this so now we can close this main. Dart file for now and we can come to our homepage widget that's a stateful widget and we can remove this Center and instead of that let's let's actually use a list list view widget because we want to uh put multiple widgets inside this list widget and make it scrollable so list we widget have uh has children property which takes multiple widgets so inside this children widget we want to put uh all the widgets for our different sections basically first of all we want to divide our uh portfolio page into uh multiple sections okay so the first one will be Main and here for the main I want to create a container container and let's give it a size let's make it uh 500 and for the width let's actually make it as big as big as possible and for this let's give this color colors of probably blue gray okay and for direction of this list view let's make this um vertical by default list view uh has a horizontal Direction okay we want to change that scroll direction to uh vertical Direction just like this I can save it if I save it I should have one container um with that color we Define it this for this main section as you can see just like this so let's actually copy paste this container with that comment and create all of our sections so that we can visualize uh what kind of sections we will have in this project so the second one instead of main we want to make this skills section and let's paste again this one is Project section Pro okay I spelled it wrong projects just like this and the next one is contact contact Section contact and the last one is footer okay footer section if I save it all of our sections is the same color so just like this let's actually make it kind of distinguishable I want to remove the color for the first section and I will leave the color of the second section as it is and remove next one and leave it as it is the next one and remove the last one as well if I save it now we should have sections with different colors okay just like this so now our sections has been created we can code along one by one 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 we are going to do with this main section so I'm going to open up uh figment 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 REM 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 BG color okay if I say save it you can see our scaffold 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 l log go 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 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 n Bar 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 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 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 m 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 lighter color on the right side and we have no color 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 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 button 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 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 texts 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 of um text buttons uh as these 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 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 bald 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 now we are pretty much done with our header on desktop view but if we check it on mobile it will look not good so let's actually check it we can come here more tools developer tools and here you can see there's already issue when the width of the window gets smaller and at at some point it will actually overflow and it will be something like this there's an issue here so we can check it like this so if we change it you can see on mobile it will look something like this we don't want that we want to show a different design on mobile if we check it here on figma I created a separate design uh for our web portfolio and this should this is going to be what we will show on mobile so it will be this will be for desktop and this will be for mobile all right I'll close it and I can close close this one as well and we can make this smaller again and now let's actually start with uh cleaning up our code with a little bit of modification okay so I'll actually copy this container all the way down here and I copy it and remove it actually or cut it and I'll come here to widgets folder and here I'll create a new file the name of the file will be header desktop and here I'll create a new new widget a stateless widget and the name of the widget will be header desktop okay and I'll rep replace this placeholder with our container that header all right now let's uh import our oops our missing components import it and we can remove this one all of red errors are gone let's actually remove this warnings as well because Dart is complaining about uh the Con making the values as const so we can change it not com but const and paste in front of these ones as well just like this and this spacer and then this text stle now we can come to this file uh we can get it this header desktop we can here instead of all of that code that are lying around uh kind of messy we can put it here just like this and we can actually import it all right now if I save it or reload it okay everything is the same and one more thing if you know uh if you actually visit a website usually when you tap on the logo of that website it actually reloads the page or goes to the top of the page that's what we want with our web portfolio as well all right that's why we'll come here header desktop and we will actually wrap our text widget this logo widget with gesture detector as well because we want to make that tapable can wrap it with Widget and it will be gesture detector and I will use ontap method of gesture detector for now it's just an empty method and actually let's get this logo and put it in a separate file as well because we want to reuse this logo uh on mobile version as well because it will be the same we're not going to change this that's why we can copy it or cut it I'll copy it and remove it and here I'll create a new file it will be uh site logo site logo. Dart and I'll create a new widget stateless widget and that will be site logo as you guessed it and we can actually remove it and paste our widget here let's import this custom color class and now we can have that uh ontap method as well we want to use that ontap for it uh we can say white call back and it will be ontap and for this we can use required not required we don't not we don't want that to be required this do on top we can make it nullable as well and put it here all right now we can come here header desktop and we can use that header not header but uh site logo site logo with that ontap method okay just like this now if I reload it nothing should change it should look the same okay now what we can do we can start coding our uh header for mobile version so here I will come and I'll actually comment this out for now and create a new widget and it is going to be another container okay first of all let's give it height and for the height I will make it a little bit smaller than then desktop version and for the margin I'll give margin of edge insets from left to right for the left it will be 40 for the top it will be five and for the right let's make this 20 and for the bottom it should be five as well and let's make this const and now now it's time to give this uh the child property of it and for the child it will be row because we're going to position two uh children or two widgets in a row and the first one will be site logo if you remember we already created a new widget for our site logo we can just use that we don't have to create a new uh similar widget and for the ontap method it will be empty for now and the next will be we'll have some spacer here and make this const and the next one will be icon button for the icon button uh the method will be empty for now and for the icon we can use icons. menu this menu should be not that uh menu and then if I actually save it okay things actually coming together so now let's make this one const and let's put a little bit of what is it let's actually give this decoration I want to make it little bit different than the figma design because it doesn't look that good I think instead of this uh figma design I want to give this decoration that is similar to uh our header on desktop version so there decoration and let's actually use the same decoration on our header desktop here for our header desktop it should be all right here I'll actually copy the whole box decoration copy or cut it and I'll come here inside this style I'll create a new uh file the the name of the file will be just style do Dart and here I'll create a new const and that will be K uh header let's say decoration something like this I think if I import it hopefully they should not be let's try to REM oops let's try to remove this and let's make this box decoration okay we need to import all of our colors all right now and I can actually use use this K header uh first of all inside here our header desktop and I'll import it and then I'll come here for this container as well I'll put it here and import it and if I actually reload it okay now it's little bit I think better let's give this little bit of size here so for it I can come here and use sized box not that sized box and the width should be 15 width of 15 not 16 15 and remove that and let's make this cons if I save it okay I think this is a little bit better now we can actually get this again uh get all of it copy remove or cut and come here to widgets we'll create a new file again header mobile. Dart and let's create a new widget say list widget and that will be header of mobile let's replace this placeholder with our own widget and let's import the mything components site logo and now let's have two methods first one vo call back and it will be on Logo Tab and the next one copy and paste it let's change this to uh on menu tab and we can use uh vs codes extension to put all of it okay you can see here and what I want to do I will come down here site logo for the site logo I can say on on Logo Tab and for this one I will use uh on menu tab let's remove this to get rid of the error and we can get this header mobile come to our homepage again and put it here just like this if we import it and if we reload the page all right now you can see we have our header but uh this icon call this menu uh button color is not what we want that's because we have our icon button that has onpressed me method with null value if we give this on menu tab uh it should be all right the color should be white now all right that's good so this menu uh on menu tab if you remember we use this on menu tab and we assigned that to this one icon button if this onpressed is null the color will be kind of of this button is disabled that's why the color is not uh White so that's it guys so this is our header mobile that is done let's give this one on Logo tap method as well because we want we are going to use it later now our header on mobile view is done as well but all of our nabar buttons are gone we want to show them on mobile view somehow as well right so basically what we want to do is when this menu button is pressed we want to show a sidebar or drawer that is what it's called in flut and show each nobar Button as list view on that sidebar so basically in flut uh we call it drawer and it's sidebar there are two sidebars one is uh right sidebar and the other is left sidebar so basically uh this scaffold has two properties for drawer if you use drawer this drawer if you assign a widget to this drawer it will open on the left side and if you make this end drawer and this end drawer uh is responsible for the sidebar on the right side all right so we are going to use this end drawer so for that flut has a drawer widget and we can use it for now it's empty we will actually style it and put some widgets inside it later so if you want to open a drawer or sidebar programmatically uh you want to use a key of scaffold so that's what we are going to do here first we will Define a key here and it will be scaffold key and we make it Global key and the type of the global key will be scaffold State okay scaffold State and now we will assign that key to this scaffold scaffold key now we can use this scaold and its state to open our drawer so we will come here on menu tab when this menu button is pressed this will be called so we are going to call that uh Open Drawer function inside this uh on menu tab uh function so scaffold key we want to get current state of it and it might be null that's why you you want to make it nullable so and then we want to open not drawer but the second method open and drawer all right what now whenever we press on this button it should call this function and open the drawer for us let's save it and try it now if I tap on this button it will open the drawer you can see we have a sidebar whenever we tap on it it will open if I tap here it will close all right so now we have our drawer uh and let's actually put all of the widgets we need inside this drawer first of all let's change the background color of this drawer for that we can use background color and we can use the same color as scaold okay if I save it and open it now the background change to our scaffold's background now the next one is uh drawer has a child property that takes a widget now we want to use list view for this because we want to uh put a number of widgets inside it uh so that we can show it as a list view so list view has children property and here we can put all the widgets we want that can be shown on the sidebar so first of all let's actually Define some icons for our nabar buttons because on the mobile we want to show some fancy uh Navar buttons that has icons as well so basically I already defined all the icons here I'll copy it and I come here to constants folder inside here we have NV items file and we already have uh Nev titles and we used it for our desktop header and for our mobile header we will use uh the same n titles and we want to use these icons as well I already created it so that you don't have uh we don't have to type it out together and I don't want you to watch me to type uh everything one by one so basically uh I can close this file and I can I can come here and we can Loop through each of our uh NV icons and show them on that sidebar so for that I will use for Loop because this is a list we can use for Loop inside this list and integer I equal to zero and I is less than nav icons length and then we will make i++ uh so once we increment it we can put all of our widgets or our widget inside and it will actually Loop through and show our widgets as a list here I want to use list style list style because this list style has a number of properties uh that is really good for our use case and it it comes with flour the first one is leading and you can assign any widget you want to this leading I want to use icon uh because we I want to actually display this icons uh here I can use icons this is a list and we want to uh access the the icon at at the current index all right and the next one is uh title and for the title we can use text widget and then for the title we can get our NV titles and we can get the current index all right so now if I save it and open our sidebar you can see this is a fancy uh icon and title together and this is uh coming from this list style widget all right now let's actually uh style our list Styles and put some other widgets we need for our sidebar so the first first of all what I want to do is uh to give this list style some padding for that we can actually come here and we can give content padding for the content padding I want to use Edge insets of symmetric and for the horizontal basically we just need horizontal uh I want to give just 30 all right if I save it and open it you can see we have some padding here so the next one is uh let's actually style our uh text or title for that we can use uh title style title text style and it will get text Style just like text and we can give uh color first and the color will be custom color uh of white primary and I want to make it bold font weight of um font weight let's make this 600 and then font size for the font size I want to use 16 okay let's make it 16 and we can actually make this const and we can make this one const as well so that we can get rid of dot complaining message and then what we want to do we want to use ontap me me of this this list style it already has that ontap method so we can come here and we can use that ontap and for now it's just empty method now if I save it now let's open it you can see our uh style our text is styled it so now what we want to do is to put some button that close the sidebar of course you can tap here and close it but it's not just a good idea to to leave it as it is uh because um for user experience it's it's best practice to put some closing Button as well okay that's what we want to do here so for that I'll come up here and before that list style we want to use another icon button first of all Let's uh give this onpressed for now it's just empty uh and then for the icon icon and then icons. close so let's put the comma there and then let's wrap this with a padding as well wrap it with padding for the padding I want to give a only uh left left of 20 and let's give some top as well for the top I want to give 20 and for the bottom 20 as well all right if I save it now let's open it you can see we have this button now when we press it it should it should close the sidebar so let's add the functionality and put this button here okay not at the center but here so for it we can actually wrap our widget with another widget that's a line uh let's do that first rrap it with Widget and align and for the alignment let's use alignment alignment do Center left all right and then if we save it and open the sidebar you can see it's coming together now all right the last thing is when we press it it should close the sidebar for it what we want to do is just uh come here on press and we want to use navigator navigator dot let's get the uh context okay Navigator off current context and then we can call the pop method and let's make this const as well do we have anything that's not const or should be const all right now with this method it should close our sidebar I save it and let's open the sidebar and if I press on it you can see it closed the sidebar if I open it and I close it and that's it now our drawer is done as well what we want to do is let's actually grab our drawer and put it in its own separate file because it's not a good idea to put all of our code like a spaghetti here all right that's why let's come here on drawer just above the body and let's come up here until the drawer and let's copy and remove it or cut it all right and here we will come down come to this widgets folder and we will create a new file and the name of the file will be drawer a drawer let's make it mobile because it's only for uh mobile view right Dart right and state list widget again and that will be uh mobile not drawer mobile let's say drawer mobile okay we will will replace this placeholder with our drawer widget let's get rid of uh all of the Errors By actually importing the components that are missing let's import them and then all of them are gone now we can get this thrower mobile and come here and actually uh import it import it and make this const and let's actually reload it okay now if we open it it should work the same as before just like this now we have both desktop and mobile version of our header widget but it's not responsive yet I mean when you change the window size it doesn't do anything it just shows this mobile uh version of our header widget because that's what we are doing here so what we want to do is based on this window width we want to show mobile or head desktop version of our header widget so to achieve that functionality we need to use a layout Builder widget which gives us screen size or window size information um that can be used to manipulate uh our UI all right so for that we can wrap our scaffold widget with that layout Builder widget so I can wrap my widget my scaffold with Builder and instead of this Builder I will use layout Builder all right this layout Builder has Builder property which passes us two parameters the first one is context and second one is uh constraints constraints all right constraints something like this so This constraints contains information about the screen size or this window size and we are going to use that to manipulate our UI so I come here and comment out this header desktop and I actually make it const and here I will uh use a condition if constraints I'll get the max uh width uh this will give us maximum width available in our uh window here because we are wrapping our scaffold basically this window uh this Windows Max width uh is equal to this Max width that's coming from constraints all right we're going to check that if that is bigger than or equal to 600 so this 600 will be our uh maximum uh or minimum desktop wi all right we are going to show this header desktop else if that's not the case we are going to show this header mobile right now if I save it and come here if I change the window size when I reach to to a certain point you can see uh we are seeing our desktop version of our header widget so if I make it small now we have mobile version desktop mobile something like this okay I found this 600 as the best fit uh for my preference so you can actually change it uh to any value you want okay so another thing I want to do here is this drawer mobile because we don't want to have this widget on desktop we only want to show this on mobile right that's why we can set a condition here as well so I'm going to use the same condition I'll just copy it if that let's check it here and drawer right uh this end drawer can take widget and that widget can be null as well and here I will put the condition constraints Max withd is if bigger than or equal to 600 I'll check it I'll use tary operator here and if that is the case if this is desktop this is saying if this is desktop I will use null I will assign null to this end drawer because I don't want any drawer to show up on desktop right so and else we can use this drawer mobile all right now if I save it nothing changes here because uh if if we press it it will show the drawer if we close it it's not going to be available here right so if we make it now that means we do not have uh this drawer we have no widget that is assigned to this end drawer and that means uh we we do not accidentally uh what is open the sidebar or drawer actually on flut you can in flut you can actually slide uh this side and you can uh get the sidebar open all right that's we want to prevent uh that from happening that's why I set a condition here all right so we can make this smaller again and here another thing we should do when we uh have this kind of things um this kind of uh what is it some harder coded value we want to put that hardcoded value in a variable we want to assign that to a certain variable and use that variable and that's a good practice because uh if you want to change that value in some place let's say if you want to change this um I mean glob let's say and then uh you need to change that value every in every place so that's why we can actually come here to constants folder and there we can create another file size. Dart you can name it whatever you want and here I will create a new const uh variable it's going to be double and I can name you can name it whatever you want I name it K do minan okay minan uh desktop uh let's say desktop not that desktop with and it's going to be uh 600 all right now we can use this variable every time we need them because actually we need this 600 value in in quite many places because we are making a website website a responsive right so that's why I will replace this 600 with that K uh main desktop width and I'll import that and I'll use the same thing here as well just like this all right now if we reload it we should have the same functionality as before you can see here it is working as before that's it all right now let's move on to the second part of our main section first of all let's take a look at our figma design here you can see we have this text and button on the left side and an image on the right side so we're going to create this part of our main section here we have uh one image file uh you can use any kind of image you want um that this is the image I want to put um on this part of our main section okay so let me close this first and here we need to first uh bring our assets inside our assets folder as you can see here I don't have an assets folder yet so I'm going to create that folder or direct so let's create the uh the assets folder just like this I'm I'm creating it uh inside the root of my project okay as you can see here now I need to bring my uh image file inside this folder okay so I already have that let me check it okay here I already have it I can just drag it and drop it inside this assets folder you can see this uh Avatar image flutter Avatar image so let me close it and now we need to specify a path to that file in our Pops speec yaml just open the pops speec yaml file and then you just here we have this uh assets section okay and here uh we can specify a path to that file so basically what I want to do I don't want to specify a path to that specific file but I want to specify the assets folder path and I will just put that slash this means everything in inside this uh every file inside this assets folder uh will be available whenever we want to use it inside of our project okay so assets and anything or everything inside it and I want to save it okay now we have saved it uh just make sure you you have uh the names match here assets and this assets okay otherwise uh it's not going to work okay let's close this pop SP file and let's close the sidebar as well here let's start creating our widgets first of all I want to create a container uh not with a capital uh container and inside this container I want to give this a child property and for the child property let's give this a row okay because uh we have uh two parts to that side action okay basically kind of side by side all right now uh the first part was text let's put that text for the text I already have the text here let me kind of copy it and paste it over there okay so just like that I put it right there and then this text uh should have a button right below it all right so for that we need to wrap this with a column so let's wrap it with column because we want to put another widget right below the text okay so for that one uh for this text uh we want to uh not for this text but for the button we want to use uh an elevated button okay elevated button and for the onpress right now it's just an empty method and for the child uh we will give this text and for the text the text should be get in touch okay this is the text so let's make this const as well just like that all right now let's put some commas here so that we have kind of proper styling or proper intent indentation so this is the column this is the text and button part as you can see here and right below this we are inside our row widget as you can see this is the children of it and here and just right below it I want to uh give this uh an image okay image. asset because we are kind of uh showing an image from our assets so for that I will I need to specify the whole uh the the the whole path to that file that is assets slash and my PL image no not image but Avatar okay that was avatar.png all right so for now this is it so actually now if I save it it's not going to show the image uh here because we need to kind of when we are building an application uh on uh using flatter web uh we need to kind of close or uh stop the application running application and re restart it again when we want to add new assets okay because it's not going to kind of uh bring the newly added assets uh while we are kind of debugging or while we are kind of running in debug mode Let's close it and now let's rerun it again so I'm going to uh press command shift and F5 that's on Mac okay it's going to kind of run the application or you can just come right here and main. dart and there uh you can tap on this uh run without debugging icon so it's going to start the application as well okay okay now our flutter application is up running so let's go to our homepage so here as you can see uh it should show the page right now all right now you can see we have some ISS issues uh because of the image being too big so let's first of all fix that okay so for it instead of giving this image a specific size let's make it Dynamic so for it I can just give a width and I'm going to use a screen width we have up here screen uh width and I'm going to uh set the size to the screen size divide by two okay basically half of off the screen WID so let's save it now okay you can see we have uh an image that's kind of smaller much smaller and it it fits here and there is no issue overflow issue so we have some text issue so we need to align stuff and we need to uh set some margin around this and stuff like that so first of all let's start by giving this container a margin so for that I can give this a margin and I'm going to uh give a edge insets symmetric and let's give this a horizontal so 20 should be good so let's make this const and let's give this container height and constraints as well okay so for the height I want to use a screen height so basically screen size height I'm going to set this to the screen height but but divide the by 1.2 so that's that and another issue we might have is when user kind of makes uh the browser height smaller just like this shrinking the browser height like this might have some issues uh what is it minimum height as well okay so let's give this constraints for the constraints uh we are going to use just a minan height okay for the minan height uh 350 should be good enough so that's it now it's not going to affect right now but it's just avoiding a potential issue overflow issue we might have okay now uh when I save it okay you can see we have this an image here and we have some space so we need to kind of align uh things a little bit okay so first of all to align everything at the center uh we need to give some uh we need to set an alignment of this row so for it let's set the main AIS alignment first and for that main AIS alignment not Center basically uh actually we need to give this space evenly because we want to put it kind of we need we need to put this uh one side around here and the other side around here so regardless of uh the screen width okay let's save it okay you can see it's right here and that one is right there all right now what we want to do is um to give some alignment to this one as well to text and Button as well because uh it's it's kind of now at the top okay we don't want that so for it we can just give this mainx alignment as well so for the main AIS alignment we will give this Center okay if we make it Center and if we save it now we have our text and button kind of aligned with the image right here all right now let's actually style our text a little bit so that it it has kind of a bigger font size and some little bit Bolder so for it we can use a style property of text and we use text Style just like that and first one that will be font size for the font size I'll set this to 30 because I want this to be kind of uh as big as possible uh and then uh let's give this font weight as well okay for the font weight I want to make the font weight of Bolt okay and the color is already white but instead of using a flatters um default white we want to use our own custom white okay that's why I want to use the color and custom col not not that I custom color not BG white BG light but white primary we have that color so now what we can do we can make this const okay let's save it and see how it looks okay now you can see we have a kind of big text that that's good and the next one we need to give this some text height as well because kind of it's small space so for it let's give this height and for the height I want to make this 1.5 let's see how it looks okay I think it looks better now and now we need some spacing uh below the text as well so for it we can just use a size box size box and for the white let's give uh this 15 okay and let's make this a const and let's save it and see how it looks okay this looks better and now the next one is I want to give uh this button some uh some width as well okay now because it's kind of small so let's wrap this elevated button with a size box and for the size box I want to give this a width and for the WID let's make this 200 and let's see how it looks oh I think yeah it's a little bit smaller let's let's check let's make this 250 and see how it looks I think yeah 250 is good so it's kind of aligned with the text so that's good now and now now let's actually try to see how it looks okay to check how it looks I think it's better now all right now we have a nice looking uh main section for the desktop version let's actually clean up our code a little bit so instead of putting all of this uh code right here I want to put it inside its own file and basically making a custom widget in another file so let's actually take this let's grab this just from the bottom part of it or from the end of it and let's select it and I want to cut this or copy and remove it and then I'll open here open the sidebar and inside this widgets folder I'll create a new file and the name of the file will be uh main desktop okay let's try that so main desktop. Dart all right now in inside this menu desktop let's create a stateless widget so the name of the widget will be main desktop as you might have guessed it and we can kind of paste all of our code right here and then as you can see we have a few errors uh basically screen width we don't have that so and the color as well let's kind of import our custom colors and we need to bring our screen uh size basically we have it right here we can copy it from there okay just like that let's copy it and then let's come to our main desktop file and put it right there all right now we have that as you can see just like that and we can copy paste it and make this screen height instead of that let's make this height and we can replace our where is that our screen width not screen width but where is that screen height with that screen height to make everything kind of consistent all right now we need to grab our widget and put it right here okay so basically we can import it once we import it as you can see we have our main desktop let's make this const and let's save it now you can see we have our uh main section that is just like before all right now let's create a mobile version of this part of our main section so first of all let's take a look at our figma design here as you can see I made little bit of adjustment here I uh put the uh the Avatar image at the top and put this text and button at the bottom because if the screen width is really small it was it didn't look good on mobile if you put them side by side that's why I put it here and put this down here so we're going to make our UI little bit similar to this one all right so let's close this and let's comment out our main desktop widget and here let's create a new container for our container let's give it a height so for the default height will be uh we are going to set it to screen height and we need to give this some constraints as well because user users uh user mobile devices height might be really small and in that case we might have some overflow issue or if user is opening the uh website on desktop and shrinking the height of it uh something like this we might have an issue on uh mobile view of our website all right that's why we need to give it some constraints basically uh minimum height so box constraints let's give this minan height and for the minan height I found 560 to be uh kind of a good fit so you can change it to your liking if you don't want this uh size and then let's actually give uh this child widget for the child we are going to use column uh because I showed you uh our IM image Avatar image and text button uh will be shown kind of in a column view so for Children First it will be Avatar image and this is going to be intro text and then uh BTN all right so first of all let's come here let's create image from asset and for that I will copy the image path from here the same one I don't want to make a typo and not our image not to show up something like this and for intro text let's put it actually for intro text and button uh we can use the same widget and adjust some values of it let's come here let's copy all of this all right I'll come here I'll copy getting Touch button all of it and all the way up here on until our intro message okay I copy it and I come to my homepage again and I paste it just below uh our Avatar image just like that okay you can see everything is the same and let's try to reload it and see what we have all right you can see here we have this image and text button so let's adjust the values to our specific use case first of all let's give this uh width so for the width uh I want to set it to screen width all right screen width and then for this text let's make this font size 24 instead of 30 because 30 is really big so 24 should be good and for this button uh we want to match it uh with the width of our text intro text now if I reload it okay now the text is smaller and the button is a little bit smaller all right I think we can make this probably 90 190 let's reload it and see how it looks okay not bad now uh if you take a look at a figma design you can see that my image has some uh overlay on top of it kind of uh the image looks like it has an opacity that's what we want on our website as well okay let's close this figma and here for that we can actually man manipulate a widget using Shadow mask widget in flatter so for it we need to re uh wrap our widget with a shedder mask and this shedder mask has a callback uh which actually accepts a shedder so we can uh create that shedder call back and this shedder callback gives us some bounds uh that has information you need if you want uh more advanced manipulation uh of the widget all right so it will uh not return it will receive oops it will receive shatter so we want to create a shatter from linear gradient linear gradient linear gradient and this linear gradient takes colors for the colors I already have colors defined so I'm going to copy uh those colors here and put them inside this list just like that all right as you can see we have error because if you how over it it will receive shatter but our here we are actually returning linear gradient so from linear gradient you can create a shatter for that you need to uh use uh linear gradients method that is create shatter from that okay so for this create shatter uh for this RCT we can use bounds we can use the bounds that's coming from here now if we reload it now you can see we have this image with a lot of opacity okay we don't want this kind of opacity uh basically we can act you can actually uh change the blend mode and based on your uh widget or image manipulation so here for the blend mode of this shedder mask I want to use let's choose blend mode for the blend mode uh I want to use uh do Source aop all right this Source aop uh enables you manipulate enables you to manipulate the opacity of the widget uh in this case we have this image widget right if you want to learn about uh this shatter mask actually uh it's better to read some documentation and watch some tutorials I don't want to go into the details basically what we are doing here is trying to manipulate our image uh so that we can have some overlay on top top of it or you can say change the opacity of this image all right that's what we are doing here if I reload it we should have a proper image with opacity okay this is what we want here all right now if I make it smaller you can see here we have this um image that is responsive because we set the width of it to this screen width now let's uh position the widgets properly uh based on our figma design so first of all we come here to our column and we need to set main access alignment and cross aess alignment cross access alignment oops uh main access alignment it will be start and cross axis alignment for the cross AIS alignment uh we are going to oops cross let's change it cross axis alignment of start not stretch but start now uh if I reload it okay as you can see here our text and button is positioned at the left side and the image is at the center so here let's actually give this some uh margin so that we can actually uh separate the text from this Edge so let's come to here and let's give this Mar margin so Edge insets do symmetric let's give this symmetric horizontal for the horizontal I want to set it to 40 and for the vertical uh for the ver vertical let's make it 30 and let's make this const and then let's reload it okay so it's good now we have some spacing and I think we need to give little bit spacing between image and this text as well let's let's come down here uh just under the text this shedder mask widget we can use sized box oops sized box let's give this height for the height I think we can use just 30 30 should be good const and let's reload it okay now we have some spacing it looks good let's try to check it if it's working if we do not have any issue let's say okay now it's good if we make this bigger nothing changes you know why because uh we are not using any conditionals based on our screen screen size right like we did for our header let's do that first of all I want to clean up the Cod just let's grab our container with all of its child and let's grab it all the way up here and I will cut it or copy it and remove it and I'll come here inside this widget folder I will create a new file and this will be main of mobile. Dart and state list widget this will be main of mobile instead of this placeholder we are going to return our copied widget let's import all of our missing components and let's remove this and we need screen width here and Screen height okay again we will come here and let's actually copy all of it and we can paste it inside this build function just like before and we can come here and now we have this main desktop right so now we want to use conditional just we did for this header first of all we can actually copy this conditional if this is the case right if our uh Max width is equal to or bigger than minimum desktop WID then we will show main desktop let's make this const else if that's not the case we will show that Main Mobile all right and let's make this Con as well now if we reload it we should have mobile view now you can see we have mobile header and and uh mobile what is it this IM the mobile version of our main section in total if we change the size now you can see it's showing our desktop version if you make it small it changes it if you make it big it changes it just like that okay now I think we are pretty much done with our main sections UI we can move on to the other parts now let's move on to our skills section let's first take a quick look at uh our figma design so that we have an idea of what we are going to build so here you can see this is our uh skill section uh for our desktop version with a title and platforms and skills here on mobile uh we have uh the same thing uh but the layout is a little bit different we are going to change this layout uh modify it a little bit more while we are coding it because when the mobile window or Mobile screen is too small this layout this especially this grid layout is not going to fit uh to that that's why we need to modify it a little bit while we are coding it okay first we need to focus on desktop version and then we can move on to mobile version Let me close this figma and before we start skill section let's actually change something here I want to make it smaller and here on our sidebar we have these titles uh of our Nail Bar I want to change these two icons because they do not actually Define what these uh titles say all right that that's why I want to come to this NAB items file and inside here we have these two icons and I want to change the first one to hand what is that it should be handyman not handy but handyman uh outlined handyman outlined and the next one this backand I want to change this to apps and if I save it now if I open sidebar now this icons actually better Define what this titles say all right that's it let's change it to the previous uh size now I can close this NB items now let's create let's actually bring our assets into our assets folder and then Define some of our constant uh values we need for this skills section first of all I'll start with uh assets uh and I want to actually open my folder here I already have the assets should be down here let me open it you can see uh I have all the assets here I want to uh take them and drag and drop it inside that assets okay let's replace the previous ones okay you can see uh all of my uh assets are defined here you can see these are just icons uh for our uh skills section okay I will actually include the link to these icons in the description uh you can get it from there if you want to use them or else you can use your own icons or images all right and now we need to actually uh stop it and run the app again because we actually made big change to this assets folder and that might not they might not be kind of uh show up on our website that's why we need to rerun our app so let's rerun it okay so now I want to Define some of our constant values we need for this section that's why I will come to this constants folder and here I'll create a new file and the name of the file will be uh skill items. Dart and here I'll actually copy and paste the list of items I already defin it uh I copy them and bring them here and put it just like that paste it here you can see I have platform items and those are Android uh web iOS and desktop and these are list of maps which has a path to uh the image that's proper that the corresponding image icon of that platform and the title uh of that platform okay we're going to Loop through that and um show it on the screen and for the next list uh this is skill items list and it has also it it the structure of this is also the same and here we have uh the icon of the language uh that's flutter Dart HTML 5 CSS 3 and and and the others so and also the title which is flutter so we're going to Loop through that and show it on the screen um instead of typing them out on our code we can just uh use these variables and loop through them to show them all right now I save it and close this one now we can come here and start our uh skills section for the child property of this container we can use column because our section has title and the rest of the content Bel below the title all right so for the child Let's uh give it column so column has children property and for the children the first one will be title okay and the second one will be our uh platforms and skills so first of all let's give title to this section and that will be text widget for the text widget uh the string will be uh what I can do and let's give this some styling as well folder styling uh we can have our text style let's first of all give this a font size for the font size I want to make this 24 and font weight I want to make this bolt for for font weight we can uh make this Bol and the last one let's give this color as well because uh our title should be the color of our brand that is our primary white color Okay custom color and we have this white primary color let's give this comma and if I save it okay here we have our section with its Pro uh with with its title so let's actually style this section we do not want this color and we want to give this some padding so first of all let's remove this height because we don't want any specific height we want this section to be the height of its content so for this we can have double do maxfit uh as width but instead of that I want to use uh our screen uh width okay and for the color we have our custom color custom color of BG light one so this is the color I want for this section let's give this some padding as well for the padding Edge insets dot I want to give padding to all sides so we can have from left top right bottom and for the left I want to make this 25 top let's give this 20 right will be the same as the left and for the bottom we can make this one a little bit uh bigger than the rest let's make this const and now let's give this column a main exercise as well just in case so main exer size of Min we don't want our column to take up more space than it needs and then we can make this text const because this title is just const we can set it as const if we save it okay now our section has a background color we need or we want and the title with some padding around it so now we can move to the bottom part that is platforms and skills okay for this platforms and skills section if we take a look at our figma design here uh where is that okay here so this one as you can see here we have our title and we can use row to this section because this is platforms and this is uh all the skills we have okay we can use row and we can insert other widgets inside that row so let's close this we can come here just below this comment I can have a row widget for the row it has children for the children the first one will be plat uh forms okay and the second one will be skills so let's start from platforms for this left side we can use W widget uh because we want to insert four uh containers and we can set specific size to them because we know the size of each of that container okay so for the children let's have first of all a container and for the container I want a specific width of uh 200 and for the decoration I want to give this some decoration let's give this box decoration first of all I want to give this a color and for the color I want to uh make it little bit lighter than than the background color so we have our custom color and custom color BG Light 2 is lighter than the background color we used for this section and for the Border radius I want to give this little bit of uh border radius oops not border border radius of circular border radius here we have circular and I want to give just five okay then uh we can move down we have this box decoration just under it uh I want to give this a child and for the child let's give it list style so that's the widget that is that fits in this case for our uh platform for for our our each platform okay so list tile first it has a leading for the leading I want to use a image okay okay image. asset for now it's just empty I'll set it later and for the title let's use text and this will be our platform for now it's empty okay for now what we need is uh the items skill items we created as a new file if you remember so I can come here on the sidebar we have this constant uh not that uh we have this constant folder and inside there we created a skills item skill items okay so first we need this platform items for this one and then we need skill items so let's start from platform items okay I'll come here and I want to Loop through those platform items and display them display four of them here basically all of them first let's create uh I equal to zero and then I is less than platform items let's import it do length uh and then let's increment the I now we can use this platform items here first of all in the image and we will get the platform item at this index and then we will get the image okay IMG if you remember uh this is the image we want to access to this specific image uh value and then title value so we can have this the same platform with current index and we can get the title all right now if I save it okay as you can see here we have all of our items that is lined up just like this all right now we want to remove this overflow issue so for that we can come uh here and we can actually give this wrap a constrained box okay let's wrap it with Widget we can use this wrap it with Widget so that will be constraint box for the constraints I want to give a Max width for this all right box constraints Max width not height Max width of I want to give this uh 450 and then we can make this const if I save it now our errors uh go away as you can see all of four items uh are displayed properly now let's style it a little bit we do not want this big item and we want to have some spacing and we want some padding for each list style as well so first of all let's come here and for this list style let's give this some padding okay content padding Edge inserts uh let's give this symmetric for the horizontal uh I want to make this 10 and not 10 let's give this 20 because uh the horizontal should be a little bit bigger all right and for the vertical we can make this 10 let's make this actually const okay if I save it okay now we have some padding and let's make this image little bit smaller and for it we can actually give uh some width for the image let's give this width of 26 I think 26 should be good if I save it okay now the image looks good so what we what we need to do right now is um come down come up here actually not down up here let's give it some spacing as well first of all let's give this uh spacing of uh probably five not 50 but five and then for the Run spacing that will be the same as well all right and let's actually give this row some uh alignment as well because we want to insert the skill section as well and we want both of these uh platform and skill section to have have proper alignment so basically I want to give this cross AIS alignment of start okay and for the main axis alignment uh for the horizontal alignment uh I want to make this one Center all right now if I save it and we can come here as you can see now it's centered when we put the other section it should uh be centered on this side and on that side and if the screen is bigger it will be aligning it's properly let's actually close the sidebar now we don't need it for now and we can come just under this constraint box that is platforms uh we can come here and under this comment section we can create an uh we can insert another widget first of all let's actually give uh let's insert some sized box here because we actually aligned our widget uh at the center that's why we want to have some spacing between these two platforms and skill section so we can have sized box and for the WID we can have 50 width okay let's make this const as well and now for this skills section uh first of all let's create one uh item and then we can Loop through our skills and display them display all of them all right so first of all uh we want to use WP for this one as well and the children of the wrap will be uh chip widget we want to use a chip widget for these skills if you remember in in the figma design so we have chip widget and for the chip widget it has tight uh label uh we can use text widget and for now it's just empty this chip widget has a uh Avatar as well that is basically an item on the left side okay for the Avatar I want to use image widget of asset for now it's empty and and then let's actually give this some padding as well I mean for our chip uh we can give it here um padding padding Edge inser so for that uh padding I want to use symmetric so first of all let's give this vertical for the vertical I want to have 12 and then for the horizontal let's give this 16 for the horizontal it's better to have a little bit bigger it looks uh kind of good if it's bigger for uh for the horizontal space now we have that and then before this let's show our image and Title by looping through our skill items let's create a for loop I and that will be equal to zero and I is less than our skill skill items uh if you remember it's inside here in this file skill items. Dart we have skill items with image and title it's just it it is the same the structure is the same as the platforms so it should be less than the length of the skill items and let's increment I now we can have these skill items and first of all can come here get the current item at this current index and we can access that specific image path and then for this one let's get the current one and for it we can have that title okay let's access that title now if I save it okay you can see here we have our chip that has an overflow if I make this bigger you can see all of our chips uh are here okay we have some error with image as well and we'll fix it so let's make it smaller and now first of all uh the reason why we have this issue because we did not give this specific width and we need to wrap our this wrap widget with uh Flex as well flexible actually so first of all let's give this wrapid with constraint box let's do that constraint box for the constraints I want to give this uh Max width like like we did for the platform section on the left side so x width of 500 and we can actually make this const and let's wrap it with flexible as well because uh we want our chips to go to the next line when there is not enough space okay for it we can actually wrap it with flexible widget flexble just like that now if I save it okay as you can see uh when there is not enough space it actually goes to the other section I think here we made a mistake for the text that's my bad this should be actually title okay and this one should be image that's why we have that strange error that the image not showing up and for the text title there is the path of the image so if I save it it should show properly okay you can see here all of our skills showed up properly now we need some spacing between these chips so we can come here for the W widget uh we can give this a horizontal and vertical spacing so should be 10 this one okay and for the Run spacing oops not key but let's give this run spacing of the same as uh spacing okay if I save it okay now it has proper spacing now if I make this little bit bigger it should show up just like this okay as you can see here we did not uh add some spacing between this title and this section okay let's do that first for it we can come up here and here we can give this size box okay size box for the height let's give probably 50 let's give 50 and see how it looks let's make this const and let's save it let's take a look at it okay it looks good 50 I think it's good the last thing is let's actually change the background color of these chip widgets as well so we can come down here this uh chip widget has a background color for the background color we'll use the same color for our uh platform cards okay custom color of PG light two let's save it and if it come down you can see our chip W widgets uh have the same color as this card color so that's it now we can actually clean up our code and move on to the mobile version of this section now this is the desktop version so first of all actually let's clean up our code for now we can come up here this platforms and this row we can leave the title as it is because on mobile and on desktop the title stays the same we just want to uh get grab all of this uh row widget and put this on its own file as a desktop uh version of this section okay so that's why I come down here and I from here I will come all the way up to this row I'll copy it remove it or just cut it and I come here inside my widgets I'll create a new file and the new file name will be uh so what is it skill not skill yeah skill uh skills desktop do.art so another I'll create a new state list widget so that will be skills desktop and instead of this place holder I remove all of it and paste the code I copied from the other file the version the desktop version of our skills uh section so let's import all of them first of all this we have platform items that's imported and our colors as well we can come down and see that we do not have any issues so now we can save this file we can come here and inside our uh home page. Dart file we can import our desktop uh skill desktop section okay skilles desktop and we can actually make this const not that we can actually make this one con if I save it everything should work as expected okay now it's showing properly now we are done with skills desktop for the desktop version it's done we can move on to mobile version for the mobile version of this section let's first refer to our figma design you can see here this is the section uh for our mobile version on this section our skills or these chip widgets will stay the same but for our platforms this card widgets uh layout will be a little bit different because when the screen is really small this grid view uh will not fit uh on that screen okay let's say there is a mobile uh and that Mobile's width is really small uh there might be aalow issue that's why we want to change the layout a little bit so that we can uh uh Place each of these card on one line all right not on one line per line so basically this will be column view uh you'll see what I mean while we are coding it okay so let's close this figma design uh first we can comment out this skills desktop and create a new column widget for the children the first one will be uh platforms and the second one will be skills now we need to define a break point uh for this section uh for desktop uh we want to show this skills desktop widget until uh certain point I mean until uh we reach we we reach to the specific width and then we want to show show mobile version you can say uh that we have we already have this K Min desktop width we can use that as a condition but uh when I tested it it actually did not fit very well on the screen that's why I want to have another variable that is kind of uh medium desktop width uh let's create that and I'll explain it while we're coding it that will be uh me medium K medium desktop width and I want to set it to 800 all right so this will be uh our break point for this section for this specific section so we can save it and come this to this home page. Dart file and here let's remove this first one let's start with a k platforms we'll have a container widget and for the container first of all I want to give this a margin uh the margin will be Edge inserts dot only I want to give a margin only to the bottom okay and that will be uh five this will be a space between each of our uh uh platform cards and the next one will be width for the width we can use just screen width uh not screen width let's actually make it uh double. Max fet and then uh let's give this decoration the decoration will be similar to the decoration we used uh for our desktop version so first of all color for the color I want to use uh BG light two and for the radius let's use border radius and Border radius of circular oops border radius of circular just right here and that will be five all right uh now the decoration is done uh let's give a comma here now we can give the child for the child that will be list Style just like uh the desktop version and the first one will be our uh Avatar okay let's not not Avatar uh leading okay leading and leading will be image for now it's empty we'll Loop through our platform items and display them uh on each card and the next one will be title for the title we can use text for now it's just empty and let's actually give this asset a width of 26 what else okay let's give this padding as well for the padding Edge insets do symmetric and for the vertical we can give just 10 and for the horizontal uh let's make it bigger okay let's make this const now uh before we save it we don't want any error that's why let's actually Loop through our platform items in I equal to zero I is less than platform items length and let's increment I now we can grab this platform items come down here and on this image as asset we can get the item at the current index and for uh the value we will get image value and we will replace this text value with that platforms at the current index and with the title okay now if I save it okay we can come down as you can see this is what I meant uh on the figma so basically on mobile we want to display them like this all right you can see we have spacing padding everything uh like in our desktop but but it's uh layout is different so let's make this little bit smaller because we're developing four mobile all right now what what I want to do is uh I want to come just below here about the skills comment and I will uh create a size box widget or insert a size box widget uh with a height of 50 all right can make this cons and below this skills comment we can create our skills uh chip widgets all right that will be app again and for the children we can use chip widget just like before actually let's copy paste from our desktop version because it's pretty much the same all right let's come to this skills desktop. Dart file and I'll scroll down all the way down here okay I want to copy all of this and I'll come here I'll paste it um actually what you what you can do is to have to create this or to grab this widget this skills widget and put it inside its own file uh as a new widget and you can actually use that widget inside this one and on desktop as well okay because the they are they are pretty much the same all right and we want to give this W some uh spacing as well for the spacing uh that will be pretty much the same 10 all right and for the Run spacing that will be uh 10 all right okay let's make it double and the last one I want to align it uh as alignment oops not alignment we want to use W alignment of Center all right now if we save it if we come down you can see we have uh our skills and this um platform items now we can clean up our code and show each version uh mobile or desktop based on our window size all right so let's actually come down this column widget we can grab this widget all the way up here we can copy or cut it remove it from here and we open our sidebar inside our widgets folder we create a new widget uh the name of the file will be skills mobile yes mobile. Dart all right a new widget that will be a stateless widget and that will be skills mobile all right not like that skills mobile something like this and we can replace this place holder with our copied widget all right let's import our missing components uh let's import this custom color as well now we can use this skills mobile widget let's first of all save it let's come to this file our homepage. Dart file and here let's comment this out first uh com let's uncomment this actually we can set a condition if if you remember we have this uh size. Dart file right we created a new variable that is K medium desktop width and we are going to use this variable as a condition uh we can come here we can check if constraints Dot Max width is bigger than or equal to K medium desktop width if that's the case uh then we want to show this skills desktop all right else we want to show our um skills mobile widget okay just like that we can make it const and now if I save it now both desktop and mobile version of this section is ready as you can see now it's showing up a mobile so if we make it uh bigger it will show up this desktop version so if we make it smaller now we have mobile version okay let's actually change this uh cards Max width let's set some boundaries or limitation uh for the size of these platform cards and this chip uh list widgets all right so for that we can come here we can wrap our column widget with Widget and that widget will be constrained box and for the constraints we can have box constraints and we can give Max width all right Mac for Max width I will set it to 500 and let's make this const the reason why I'm setting this 500 as Max width uh is because I want to have some limitation on the width of these cards and Chip widgets because if you remember we have this size dot doart file and inside here we have this uh K medium desktop with right and this is 800 until this uh section or this window size reach 800 it will show up mobile version and we will have this big space here and this uh list widgets uh will be kind of long so we don't want that we want to have some uh limitation on this uh we can have space around it but we don't want these cards to be this big all right that's why I set this to 500 uh if it reaches to 500 the size of these widgets will not change all right if we save it if we come down here you can see we have this layout now this is much better than before right so we can close this file and we can close this one as well and we don't need skills desktop and now we can uh move on to the projects section here before we start coding this project section let's take a look at our figma design first so let me open up my browser as you can see this is our project section which contains two subsections work projects and hobby projects which are pretty much the same in terms of UI uh but each card should be a different project and the card as you can see have the image as a header and title subtitle and some icon buttons so we're going to use either either of these uh buttons uh we can decide it while we're coding it all right so for the mobile version uh the design is pretty much the same but we are going to line up all of the cards in the one line because our screen size is smaller okay we don't need that much uh a complicated UI for this so let's close this window for now and before we modify this container or project section uh let's prepare all of our uh images for each project and then uh we need to prepare project utils as well that contains uh information about all the projects I want to include in this profile right first of all let's open this sidebar and inside this assets folder I want to uh create create a new folder and the name of the folder will be projects just like that and I want to place all the images of my projects inside this project folder I already prepared my uh project images please prepare yours and bring all of those images inside that folder just like that okay now I can just uh close this assets folder I can close this one as well and before I forget it I want to come down here I want to modify my pop speec yaml file okay so basically I want to include that projects folder here as well just like that projects okay I I want to save it oh we should actually put another slash as well because we want to include everything inside this project folder okay now let's close this pop speec yaml file and I want to make it okay before that let's create another folder as well uh now I want to create another folder inside this lip folder and the name of the folder will be uh utils which should contain the all the information about each project which will be used to populate our uh project cards so here inside this utils folder I'll create a new file the name of the file will be project util do Dart okay I already created the utils for this because I don't want you to watch me while I'm coding all of those information which are pretty uh kind of boring so because yours is different uh than mine uh I'll copy that and put it right here just like that let me make this smaller to the to the to the original size so what this project util has is that as you can see uh this is one project utils class which is a model uh that has image title subtitle and the links of the project so and then I have two lists which is Hobby projects and if I scroll all the way down here work projects and each project each list each project utils list list contains uh project utils model which has image uh that points to the path of the image and uh title of the project subtitle which is some information about that project and the link as you can see some project has Android link some of them IOS and Android and if I scroll down we have some web link as well so basically this is the uh what is it the the information about each project please create your own uh yours should be different from mine so what you should do is to create this model in in in a new file uh I named it project utils and then create two lists or if you want if you only have hobby projects create a list which contains uh all of your project utils just like this okay I hope you understand that uh because it's different from mine I mean because your project projects are different from mine I did not put it somewhere so that you can copy it and paste it inside your project okay I'll save it and close it what I want to do now before we modify this container I want to stop the application and relaunch it again because we uh made some big changes basically we modified the assets folder and Pops spe yaml uh we should stop the app and relaunch it again so that all of the assets are shipped together with buildt app okay I want to stop it okay now all of our assets should be shipped together with buil app now we can modify our container so first of all I want to change this uh double Max finite to screen uh width which we Define it uh about and I don't want height for the container because I want uh to I I want my container to have a height of its content okay and let's give this padding as well because we are giving some padding to each section if we scroll up we gave padding to this one as well we can just copy it and scroll down and put it here just like that okay so we don't see anything for now uh first let's give this child as well for the child I want to use column uh as you saw earlier in our figma design we have multiple widgets which should be placed inside One widget and that is a column widget so the first one will be work uh work projects title okay just like that and the second one is work projects C okay cards we can say work project cards first of all Let's uh put our title here okay we can scroll up we can reuse this widget basically copy and and paste it inside our section here all right now if I save it and scroll down as you can see uh here we have this section so let's actually change the title and that will be work uh work projects okay you know what what I want to do now is to actually comment out all of the sections about so that we don't have to scroll down all the time when we uh save our change so I can come all the way up until this main section just like that and I can just comment it out now if I save it okay you can see we have work projects title left only all right now what we want to do is to create one card for our project and we can populate the other cards uh from our project utils file which we created earlier okay so first let's create our card let's take a look at our figma design one more time okay you can see we have we should have an image title subtitle and some buttons okay I'm going to use these buttons not these ones if you prefer these ones you can use these ones as well okay I I I prefer these ones so let's close it and let's create a container first and for the container I want to give this a height okay let's give this 280 okay and the width let's give this the width of 250 because the width should be a little bit smaller than the height so that we have a kind of a beautiful card okay and then the next one will be our decoration okay for the decoration uh we'll use box decoration not box constraints but box decoration just like that uh I'll have border radius and the Border radius should be a circular of 10 and I want to give this color as well for the color I'll grab my custom colors and that should be BG Light 2 okay this is is going to be the background color of this container now we can save it you can see we have this card okay let's put our image inside this card first so first of all let's use child property of container and it's going to be column again because we have uh widgets that should be placed vertically and children the the first one image do asset and uh let's give this assets and it was projects okay and I think I have probably 02.png I should have this kind of project okay let's save it okay you can see we have this card but we have a problem uh as you can see here the edge are outside of our container which actually kind of which is hiding the W radius we gave to the container okay we want to get rid of that issue so we can come up here to the container and we can give this clip Behavior and the clip Behavior I want to use is antialias okay if I save it now we have a nice card okay now let's give this image little bit of size as well because we don't want uh uh the image to take up this much space so first of all I'll give this height and the height will be 140 and for the width I want to give the width of 250 because the width should match the width of the card okay or the container and then if we save it oops you can see uh we have this card but the the width did not match yet the reason is because we need to give this fit property as well okay that will actually uh resize the image or make the image bigger to cover the entire card so that will be box fit and box fit C should fix our problem all right now what I want to do is to create the title of this card okay for that we can use text widget all right text widget for the text for now I will just say just title okay and styling for The Styling let's give this text style and it will be font weight of font weight let's make this probably 600 I think 600 should be good okay for the font size uh I want to give okay let's actually save it and see how it looks okay I think title size the the font size of the title looks a little bit good I think okay let's uh change uh the color as well because we already have a primary white color Okay color custom colors custom colors not BG light but white primary all right that is going to be uh the color of the title and then what I want to do is copy this title just like that and create put a comment comment here subtitle and place it just like that and some dummy subtitle about uh the project that's it for now all right and let's put some comment here as well so that will be title and this is image right Project image now if I save it okay uh as you can see our title and subtitle font size is the same we don't want that I want I want to make the font size of this for first of all let's remove the font weight and let's give this font size probably 10 I think 10 should be good and then for the color instead of white primary I want to use white secondary okay that's kind of not that white let's save it you can see we have something coming up together now if we come up here for the column uh to line up our title and subtitle to the left we can change some properties of this column so what I want to do is give this column uh cross axis alignment the cross access alignment should be start okay and let's give this main access size as well for the main access size I want to give minimum main access size all right if we save it as you can see it's uh plac it on uh on the left let's give this some padding uh to the title and subtitle we can wrap this uh with padding widget with padding and for the padding I want to give uh from left to uh left top right bottom let's use that one for the left it can be 12 and for the top it should be a little bit bigger and for the right it should be the same name and bottom should be the same all right and then what I want to do is wrap my subtitle as well with a padding widget for the subtitle we'll use the same from left top right bottom and for the left it will be 12 for the top we don't need any padding we can set it to zero because we already have a padding which is uh set for the title okay that the space um between this title and subtitle should be enough with that padding so right to the right it should be the same and then to the bottom should be the same as well now let's save it you can see this looks a little bit better okay now the last part is setting the bottom or footer part of this card okay so we can come down here and write another commment and that's going to be footer for the footer we can use uh a container because the color of the footer if you remember uh in our on our figma design the color of the footer is a little bit different so we want to use that let's close it and for the container first of all I want to give this color and for the color I I want to use custom color of BG light one this is the one this is the color I want to use and let's give this padding as well because we want to have some space uh that that wraps the items inside this container so first of all horizontally not not horizontally but we need to use Edge insets uh symmetric and we can give this horizontal for the horizontal that should be 12 because uh the the alignment should be the same uh as the other items uh of this card like title and subtitle and for the vertical it should be a little bit smaller than than the horizontal all right let's make this const as well now if I save it as you can see we have this uh footer part and if we place a baser here okay let's make it const if I save it you can see it's now um at the bottom okay let's give this a child the child should be row and the row children for the children the first one will be text okay text and the text will be a available on this one just like that and for the styling I want to give text style of color let's grab our custom color and then that will be yellow secondary all right and for the font size let's make that 10 as well so it should be good if we save it okay now we have this text and we need to place our icon buttons okay so the first one oh if you remember we already have our Android and iOS icons and web icon as well from our previous section so we're going to use that image do asset okay and that will be what was the name of the I image or icon let's check it okay as you can see here iOS icon if you check that yeah this one iOS icon and then where is our Android icon here our Android icon do we have web one as well and web icon okay we're going to use these icons so let's close our sidebar and assets so let's grab our Android icon.png okay just like that copy paste it so this one instead of Android it should be iOS and copy paste one more time and this one should be web all right now if I save it okay we have icons that are available okay so we need to give this some size so let's give this a width okay so the width should be for the Android let's give it 17 let's see how it looks okay I think it's good 17 looks good and we'll just copy this width and put it to these ones as well uh separate it with comma and let's save it okay I think this iOS icon is a little bit uh smaller so I want to change the order of it as well let's put it here and this one let's make this 19 maybe it will match okay I think it's this is good this looks good so we want to move this icon icons to the right so for that we can use just space erer and make it const oops not like that add the const just like that if I save it okay now this looks good so we should add some spacing between these icons so for that I want to wrap this uh image with a padding because uh we can actually give this a kind of size box as well just like that uh sized box width of uh probably six okay we can do it just like that and it will give some size but I don't want it because not every project has uh all three links okay some of the links might be missing and in that case we don't want some empty space uh when the link is missing all right so that's why I will just remove this size box and I'll wrap my image with a padding so the padding will be only to let's say to the left let's give to the left of six okay and I'll do the same to my web icon as well let's wrap it with where is that padding and folder padding paste it you can see we have some spacing right now I think this looks good okay the next thing I want to do is to wrap our image with uh some gesture detector widget so because we want each of these icons to be tapable you can use gesture detector for these icons but uh the problem with the gesture detector is that it does not show the cursor okay when you let's actually let me actually show what I mean let's wrap it with Widget and let's wrap it with gesture detector okay and let's put on Tab just like that if we save it if I hover over it it doesn't show any or it doesn't change this cursor to pointer like uh what is it the finger pointer usually you see on websites when the uh text or button is clickable uh this cursor change to that kind of finger pointer right so we want that effect so you can achieve it you can achieve the same effect with in a different way as well but I want to just go with a a an easy way which is inal using inal widget so if I save it now if I hover over it oops on Android oh okay previously I think I H over it on iOS so basically this is this Android should uh change the cursor when we H over it it Chang okay let me change this to gesture detector again oops and show you what I mean okay because previously I think I H over on iOS icon okay as you can see here there's nothing no uh change of cursor so let's change this to our inq well again let's copy it and let's wrap our icons with Widget and replace it with inl and for this IOS as well let's wrap it with uh widget and that should be inal all right now I can save it now if I H over on each of the icons the cursor changes okay what we want to we want these icons to be taable and when each icon is tapped it should open a new tab and show you the project okay so now we can come up here let's actually uh grab this widget uh not this one but uh where is it work yeah yeah this one let's actually grab this card and put it inside its own file and reuse that for our cards okay let's come here and let's use a extract widget this one and we can up here name our widget and the name of the widget will be uh project card okay project card project card widget just like that if I press enter now we have this project card widget oops let me change the name rename the symbol project card okay if I do that oops now my Dart analyzer has terminated let's reload it okay now if I try to change the name of the this project card it should give me the okay now as you can see we have that project let's try it okay now the name is properly renamed and as you can see this is the widget and what I want to do oops what I want to do is grab this widget all of it okay just like that copy it or cut it and come here inside this widgets folder I'll create a new file the name of the file will be project uh card. Dart okay now here here we can paste the copied widget and if I uh import our material most of the errors should went go away and we can kind of import this colors as well and now what I want to do is to uh pass uh a project utils model if you remember we created a where is that this inside our utils folder we have project utils right and I want to pass project this project util to that Pro uh project card widget okay so let's close it and project card and here I want to um project uols model and I want to name it project and then we can say required this. project all right so what I can do is get this project and instead of all of this we instead of hardcoding it we can use project do image okay that's what I want to do and for the title I want to do the same okay title and we can make this style const and come down here and for this one for this for this we use subtitle and make this one const as well the and come down here and we need uh let's make this const first because it's it's just a hardcoded text and here we need some conditions if we need to check if the link for iOS Android and web is available if that's the case we want to uh show the icon button all right first of all we will say project do iOS link not equal to null then we will do some action here all right so and come here and for this one I'll check if project do Android link not equal to null I want to do some action here all right and the last one is web for the web I'll check if uh project. web link not equal to null then I want to do some action just right here right so in order to open a new tab uh without any package without using any package you can actually use uh JS basically dot can communicate with JavaScript so we are going to utilize or we are going to take advantage of that so what I want to do is here I want to import a new dot dot JS okay I'll import that as JS now what I want to do I'll grab this JS and come down here and I want to all the way down as you can see the first one is IOS link right I want to open the iOS link if that's available so for that I want to uh use uh JS do context okay context and call method I want to call a method and the name of the method will be open okay and then I want to open uh or I want to pass the the the link to uh this call method as a list okay I'll grab this iOS link and pass it and it should open the iOS link all right and you'll actually see what I mean when we pass the the actual link to our card and we come down here we'll do the same for uh for this uh Android link as well I'll copy Android link and replace this iOS link with that okay and let's copy this and come to the web section and put it here and this instead of this Android we will say web link all right now if I save it oops nothing is going to change we need to remove or get rid of these errors first I'll come here and I'll import that project card okay I'll do that project cards and for the project uh we can use let's say work projects okay work project utils do first for now let's just pass this and see what will what actually what we can see now as you can see uh it is the pretty much the same uh and we have the actual data now if I tap on this on the icon it will open a new tab if I try it as you can see it opened a new tab on the browser and it opened the actual uh project via the link we passed to it all right that's that's that now we created our first card so let's populate uh all of our projects okay I think uh let's actually change the size of the text this text it's it kind of it is kind of too small look looks to me too small okay so let's go to our project card and here I want to scroll all all the way down to the subtitle here and I want to change the font size I will make it 12 let's change it to 12 okay this seems little bit better I think yeah now we need to change uh the height of the card as well so let's make instead of this 290 and for the width I think WID we can make this 60 okay if I save it okay looks like this is this is good and we need to change the image as well because we have some space on the right okay so let's change this to 60 if I save it okay this looks good I think it's better than before because the text is much more readable than before and now I can close this project card widget and now what I want to do to populate all of these hobby projects and and this work projects okay so first let's wrap our project card widget with W widget okay because that will enable us to uh Place cards based on the size so I'll wrap oops not that I I want to wrap it with column and I'll change this column to wrap just like that okay so then I want to Loop through let's create uh int I equal to Z and then I is less than first should be work projects work project utils do length Okay and i++ now what I want to do instead of this work project utils first I want to grab the one at the current index now if I save it we should have multiple uh projects as you can see just like that okay we need to give this some spacing as well uh between the Cards first of all the spacing uh let's give this 25 I think should be 25 should be good and for the Run spacing let's give 25 as well okay if I save it this looks good all right uh we need to give some spacing to uh between the title and the cards as well so for that we can use here uh size box and height let's give this 50 50 should be good all right and let's make this const if we save it okay this looks better now we need to uh we need to display our hobby projects as well so for that we can copy this from here until all the way to our w i mean to the end of the W okay just like that I can copy it this was work project title and then work project cards and here I will paste it the one I copied right instead of this work projects we'll change it to hobby projects and this one to hobby project as well and this was the title and come here to this hobby projects and then instead of this work project utils we want to grab our hobby project utils all right and then pass that to this one as well if I save it now we have work projects up here three work projects and as you can see six hobby projects and let's give some space between the end of the work projects and the beginning of hobby projects okay for it we will come up here just just right here I want to place a oops not like that size box and for the height let's make this little bit bigger probably 80 and let's make this Con if I save it now it looks better all right good as you can see we have this so if we change this size if you make this smaller as you can see we have uh our cards lined up together in the one line okay that's what we want for the mobile so if we make it big if we make it really big it's like that and it's it's kind of big I think it's better to place maximum three cards on on on the one row all right that's what we want so just like that okay we don't want uh more than three cards in the one line let's make make it smaller again to the original size just like that for it we can actually put some constraints for our wrapper wrap widget so here let's start with our work project I'll wrap it with a widget and that will be constraint box oops not like that and constraint constrained box okay just like that and for the constraints box constraints I want to give this Max width Max width I think 800 should be good to place three cards uh on the one row okay and the next one will be this one hobby project we'll wrap this wrap widget with box constraints as well or constraint box widget constraint box and for the constraints we can put that one okay just like that oops let's remove that now if I save it and let's make this bigger oops I think 800 is not enough let's make this eight instead of eight let's make this n 900 let's change it okay I think that's not enough as well 950 let's change it to that one I wonder why this is placing only two cards oh yeah the reason is because okay we can leave it as 900 and we need to change uh this one as well we just changed only hobby projects if I save it now you can see we have three cards uh per row okay just like I think this is good so now what I want to do is to get this uh sections widget and put it on its own file that's what I want to do right now all right so for that we can get this widget okay let's actually copy this widget just like that all the way down and copy it okay cut it so we no longer have that widget and we come here and here inside this widget we'll create a new file widgets folder we'll create a new file and the the name of the file will be uh projects section dot dot and let's create a new uh State list widget and that will be projects section okay and we can place our widget okay as you can see we have uh some import issues let's fix them and for this screen width uh let's create it here final screen width and that will be media query oops media query. of we'll pass the context and then we get the size width okay that should give the screen width and we have some import issues here as well let's grab or import the project card and let's import project utils so this should fix our errors and there is one more here if we remove that now if I save it our section should go away oops oh it it's still there because we did not save this file yet so here let's come here and instead of all of those widgets we can just grab our project uh section okay project section and we can make this comp if I save it now nothing should change as you can see all of our uh projects are here all right if we make it smaller now we have our cards that's line it up vertically just like that let's make it bigger two okay now let's see how it looks with all of the sections okay just let's do it like that oops we can do it if I save it okay now uh this are our sections if we scroll down as you can see we have our project section okay let's give some spacing over here for workor projects where is that skill section and project section right so we can give we can place size box right here and for the height 30 I think we were uh giving space of 30 let's save it and let's scroll down okay now this looks much better all right now our project section is done we can move on to contact Section first of all let's remove this width and height from our container and add some padding to it so for the padding I want to add uh Edge ins sets of from uh left to right for the left it will be 25 and for the top 20 and for the right 25 and for the bottom let's make this 60 okay so for the bottom I want this to be bigger and let's make this const now we can change our container's color instead of this blue gray I want to use my own custom color okay so for the custom color I want to use uh BG light one so now let's actually copy this uh height with the sized box with the height of 30 and let's put it here because we want to separate our section from the from the section about okay so now we can give this container child and for the child uh will be column that should be obvious and for the children first of all all we need a title okay so for the title that is text of so we can make this get in touch so then we need to give this some styling so text style of first of all let's give this font weight for the font weight of we can give give this font weight of bold and then font size for the font size 24 I mean that's the font size of our title for each section and for the color I want to give this uh my own custom color custom color of white primary okay now if we save it oops we have to commas if we save it and we scroll down here we have get in touch section just the title for now okay let's first of all uh kind of comment out all of the other section so that we have this section to work on okay so I will just select from here all the way up here to the main section and let's comment this out and if we save it okay now as you can see we have just this section so it's better for do compiler to compile this small widget instead of all the other widgets together all right so we have our title um now we need to have our text fils okay so let's first of all take a look at our figma design for our section as you can see this is get in touch section we have three text fills and one button and we have this uh SNS links that are icons which corresponds to uh each of our SNS profiles all right so if we scroll to the right uh we have the same UI but the layout for these three text fills email and name uh will be a little bit different uh we have here row as you can see your email and name and this one will be column so we just need to modify we just need to set some condition to lay out these text Fields based on the screen width all right so that should be pretty simple let's close this and now uh here what I want to do first let's give some sized box to separate our widget from from the title so that should be 50 50 should be enough okay let's make this const as well no not that one but this one okay const and the next one will be uh our row widget that will be a row for now so that is row and inside this row I want to create a text field okay so text field let's let's wrap our text field with a flexible widget flexible because we might have a overflow issue okay I mean unbounded with issue with our text field so if we save it okay here as you can see we have this our text field okay we're going to uh give this some decoration and change the text field to our specific use case so here to our text field first of all I want to uh give this style uh common text style okay so for the text Style I want to first of all give color so basically the color should be pretty much it for our uh text Fields text style okay so color our custom color let's grab that one and we need our not BG light but scaffold BG color okay and then I want to give this some decoration text field have has a decoration property which takes input decoration all right so for the input decoration first of all I want to give this some padding content padding and that should be Edge insets of all let's give this 16 okay to the all sides and then I want to make this um text fi filled with a color so that's why we need to set our fi property to true and let's give this some fi color as well for the FI color let's grab our custom color and for this one what I want to do is is white probably secondary that should be our color of our text field okay for the text field and then let's give focused color to this one okay not focus color focused border focused border and for that one um we can give this outline input border outline input border and first of all we need some border radius if you remember in our figma design we have some circular border radius for our text field so that should be 10 10 should be enough and for the for the side for our border side we don't need any Border Side okay so that's why we can set it to nonone now okay let's come all the way here let's actually separate this and this one as well this one as well before we save it let's just format it by hand a little bit we have this focused border and we can give this the next border that is enabled border that should be enabled border for the enabled border we basically copy the same and put it here okay and the next one is just border so for the Border we will copy paste the same as well okay now what we need to do is we can just save it okay now we have our text field as you can see all right let's try to give this hint text okay inside our decoration let's try to give some hint text so that we can see what color or what style it look will look like okay your name let's save it and let's check okay white it's white so we don't want that color that's why we need to give this some hint style as well okay hint style for the hint style let's give this uh text style basically we just need to change the color of it so for the color custom color okay instead of this BG light one I want to give this hint. dark okay so now if I save it and we can see here we have our uh hint text with a different color so let's make this const and now we have kind of some repetition instead of giving uh copy pasting all this outline input border and setting them to each each border property we can just take it and assign it to one variable variable or uh create a get function and assign them to this okay so what I want to do is just I'll just grab this copy it and remove it and come all the way down here I will just come here and here I will create a outlined input border okay and then I'll create a get function and that will be get input border and what I can do just return this uh outline input border from this get function and just get this get input border copy it and come here and put it here just like that okay and we can remove from remove this from enabled border as well and put it here get input border and assign that the same thing to this one as well all right now we have uh our text field let's make this const okay now if we save it it should look the same okay good uh let's make this const as well and now we can grab this text field and put it inside its own file because we don't want to uh use this text field for uh we want to use this text field for our three text Fields but we don't want to repeat the same decoration to each text field that's why we can just put it on its fi on its own file and use that widget instead of this text field we just use our custom text field so what I want to do right now is just grab this text field all the way like this okay I cut it or copy it and remove it and I'll come here inside this widgets uh folder I'll create a new file custom text field. Dart okay and here let's create a new state list widget the name of the widget will be custom text field now we can replace this placeholder with our text field widget which we copied from our uh different file okay so let's import all the missing okay we have this get input border which is defined down here let's copy it and remove it from here and put it inside its own file okay now all of our errors went away and what I want to do is right now is to have some uh I want this widget to receive some properties so that we can actually uh modify this text field when we use in different places okay final so first of all I want to pass a controller okay text editing controller let's pass controller okay and the next one I want to pass a max line as well because we want to modify the text Fields MAX Line for our message text field okay and the next one will be final uh string that will be uh hint text okay now what I want to do let's put all of our required uh parameters inside our custom text field just like that if we put the comma just here and we can just copy our c custom text field and come here instead of this all the uh text field that are kind of created here we can just use our custom text field just like that okay and if we import it we have little bit of error because we actually made this uh controller I mean we made the all of these uh properties required so we need to remove them okay so let's remove it let's remove it and then we can basically make these uh variables nullable uh hint text can be nullable as well and for this max line I will just make just make this one as a default value and then when we need it we can change it okay so now we need to put our uh we need to assign our passing parameters to our to our text field so controller should be controller and then MAX Line Max lines so that will be our MAX Line okay instead of MAX Line let's change this Max lines so that it matches with the text Fields parameter and the last one is hint text okay hint text this can be null as you can see so instead of your name we can put hint text just like that okay now our Tech custom text field is ready we can save it and then we can close this now what I want to do is put our hint text here just like that I copied it from there you can just type it out if you want now if I save it it just looks the same as you can see just like this okay you can type it you can remove it just like that now we need to create uh two more text fails the first one uh is name and the second one is email okay email and just right under this row I want to create another text field and that will be your message and I want to change the max lines for this okay for the max line let's let's set it to 20 and see how it looks so let's save it okay we have an issue because it should be the issue of uh issue with with uh unbounded height for this one okay so instead of that let's remove this uh flexible widget and then we can save it and see how it looks okay now it looks good we need to add some spacing between this so first of all I want to give uh a spacing between email and name uh name text fills okay that's what I want to do so let's try that one just right here sized box and that should be width for this one and for the Wiz I can set it to 15 okay let's make this const not like that let's put it here for now so and then what I want to do I want to come just under where is it under just right here and instead of width I want to give this height okay if we save it okay now we have some spacing as you can see just like this all right the next one is uh we need to add a button that is kind of uh send button all right so for that one we can use uh our let's add some comment here uh send button and this one will be uh message and here this one will be email and this one is name okay now let's add our button I want to use elevated button so for the onpressed it's just an empty function for now and for for the text that will be uh get in touch okay just like that [Music] so if we save it okay now we have our button so let's make this uh let's make our button to fit uh the width or width that is available for this um button all right so for it I want to wrap this elevated button with a widget and that widget will be size it oops size it box okay and for the W width I want to give this um double of Max finite okay and let's give this some spacing over here as well sized box of for the spacing height height okay height that it will be 20 and then we can make this const just like that okay as you can see we have our text field that looks pretty similar uh to our figma design all right now what I want to do here is if I try to make this bigger the text field and the button tries to match the available space so we want to add some constraints to our text field and the button okay that's what we want to do right now so let's make this smaller again and we will come here first of all we will start to give some constraints to our text Fields okay so first one let's try to wrap our row we have our row we can wrap this with a widget and that will be constrained box okay for the constrainted box I want to give this constraints and then the Box constraints let's try to give box constraints with Max width okay we need Max width because we are trying to constraint the width uh available with so for that I think 700 should be good okay let add const just like that and I can copy this just like that constraint box and the constraints property together I'll just copy it and I'll come down here now I'll wrap this custom text field with Widget and I'll just replace this widget with that constraint box okay as you can see we have constraint box that's pretty much the same coming from here so and then we come here we'll wrap our elevated button as well we want to set some constraints to this elevated Button as well wrap it with Widget and then it will be constrainted box okay now if I save it and then if I try to make this bigger now as you can see we have our text field that does not exceed the constraints we set okay now what we want to do is let's make this smaller and we can come down here just under our constrained box here I mean uh our elevated button that is button let's give uh add our SNS uh icons okay icon icon button links all right so here just between this I want to give this some divider all right divider and then for the divider okay we can make this const all right not not like that const and then uh for this divider let's wrap it with constraint box as well because it will actually try to match the width Avail uh the available with okay we don't want that let's copy it this one and let's replace this widget with that okay instead of 700 I want to make this kind of smaller 300 all right and then I want to wrap this constraint box with padding as well let's try it first let's try to save it and see how it looks all right as you can see we have here uh small kind of line available all right so we want to when the screen is small smaller when the screen gets smaller even smaller than this I want to add some padding here okay actually I think it looks good we don't need padding let's add some uh let's add a size box just right here uh let's give this height and for the height for the top I want to give this 30 okay and let's make this const and then let's just come under that divid and put some size uh some space should be 15 I think 15 should be good let's try to save it and see how it looks okay as you can see we have this divider just under our uh elevated button so now what I want to do is I want to have our wrap widget and then what I want to do is to add all of our uh icons or kind of links for our social SNS profiles right image not image itself but image asset and for that I want to uh have let's say first of all uh GitHub PNG GitHub PNG if I try to save it we should have an error as you can see we have an error because we don't have our um GitHub PNG file available in inside our assets so that's what we need to do right now I mean we need to include uh our SNS icons inside our assets so here I already have them uh as you can see here I have five of them telegram Facebook LinkedIn Instagram GitHub all of them okay I want to just drag them and drop them here basically I'm including uh all of those icons I can show you them here as you can see this is a Facebook icon or GitHub icon all of them uh with a similar size all right can just close it and then we need after we include some new assets we need to close the close the application and rerun it again so I'll close it and let's rerun the application again let's see okay now as you can see here we have our GitHub icon because I only have one uh SNS icon defined inside our W widget okay so first of all I want to change the size uh basically the width of it and let's make this 28 let's copy and paste this a couple of times okay one 1 2 3 4 now we have five items uh as if you remember I uh showed you five icons change the names the first one is GitHub and the next one is LinkedIn so the third one is Facebook the next one should be Instagram and the last one will be tegram okay if you have more you can add more uh inside this WP widget all right so if it if we save it now you can see we have our icons available so let's actually give some spacing between them first of all spacing for the spacing uh 20 uh 12 should be good and for the Run spacing oops not key for the Run spacing the same basically 12 and then for the alignment let's make this not alignment but rep alignment of Center all right let's give some comma a comma here so now if I save it okay as you can see we have our SNS icons so we need to wrap each of our SNS icons with inqu Widget so that it is tapable all right let's do that let's wrap it with Widget and that will be inal and then I will specify on tab for now it's just empty empty function let's save it and if I hover over it as you can see it changed to uh finger that that kind of that shows that this icon is clickable okay for these ones it doesn't show anything all right so now let's apply this to all of our image icons okay let's wrap it with Widget and let's change it just like this okay and let let's do it to this one as well wrap it with Widget and replace this widget with our in and this one wrap it with Widget and change it with our inal and the last one the same for the last one we'll do the same just like this okay now if I save it all of our icons are kind of clickable now we can format our code a little bit so that it it is kind of uh readable let's insert some commas here and then here if you save it it should format the code properly all right now what we want to do let's actually grab this section's code and put it um in its own file all right so constraint box just we scroll up here and let's grab this container from just right here contact Section all the way down here okay all the way down here we have a lot of code uh so it's not a good idea to put all of them here so let's select it and I'll copy it and uh remove it okay or or I'll just cut it and I'll open my sidebar inside our widgets I'll create a new file and the name of the file will be contact Section do Dart okay now let's create a new state list widget so that will be contact Section instead of this placeholder I'll insert or I'll put my uh own sections code just like that okay so now I want to import some of the missing uh components just like that okay we have our custom text fied and all of it now we have a few errors this one if you remove it it should look all right okay now we come here and here we will get our contact Section just like that if we save it and if we save this one as well okay as you can see everything looks the same so what we want to do right now is uh to make this um name and email text field dynamic or it should basically it should change based on on the width of the screen right now it's just the same if we make it bigger it will change the the size horizontally if you make it smaller it will just the size horizontal it doesn't do anything we want to place them as a column instead of row when the screen size is smaller all right that's what we want to do so what I want to do here I'll just come up here to that where is this name and email text field and I'll just grab this row together just like that I'll copy it and remove it or I'll just cut it and come down here here I'll create a new function and that should return row build name of the function should be built let's say built name email uh name email fied desktop okay that the name should be good enough and then we can just return our row with all with two text fils I'll just copy it okay and paste it just right here instead of desktop I'll change this to mobile and I'll change this to column okay and let's replace this row with column as well and now what I want to do I'll just come up here here where we removed our widget and here I want to create uh a new layout Builder widget okay for the Builder we can have this one just like that uh we will have context and then constraints so first of all let's put a if condition if let's say constraints if constraints. maxwidth is bigger than or equal to K Min desktop width uh remember this we Define this variable inside our our file constants file okay so then I want to return build uh build email was it a name and email desktop okay if it is until the condition is true this condition is true we want to return desktop version basically if the available width uh match with our K or equal two or bigger than our minimum desktop width that is defined if you remember that's defined here inside our size. Dart file inside our uh constants folder okay if you forgot that just just a reminder if that's the case we return our uh desktop vers desktop version of our name and email text Fields else here and then this will be our else then we will return build name oops build name and email mobile okay so let's change this lowercase to Cel case Okay name just like that and let's change this one as well should be readable just like that now we have condition that shows um different layout based on our screen width now what I want to do I will I will just save it and see how it looks oops we have an error so that should be an error with our mobile section let's remove oh not that we need our uh Flex instead of that here we have Max width right so let's actually give this Max height as well so max height for the max height I will just set it to 100 let's see how it looks okay now as you can see we have this uh text uh two text fields that kind of of fits uh to inside available space but we don't have um the spacing between them so we'll come here to our mobile version of our fields and instead of width we need to have height okay let's save it so our text field is ready for both desktop and mobile version and then what we want to do we will come here and we'll try to um add our functionality to each of these uh SNS icons okay let's try that so first of all if you remember we used a JS uh that is kind of that shipped together with dart uh for opening a new tab so we're going to use the same in uh for our SNS uh links as well okay so first of all what I want to do is I will import that DJs okay I'll import it as JS just like that and then we can come down here and for each of our SNS icons I'll use that JS do context if you remember we we did the same for our project section uh js. contact dot so call method we will call method and the method will be the name of the method will be open and we are going to pass our link okay so for the link let's create a new constant uh constant file here inside our constants folder let's create a new file the name name of the file will be SNS do uh links do Dart SNS links. Dart okay so here I already created that I'll copy it from my second second monitor or second screen I'll just copy this and just oops not that let's close this let's put it here okay so here you can replace this string uh values with your own links if you have different SNS uh SNS profiles you can use them for now I just put five of them that are available um for me so you can use any SNS link you have with the matching icon all right I'll save it and I'll close this file and here first one for the first one I'll call my SNS link SNS links class and I'll get the GitHub the first one is GitHub you can see uh I have a GitHub icon and it should open my GitHub page for now if if you if you me uh if you noce it it uh I have only these string that are kind of uh dummy value so I did not put my actual SNS links okay you should put them if you want to put your uh web profile into production mode all right so okay okay now we can copy it and do the same for our other SNS uh profiles as well let's close the sidebar so this one is LinkedIn and the next one is Facebook Facebook and next one is Instagram let's have that Instagram and the last one is telegram okay telegram telegram just like that so if I save it and if we try to open uh click on any of this SNS icons it should open a new tab let's try that okay it's not opening any new tab let's see what kind of error we have let's see what is that that it says oops let's try and see how it oops failed to execute open on window unable to open window inval oh okay so basically you need to have a valid URL let's try that so to this Instagram I'll put a link uh ww. google.com Okay let's try that okay now let's try it if I tap on this on Instagram icon it should open a new tab okay as you can see we have um google.com uh on a new tab so that's the idea I can close it so you can basically do the same for all of these SNS variables okay I'll close it now we have our contact Section uh all contact Section ready let's make this const as well and then let's make okay for this one let's leave them as it is because we might we might need to have some Dynamic um variables that are assigned to our text Fields so for that's that's why we can just leave them as it is we don't need to change them to const okay and for this title we need to change it to const because there's nothing Dynamic inside here so we can save it and we can come here and as you can see we have our contact Section and that can be consed just like that finally we have come to our last section that is footer okay first of all let's add some spacing so that is 30 for our our section and then let's open our figma let's see what we have as you can see we have just this text at the at the center uh with some uh background all right so I want to copy this text and let's close this oh actually let's take a look at the mobile version as well the mobile version and desktop version is pretty much the same all right so let's close this and now first of all instead of uh what is it 50 uh not 50 500 for the height we can make this 300 so width just stays the same and for the child we can have text and for the text I will put that copied value uh from our figma and then let's give this some alignment as well alignment alignment. center and let's try to save it and see how it looks okay as you can see we have this text right here and this looks kind of big and let's change it to I don't know I think instead of height we can give some padding okay let's try that padding Edge insets dot symmetric uh dot not dot but vertical of 20 let's try that okay I think this looks pretty good but on our figma if we take a look at that it's kind of I think not primary white secondary White and the uh font weight is also smaller we can change the styling of this all right so text style for the text style first of all I want to change the font weight for the font weight let's make this 400 and for the color we can use our custom Color Oops custom color dot white secondary all right if I save it okay now the this looks pretty well uh yeah that's good let's make this const as well let's format it just like this and let's grab this whole container widget with with this child and put it in its own file as a footer widget okay I'll just copy it just like that and I'll come here inside our widgets folder I'll create a footer widget dot not footer file and here let's create a new widget and the name of the widget will be footer okay so footer widget is the same for both mobile and the desktop version of our uh website all right now we can have that footer and then we can just put it right here and if we import it let's try to import it and then let's save it okay as you can see this is this looks the same as before now let's try to uncomment all of our sections and put see them together and see how it looks let's save it okay as you can see this is a mobile version of our profile let's change it to desktop okay now this is desktop version as you can see uh this looks pretty good all right now all of it let's try to type something just like that okay and then what we can do right now is let's make this text field message field a little bit uh smaller let's change the max lines to a smaller value where is our contact Section okay here our contact Section and for this one I want to change uh where is our message here we have Max lines 20 instead of that I want to change this this to 16 let's see how it looks let's try to scroll down okay I think this is better than before it's kind of the height is uh a little bit smaller or right as you can see there's there's a kind of little bit of uh freezing when we scroll it that's because we are in debug mode when we put it in production mode it should work as expected so we are done with our UI now it's time to work on uh the Nar button functionalities when a n bar button is pressed we want to move to that specific section so basically when we press on this skills uh button that should move to that uh skills section or when we tap on this project section it should jump to that um project section down here all right that's what we are going to do so first of all we are going to move up here and just right right under this scaffold widget we're going to uh create one uh scroll controller and assign it assign that uh to to our scroll scroll controller uh V variable all right so and then what we are going to do is we come down here and we have this list view widget we are not going to use this list view list view widget instead we're going to uh use column widget and wrap it with single child scroll view because if we if you want to move to a specific widget um in the widget tree you want that widget to be rendered beforehand otherwise it's going to throw an error uh basically that that error uh tells you that your widget is not uh rendered yet so you cannot show that widget on the UI okay so that's why what we are going to do is we use column and we remove this scroll Direction and we wrap our column with a widget and that is single child scroll view widget okay and we are going to uh have we're going to grab that controller property of it and assign our scroll controller to this controller okay so and then let's actually assign scroll direction as well axis. vertical so although that is a default value and then what we want to do is we want to create uh an umra Global Keys we want to specify a key to the widget we want to scroll to okay so now I'll show you what I mean let's create a list and that is going to be list of global key let's name this variable to nav uh nav bar keys and that is going to be list. generate we will generate a list of four items and it will return Global key so basically this Nar uh Keys variable will hold or holds uh four Global keys that is a key for each of our uh nabar items or nabar buttons up here except for this uh block because this block button when it's pressed it should open a new tab which should show our blog website okay so and then uh what I want to do is come down here I will grab this nebar keys and I'll assign that to first of all this home button when this home is pressed it should show this main section okay it should act basically scroll or jump to to the top of the page okay so that's why what what I want to do here instead of assigning the key to this header or header header desktop or header mobile I'll create one sized box here okay size box and I will just assign the first key to this uh sized box okay uh basically if we tap on this home button we want to show this size we want to jump to this SI box uh which is the top of the page okay so and then we will scroll down uh our main section is also visible when this top is visible all right so we can move down and here on our skill section we will again get the key property of the container and we put our nbar keys and now we want to get the second item in the list so that is going to be second Global key in our nobar keys list all right then we move down again and down here we have project section all right so to this one as well we will get the key property and grab our list Global key list and then we will get the third item in the list okay now it's no longer const then we have contact Section so for this one we can grab the key property again and get our Nar Keys list then we will get the third item or fourth item in the list right so that's going to be our contact Section now our keys are assigned to the to the to the widgets to the widgets uh we need to jump to uh there's one thing we need to change on our nowbar buttons that is we let's actually put this block at the end of our list of our nailbar okay because we can can easily check uh if the items are uh if the index is zero 1 two or three okay and then four okay if the the index is four we can just jump open or call another function to open a Blog website otherwise all the all the other items will jump to a specific section okay so now what I want to do I'll come up here we have header desktop header mobile right so let's actually go to header desktop and inside that header desktop we have we should have n titles right here let's go there here we have Nev items. Dart file inside our const folder all right so let's actually change this block just down here okay under the contact basically the last item in the list and let's grab this web icon as well and put it at the end of the list now if I save it the block should be at the end as you can see just like this now we can make this smaller and on the mobile view our block is at the end as well all right it's just uh you can you can actually leave it as it is and check for the condition of uh whether the the index of the nebar item is three or not okay I just wanted to deal with this as a last item okay that's what I wanted as a preference so I can close this new items and header desktop as well for now now what we need to do is we need to deal with the tap functionality when this is tapped we need to move to that section okay so first of all let's come here we have our where is it on the mobile we have our draw drawer mobile right we go into that function and here we will create uh create or we'll pass a function to this drawer mobile uh widget so that will be function integer we will pass an integer to that function uh or through that function and that will be on NV item tab okay now we can add that final uh parameter and we will grab this on NV item Tab and we come down here and just write right here here on Tab we will call that function and we pass the item or index of our nebar item okay and then we'll come here okay let's actually save it and we will come to our homepage again homepage file now we will remove this const because it's no longer const and we need to assign that required parameter of dra mobile widget and it will have integer of NV index n nvar item index and here we want to call our function okay call function so we will do that later now let's come down and we have our header desktop let's remove this um is it header yeah header desktop let's go into that and here we have the same uh pretty much similar UI but as a row okay basically this one we have all of our n bars that are aligned or that are lined up um as children of row widget so here we'll come up here and we'll do the same final function will pass uh pass integer and the name of the function on uh nav men on nav menu tab was it like that I think so on nav tab or on menu tab let's add the final required parameter to this let's for let's add the comma there to format it properly okay and we will grab that on nav menu tab and we come down and just right here we can pass our nvar item index all right now we'll save it and we come here and we'll remove that const again and here we have that desktop and we have the integer of nav index just like that nav index and we will call the function to jump to a specific widget that's what we are going to do right now so now what we want to do I want to scroll down all the way down and here I want to um create a new function that is void and I'll name that scroll let's say to section scroll to section and I'll pass a integer of NV um NV index okay I'll pass that and then first of all I will check if uh nav index is equal to 4 if that's the case I want to open open a Blog Page Blog Page okay and then I'll return from that I don't want to do anything else because this if that's that's four that means uh user tapped on this blog Navar item or Navar button all right and we want want to open a new uh new tab with our block page so then if that's not the case we continue uh to we continue to our functionality of jumping to a section so final key I'll create a new key and the key will be will equal to nav uh nav keys or nbar keys and I'll get the I'll grab the uh Global key at the index of nvar index or nvar button index which is pressed okay so and then I will use scrollable okay scrollable I'll use the scrollable and I I'll use the ensure ensure visible method of that uh scrollable all right and I'll modify properties of this insure insure visible prop uh Method All right so duration for the duration let's make it const and duration of I'll make it milliseconds of 500 all right and the next one I want to change the curve or assign the curve of let's have curves do e let's say is in out probably I think this should should do it let's save it now instead instead of this context I want to grab this key and get the current cont not state but current context of this key all right and I want and that should be that should not be null so now if I save it now let's actually try to jump to a section let's try to jump to skill section okay it did not jump to a section the reason because we did not call this function anywhere yet okay we go scroll all the way up here uh here n index our drawer mobile uh let's make this smaller so that our mobile version of the page is visible okay now we have our now bars as a sidebar this drawer and I will I want to call my scroll to section function and we need to pass an index which is Nev item index all right so before we jump to a section we want to close the sidebar as well so how we do that we have here scaffold Key current state Open Drawer instead of that we can call close and drawer okay let's do that here instead of that close and drawer all right now let's save it okay now let's open the sidebar and let's jump to skills section all right here as you can see our skill section is visible so if we try to jump to contact Section all right it's working as expected how about uh project section all right it's working just fine now we need to implement the same functionality to our desktop version all right let's make it bigger if we do that and if it if you try to tap on any of the buttons it doesn't work because we did not assign this fun function to our uh header desktop yet okay we just call that function inside here if I save it now if I try to tap on skill section you can see the skill section is visible if we try to go to Project section project section and then contacts okay contact so as you can see we have these jump uh jumping to section functionality is ready but we have this block okay it doesn't do anything yet so what we want to do here we come all the way down to our scroll to section function and here we will use that uh JavaScript which is shipped with uh dot okay JS we already we already should have that JS I think okay let's go up if we do not have that imported we can just import it okay let's try to import it import and that is Dart JS let's import it as JS all right and we come all the way down here and we get the context and open meth uh call method actually call method that will be open and then we pass our um link to this call method so that will be we have SNS links all right SNS links dot we don't have our blog link yet that's why we come here and we can say blog just like that you can add your link down here and I'll add my blog link www. shu ak.com and I'll open specifically my tech block okay just like that and I can save it I can come here and then I'll just uh add that blog link here and if we save it now let's try to open our Blog Page okay as you can see here uh I my blog page is open all right so that's it now we have uh that jumping functionality and I mean the functionalities of nbar and that sidebar is also working so let's try to clean up our code a little bit okay basically removing unnecessary stuff from our code for example we don't need this height and then we can add some spacing here let's remove un necessary Imports this one and this one as well we have this this this we don't need this ones so we have completed our flutter web portfolio application now it's time to make it available on the internet in this section we are going to deploy our flutter web portfolio application on the cloud so that everyone on the internet can access it there are a lot of options for web hosting but for this project I chose netlify because that's easy to use and free to use so basically without any payment issue or without entering your card information you can create an account just a free account and start deploying your application all right so first of all uh let's build our flat application and then we can uh try to open netlify platform and upload our application on that platform okay so before that I want to uh show you one thing so basically let's go to contact Section if you remember in our contact Section uh we had a bunch of SNS icons I if I scroll all the way down uh we have this GitHub LinkedIn Facebook Instagram and telegram um icons that point to our uh SNS uh portfolios right so basically what we did before was was something like this we had we just defined the name of the file that icon file.png and that's what we did previously but when we built our flutter application with this value it's not going to show up these icons okay that's why we need to specify that assets slash and then name of the file okay so I actually plac that asset slash before uh each of the icon file name all right just like that please specify that otherwise when you build your flutter application it's not going to show up okay I mean the icons are not going to show up okay I just want to remind you that so let's save it and I'll close this now uh we can open up our terminal inside here as you can see my project is open in the terminal and what I want to do I want to build uh web application using flutter command line okay flutter build web if I run this command line it is going to build uh a web application out of our or it's going to compile our application into built version of our uh web app all right or flutter app let's run this and wait as wait a few seconds or depending on your uh machine performance it might take several minutes or it might take a few seconds okay let's try that and wait a little bit okay as you can see uh now our uh web or built version of our flutter web flutter app is ready so how you check it is just like this you come to this build folder inside this build folder there should be web folder okay this web folder is what we need if you open that folder you can see there are bunch of uh a number of files and folders as you can see assets icons uh and and a lot of other files that we need uh to properly show our application on the browser all right so I'm going to reveal this in on my finder basically find that uh open that folder as you can see that I open that folder and now what we need to do is we are going to open up our browser so let's open up our browser and here what you want to do is go to app. netlify.com okay go to this uh website and there if you do not have an account create an account uh by signing up or if you have an account you can just log in with any of the options uh basically I want to go for email I will I will log in with email and I'll create my credentials at gmail.com and my password if I log in it should open up my dashboard okay now I'm on my dashboard as you can see here what I want to do is uh okay if you if your account is new you might not have this uh projects because I already uh deployed several projects that's why I have a list of projects here if you do not have any projects you might have something like I mean you your uh dashboard might be empty basically what you need to do is find that add new site button okay it might be different depending on your account all right if that's new that might be somewhere else if you have projects it should be somewhere here add new site okay if you tap on it it will open up the drop- down button and there you have several options what you need to do is Select this deploy manually because we are going to upload our project manually so basically what we need to do is grab that web folder uh that I showed you before and just drag it and drop it just here okay if you wait a little bit it should upload uh your application and deploy it uh on there on on the netlify server okay now the upload is done it's basically now deploying it all right so what we need to do here until it's done its own thing let's actually go to this site configuration and try to change our site name all right so as you can see here there is a button that says change change site name okay so instead of this dummy site name I want to have my own uh site name so let's say I want to go for sha death Okay so that's what I want let's try to save it and see if it's available okay that's available we did not have any issue now let's try to go to this site overview and tap on this link if you tap on this link it will open up a new uh Tab and it's try to it tries to show your application as you can see our application is showing up properly if we scroll down uh all the sections are there and you can see our links are also uh there all of them now we can try to tap on uh the nailbar buttons or we can go to contact Section as you can see everything seems to be working just fine all right so now let's try to open it or make it smaller so that uh we can see the mobile version of our application okay as you can see so basically the mobile version version of our app uh will be something like this all right just like that let oops let me make get move it here okay now let's try it you can see we can go to skill section just like that right we can go to Project section all right everything seems to be working fine okay let's try to open our probably I think this one should open Google let's see if it op opens Google okay right that's right that's basically what we want now as you can see our application is on the cloud so anyone can type this name uh if I try that let's go to a different Tab and paste that and try to open it all right if we open that it should open our site so basically this is the name of my web portfolio as you can see here at the end it says netlify DOA that's because uh you are hosting your uh application on their server and also you are using their domain names extension as your domain name extension all right that's why uh it says ny. apppp if you want to have a specific domain like something like let's say Shad dev.com then you need to buy that domain and conf do some configuration uh on on their Ser on their dashboard here all right that's that's what it is I hope this video is useful for you if that's the case consider subscribing to my channel and also uh press that like button if you have any requests or any questions you can leave a comment in the comment section

Channel: Shohruh AK

Views: 4,536

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: 8V4qqE4JHC4

Length: 235min 32sec (14132 seconds)

Published: Thu Mar 14 2024