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

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 na 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 neb 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 outline 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 NV 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 skill 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 rerun 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 defined it um 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 uh the the corresponding image icon of that platform and the title uh of that platform okay we're going to Loop through that and uh 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 do 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 a 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 bold for for one font weight we can uh make this Bold 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 have our section with its Pro uh 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 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 little a little bit uh bigger than the rest let's make this Con and now let's give this column uh main exercise as well just in case so main exercise 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 con if we save it okay now our section has a back ground 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 plot uh forms okay and the second one will be scales 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 this style first it has a leading for the leading I want want to use a image 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 constants 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 a 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 constrain box okay let's wrap it with Widget 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 Max 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 insets uh let's give this symmetric for the horizontal uh I want to make this 10 and not 10 let's keep 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 a 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 let 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 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 aligned 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 width we can have 50 width okay let's make this const as well and now for this skill 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 WAP will be uh ch chip widget we want to use chip widget uh for these skills if you remember in uh in the figma design so we have chip widget and for the chip widget it has tip 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 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 the 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 we can come here get the current item at this current index and we can access the 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 wrap it 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 max 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 flexible 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 Con and let's save it let's look 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 2 let's save it and if we 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 Dart 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 icon 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 skilles desktop section okay skilles desktop and we can actually make this const not that we can actually make this one const 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

Channel: Shohruh AK

Views: 1,261

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: KGh_Suwdfl4

Length: 23min 53sec (1433 seconds)

Published: Tue Dec 12 2023