SwiftUI vs Flutter vs React Native : Building a Health Fitness App UI with Each Framework

hello everyone welcome back to the channel today we'll be building the Health Fitness app UI with swift UI react native and flat separately so if you're interested please subscribe like and share the video the first 15 minutes will focus on Swifty y the next 15 minutes on react native and the final 15 minutes on flatter feel free to skip to the session that interests you most so with that said let's get started so starting with s2y this is the default code the sweet UI comes with that basically a test being wrapped within a v stack right so I'll cut that over here and start building the tab bar right so I return the tab view yeah so the tab view takes in the selection so the selection I'll pass in the selected item right or the selected index so I get rid of the content over here so the selected tab is not yet created so I'll be creating it it's a state variable right so we use as state property so as state private Val then the variable name is going to be the selected Tab and initially assign it a value of zero that's the first index so once we have that so in here I will start with a test over here so the first one is going to represent the home and it's going to be a tab item right so that's the modifier so the tab item in here we passing the image right so the image you are going to get the image from the system name and the name of the image is going to be house as you can see over there and also below the image you also going to be a test of home there you go so I'll repeat this um three more times changing in the image and also the test as well right so let's do that there you go um so in here I need to change it to this cover and a test in here also to this Discover right so the image is going to be the magnifying glass right that's the search um yeah search icon so the magnifying glass there you go as you can see over there let's do same for the third one is going to be saved the system name is going to be the bookmark icon and the testt also changes as well to saved so lastly um this is going to be the studio as a test and also the system name is going to change to the location and a test in here changes to location as well so that's the basic setup of our TP view right you can see it's working and Chang it accordingly so let's proceed so the tab view is going to have a modifier known as the on appear right so in here we will set the background color so to do that UI tab UI tab bar do appearance do background right so we set out to to be black so that's black there you go as you can see over there and also let's proceed to change um the B tint color right so let's set that to gray as well it's looking pretty much cool um we want the focus icon to be white right so with a ttin modifier we can just change that to White and you can see the effect over there so we are pretty much down with the Bottom bar right we we'll be focusing on building the Discover only the Discover page right that's the UI building for each of them so I'll create a file and this is going to be a Sav UI View and the name is going to be the Discover view so I'll create it over here so you can see the default code a test of hello world so I'll modify the test over here and return a test of this discover view there you go so we need to take this discover view so inside our content view where we are returning a test of discover we actually be returning our view and that's the Discover View and it show the same thing right so we'll be working within the Discover view so let me move this up there you go so in a body of the Discover view right I'll get rid of the T in here and return a z stack So within the this Z is going to be so let's specify a color so the color is going to be black so color then to bracket black and Let's ignore the safe area right we want the black to affect every part of the simulator as you can see over here um so here is going to be a v stack right that arranges it 10 vertically so in the vack we going to have a rounded rectangle with a corner radius of 30 so let's give it a frame of width and height so with a width we passing a value of 370 and also height of 45 and let's let's also proceed to give it um the foreground color of of white so this is how it's going to be so basically we are designing our search input right so the color is going to change right so there are many ways of specifying the color here in the form of RGB or as we did earlier so the RGB want the gray color right so you specify the color for red green and blue right so the red is going to be 25 out of 255 green is going to be the same and also the red is also going to be I'm sorry the blue is also going to be the same as 25 out of 255 and that will give us the gray color of the Roundy rectangle right so we also going to have an overlay modifier right so it's going to Tak in an H stack that um aligns element horizontally So within the H stack it's going to be an image right and this image is coming from our system name and the name of the image going to be the magnifying glass as you can see over there um so since we've put everything within the a stack so first of all let's change the foreground color of this to gray I'm sorry white so you can you can see it very well so next to the image is also going to be a test field right for our input so testing the title and also the test so we going to set to string so up there I'll be creating a variable and it's going to be a state variable right so we use a state wrapper and name it V so it's going to be the search term so initially we let's assign it an empty string so we can just pass the set time to The Binding text right there you go so let's provide some placeholder right so with a prompt we can provide a text so inside here it be saying what are you looking for right so that's a placeholder over here and we change the foreground color to be greay so you can have a look at it there we go so let's apply some padding to the a stack and this padding is only going to affect the left and right side there you go as you can see they fit so let's also apply some paring over here and it's going to affect the bottom size a value of 25 so this pattern affects um so you also be having a v stack within that we also be having an H stack right so we'll be having a text a test of new releases right we we have having two text and these two test are being placed in an H stack and this will automatically align the test horizontal right so with the test of newes let's provide a color right so with a foreground color you can give it a color of white and also let's give it a font of sap headline as you can see the effect let's provide a spacer wget since we are within an H stack it will push it to the very left of it so next to the spacer is also going to be a test of V all remember they all being wrapped within an H stack right and I'll align these two test horizontally as you can see the effect so can provide some forr color of gray and also give it a font of do caption that's a smaller size there you go so let's give some padding this padding is going to affect left and right that's horizontal there you go so below that is going to be a scroll view so this SC view is going to be horizontal right so can pass in that horizontal and in that we are going to return return an H stack right within the H stack so first of all let's provide some spacing over here so let's give the a STX a spacing of 20 and in our h stock you be returning um a list of cards being arranged horizontally that's why we' provided a tack so first of all I'll be creating um a workout card below over here so that I can return it in our a so below here is going to be a strat workout card so it's going to be of view so about v body some view so in here we can return the image so first of all let's provide some create some variables over here that need to be passed down right so let image name that's going to be of type string and also the workout title right so let's do that first so in here we can just return the image right and this image you can just pass in a variable name the image name right so we can use this modifier to modify the image right so we can use do resizable and also do scale to fill and do frame providing a width and height value to this image right so with the width we set it to 160 and also with the height we give it a value of 200 so once we have that you can just round the image by providing the corner radius modifier and passing a value of 12 then we can have an overlay with a test being displayed on the image right so with the overlay going to be a v stack right and this basically going to align items vertically right so the first one is going to be the spacer and next to the spacer is going to be a test widget and this spacer will push the test widget at the bottom of the image right so that's how we want it so with the test we pass in the workout title and give it a font of sub headline and provide a foreground color to be white so that is basically going to be our workout card right so let's provide some pattern over here horizontal so in our a stack um we can just Loop through by using for each right so starting from zero to three can have a single image over here can return the workout card right so here we need to pass in the image name and also the workout title so with the image name is coming from my asset directory right and the name is what image one so this how we provide the name name as you can see the effect over there right how cool is that we almost there so let's provide some padding over here right there we go this looks cool so over here um I will p in the same very thing right starting from the new release but in here the test will change to most popular this going to maintain so let me CH change this image right you can see how cool is that so in my asset um di Tri you can see I'm having this list of images right naming from one to five so let's check out our content view right so when you hit on the Discover you can see we are building up the Discover page right how quick is that so up here I would like to create a list of um images right for each of the category the new releases and also the most popular right so the variable names going to be new releases that's going to be a list right so it's going to point to an image a genic image so we are going to have image image two image one image 4 right so I be doing same for the most popular category right passing a different image directory right so in here I need to rename the variable name to most popular so we can just pass in a different image as well so this will start from 3 4 5 there we go so where we are just looping with a zero up to three we can just pass in our new reles and the ID is going to be back sl. self so image in then we can just pass the image dynamically there we go how cool is that when I save the change you can see they fit so with the most popular category you can just pass in the most popular Cate um most popular list and the ID is also going to be back slash. you can just pass in the image over here as [Music] well how Co is that so can just provide a workout title over here can see the test is on top of the image so proceeding with react native right right as usual this is a default code so I'll just start by wrapping it within a safe area and this will basically prevent it from being at the notch area and also get rid of the STS over here as you can see the effect so I get rid of test and also the status bar and I'll be returning an input component right which is a self closing component remember this input component is coming from the react native element so in our input component can see we have it over there let's provide some style so with the input container style you can just provide some styling right so let's start by giving it some butter color so the but butter color is going to be white and also border radius as well the Border radius going to be 20 and also background color so it's going to be a h value color as you can see right there give it some paring horizontal that will affect it left and right a value of 10 and also provide some border bottom width right this basically prevent underline input border so let's render some left icon so the left icon we can provide it an icon component the icon component is coming from react negative element so we need to import that from RE native elements so once we have that you can pass in the name of the icon which is a search icon right as you can see over there and this icon is of type ionicons so let's give some color to this icon right a gray color there we go let's also provide some size so the size is going to be 20 so let's see any changes there you go so let's change the color and see the effect you come back to it later so you're going to have a placeholder the placeholder is going to be what are you looking for right that's a question so let's save any changes as you can see the effect um so let's get back to the default color right so with the safe area view let's provide some Style by giving it a background color right and the background color is going to be black and let's provide a flex of font to cover the available spaces how is that So Below the input you're going to have a view um and this view is going to contain two test component right so the first test is going to be the new release so let's start the test by changing the color to white so it can be visible for to see there we go so I repeat the same test changing in the color to Gray and also the value over here to view all as you can see the effect so it's a line vertically right so with a star let's provide some Flex direction to this view right and let's align it to be in the row so FX direction of row and also justy contain to be spaced between there you go how qu that um let's also provide some padding of 10 this looks much cool so below here is going to be an empty view providing some space right so the give it height of 20 and this will basically provide some space So Below that is going to be a scroll View and in the scroll view it's going to be horizontal right so we set the horizontal property to be true so within the scroll view we are going to return our workout card right workout card component for now it's not yet created so I'll be creating it sooner so in our directory I'll be creating a components folder in the com in the components folder is going to be a new file called the workout card. JS so I'll use the rnf to generate the workout card component so that's basically component so we can just import it there we go so let's start working within our workout card so basically we'll be retrieving some image from our workout card to render it over here right so I'll get rid of the test in here and return the image component which is a self closing component that is in the source so the source of this image you can just pass in an image being passing over there and we need to import this so first of all let's tell the image right so with the sty attribute or the star property you can just provide some width so let's set a weight to be 160 and also provide height value to be 200 and give it a b radius of 12 oops let's import the image from RE to Native so in here the workout testing the image right and you're going to require the image from our asset folder so use the required keyword and specify the path so/ asset SL H 1. jpeg there we go so I can just repeat this workout a couple of times you can see it's being align horizontally so let's P out the workout card component so in the workout card component the outer view is going to I'm going to provide a p into the outer V value of 10 you can see the space in between so I get rid of this um for now let's maintain this right so we'll be having similar so I'll start by creating a list right an array of new releases and this is going to be the images for the new releases tab so it's going to be an object with an ID and also the image field so the image you use the require and the path of the image is going to be from our asset folder then you provide the name of the image so I repeat this three more times right changing in the path of the image name so this is going to be the second image and also the third image so the extension is jpg take note can use any image of your choice um so now we have our new relases you can just Loop through to return a single workout card right so I'll be creating an inner view over here and the style give it a FX direction to be row so in here new reles do map right with a cack so we can get the each workout right so we going to return our workout component so in here we will be returning our workout component so whenever you look through an array you need to provide a key so the key is going to be our workout. idid and theil image is going to be a workout. image since it takes in the image how cool is that can see it reflect immediately um so we'll be doing same for the category the most popular right so I'll just grab this code up to the scroll View and just pacing over here right how quick is that so in here we need to change in from new releases to most popular so let's maintain the view or and also everything will maintain over here but I be providing a different image for the most popular right so I'll do same over here by repeating the new releases array right so you I need to change the name to the most popular changing the ID and also specify a new image path right there you go so all what we need to do is provide the new reles are most popular and map through you can see it reflect immediately how is that so that's basically it let's proceed with our bottom navigation bar so inside our component I'll be creating a file and the file name is going to be the bottom tabs. CHS right so I'll be creating my bottom tab um component over here right so before returning anything let's first of all create an array of icons right so this comes as an object with the icon being so the first icon is going to be the home and also the text the test is also going to be the home right so we can just proceed by providing it a color as well so the color of this going to be the white color so I'll grab this object and repeat it three more times changing in the icon and also the text so in here the icon change it to the search icon the test to discover the color to Gray and also the icon change into the bookmark icon the test need to change to the saved icon sorry the save test and also change the color to gray right so in here we assume that there um selected tab is at home that's why the color Chang to White so in here let's provide some selling to the outer view over here right so let's give it a flex direction to be roll and also provid some margin of 10 give it a margin horizontal of 30 and also justify content to be space between so I get rid of the bottom tabs over here um and look through my icons so it's going to be icons do map right so in here you're going to assess the single icon with it Index right and you'll be returning the icons component so here you return the icons component that a key so with a key you can provide it a index and also can just spread out our icons information so below here we are going to create a icons component we just rendered right so so that's going to accept the icon the text and also the color and return so here rning touchable opacity right so this make sure that the icon is press touchable make it feel like a button right so inside a touchable opacity is going to be a view so inside this view is going to be an icon component right so this icon is coming from the react native element so you need to import that so the icon component that texting the type the type is going to be from the ionic cons and also Tex in the color can just pass in the color it also the name can just pass in the icon and let's provide some size to this icon of 25 so let's start this icon so by giving it a margin bottom of three and our line have to be at the center so below that is going to be a text displaying the icon name right so you can just pass in the text so let's start the test by changing the color by passing white so that's basically our bottom tabs right so you can just passing our bottom tabs over here so below the scroll view can just bring in our bottom tabs there we go how qu that so that's basically it let's move on to flatter so with flatter I just created a home widget over here that's found within the screen folder basically returning a scaffold so in the scaffold I'll be returning the body right so the body is going to start with the safe area so this basically prevent it from being at a notch area so the child of the safe area is going to be a column right and as usual the column testing the children where you can specify a list of wigets over here so the first wiget is going to be the container right so let's provide the container a width so the width is going to be double do Infinity that would take the entire width let's provide a height of four so let's wrap the column within a ping wiget right so this part is going to affect all size a value of 12 so let's provide some decoration to the container that takes in the B decoration so inside the B decoration can specify a color right so this color is going to be a h value that's looks a dark um black color there as you can see over there so let's provide some B radius so B radius do circular and passing the value of 10 let's increase it to 20 there you go so let's give the scold the background color so we going to set the background color to be colors. black as you can see let's proceed so the chart of the container is going to be a test form field right with a controller so I'll be creating the controller variable right it's going to be search controller that's going to be of type test editing controller so in here we can just pass in our search controller and also the decoration of the test form field takes in the input decoration so inside the input de creation can provide it a hint a hint text right so this more or less like a placeholder right so let's provide it a hint text oops so the hint text expect a string what I use searching for so we can actually see let's provide some hint style right so let's start our hint text so with the hint style prop you can just so let's provide some H style can just assign the text style right and changing the color over here to be colors. gray so let's saving the changes as you can see over there so once the search icon next to the h test right so we can use the preface icon and that expected widget so you can just provide it the icon widget and the icon is going to be the search icon right with a color of gray as you can see over there so let's give it some cons value over here so let's set the input border of the test Fone field to be input put b. none right we don't want any outline B within this input right so we can just set out to be none Also let's proceed to start our test form fi over here so with a sty attribute to can assign our text style so in here we need to change in the color to be white there we go so that's basically our search fi right how quick is that so let's proceed um so below the container is going to be a row right and this row texting the children you're going to have two tests F within the row right you want to align these tests horizontally so that's the main reason we align um we specify the test within the row um so the first test going to be the new releases and the next test is going to be the view all right so you can just proceed by stalling the test so with a test stle you can provide a color and change the color to be white for the first one and also grab it over here and just paste it over here changing the color to gray as you can see over here so let's space between this so we can use the main assis alignment and now we set the main ass alignment to be space between as you can see so let's wrap the row in a padding and this padding is only going to affect the top side a value of 20 as you can see so let's increase 30 okay so let's provide some cons value over here so below the Ping you're going to have a size of box right with a height of 30 right and this will basically provide a space for us an empty space for us so below the size box is going to be um below the side box is going to be a list view so the list view that's we are going to render our workout cast right so we change the scroll Direction to ass. horizontal and it expect a children where you can specify a list of wiget right so in here we need to return our workout card so I'll just pass in my workout card it's not yet created so I'll be creating it sooner so down here is going to be stateless widget right so I'm going to rename that to the workout card and it's going to return a container so here return a container give some width and height um value to that so we the W let's set it to 150 and also the height let's provide it a value of 200 now so let's provide some margin over here that's going to be Edge insert do only and this margin is going to have the right side a value of 10 and the container SP a decoration where you can just provide the Box decoration provide some color to weight so for now let's set the color to colors. white first to see what's going on um so let's proceed let's give some B radios right so can just provide our B radius do circular passing a value a value of [Music] 15 and also let's pass the clip Behavior that's going to be clip dot antialias right so the chart of this container is basically going to be the image right the image is going to be from our asset folder right so the path is asset slash the name of the image is image one and the extension is jpeg right so I think we supposed to say something let's see it changes um so let's provide a fit over here right and that's going to be our box fit do cover let's wrap the list view in the size the box and provide a height of 200 there we go as you can see so you can just provide a multiple workout card over here and this will be align horizontally how cool is that so I just grab grab this code and repeat same there we go so in here we need to change in the text over here to the most popular and also maintain a view or so now we we want the image to be dynamic right so up here I'll be creating um a list right I'll be creating a list the return type is going to be a string so this string will Point towards the image path right so the variable name is going to be the new release so it's going to be a list so inside the array it's going to be from a asset SL image 1. JPEG so I repeat it two more times changing in the image over here there you go so now we have a new reles so we need to do same for most popular one you need to render different images over there as well so I need to change in the image over here so in our workout card right the image needs to be dynamic so I'll be creating a image which is going to be of type string and require that in the Constructor as well passing our image over here so wherever you are returning the workout card an image needs to be passed right so that's basically the reason we are getting the error so the list view provides provides a children right so here we can use the list. generate that expect the length that's going to be our new releases. length and we going to return our workout card we can access the individual image by passing in the index so our new releases then you pass in our index so when saving it changes can see it reflect over there it's not able to recognize one image path let's check it all I think that should be it so let me change it for now we'll come back to late later so this extension is going to be jpeg saving the changes for now let's proceed to do same for the most po popular side right so where we are rendering the workout card is going to pretty much the same thing over here right so the children will be expecting to pass our most popular do length can just assess the index of that image right so you can just save in the changes and H restart oops you're getting an error let's get rid of this so you can just get rid of this so let's hot restart and see what is happening there we go so all you need to do is to just press start and everything will be good so let's proceed to the last part and that's the bottom navigation bar right so the bottom navigation bar property you can just assign the bottom navigation bar widget that expect the items right so the items come as a list that the bottom navigation by item so here we need to pass in the icon and also so the label right so the icon is going to be the home icon and it needs to be wrapped within the icons sorry the icon widget so icon into bracket icons. home so I repeat it three more times changing in the icon name and also the label there you go so in here we can just provide it um the type of this bottom navigation bar and that's going to be bottom navigation bar type. fixed as you can see over there so let's give it a background color that's going to be col do black so with the selected item color we change the color to be white and also with the unselected item color which we maintain the color to be the gray color there you go how cool is that so that's basically it consider subscribing like and share see you in our next tutorial until then stay tuned

Channel: CodeWithDarkwa

Views: 931

Keywords:

Id: 31SDmvWoN9w

Length: 47min 31sec (2851 seconds)

Published: Fri Nov 24 2023