Welcome Screen | Flutter Login UI | Flutter UI | 2023

assalamualaikum and welcome back to coding with tea today we're going to learn how to create welcome screen reflector and we will also learn how to create responsive screens using column layout widget and at the bottom you can see these two buttons with the light and dark mode we're going to create them in our theme widgets and we will use it as our generic theme so these two styles can be used throughout in our application as you know that we are creating login flutter application and if you are new you can get the playlist link from the description below in the previous story we created onboarding screen and you can see bunch of other videos and this is the sequence that we are going to follow for rest of the application so without wasting time let's get started so we are inside our project we created for login flutter replication and inside we first have to add assets as in the previous tutorial i talked about that the first thing we need to do is to add assets we have to declare all the strings all the images color sizes and all the dependencies that we need to add and then we start coding right so first go to assets in the images you can see i have added a folder called welcome images and inside i have added a single image that i am going to use after assets go to lib folder and you can see we are inside this main. but our whole application is inside this source and also we created this folder structure in our second tutorial so you can also get the link from the description below or from the right top corner so in here you can see we have constants in the colors we're going to use primary color and skender color after colors we have image strings if you're following the series you know that we declare all the images inside our image strings so we don't have to use this string and if there will be change in future for example we change the name of the folder and we change this hierarchy we just have to change it over here the rest of the application only knows about this variable then go to sizes and we have declared button height so this standard button height will be used throughout in our application and then as a text string i have added welcome screen text with the two strings so that's it for the prerequisites now let's close the constraints go to features so we are creating authentication and in the screen you see we created already splash screen onboarding screen and now we are going to create the welcome screen open it it is a simple empty class now the body lets add a container inside this container as i talked about at the start that we are going to use column layout so as a child of container let's add column you insert the column if you remember that we have three major portions the first one is the picture then we have text and then we have buttons so to create it as a children's of column first thing we need to add is an image so as an asset image i am not going to define string but i am going to call the constraints image strings and this name that we have created copy it and paste it over here import this library look after image let's add text we need two texts and also i'm not going to add strings over here but we already defined in the text strings.the first one is the welcome title press ctrl d to create another title which will be t welcome subtitle so we have one image to text now it's time to create buttons and for the button we need row because in the row we need two buttons as a children of row we have to create the first one is outline button for now let's pass nylon on pressed and as a child let's have text so you see we are going to create login and sign up over here but maybe in the future we need login and sign up text again so instead of creating this string over here go to text strings because log in and sign up can be used through our application so at the top let's create another one let's name it generic text so i have created t login with a login name and press ctrl d change it to t sign up so we have defined two names okay so head back to welcome screen and in here we will use the string we press ctrl d this time we need elevated button text will be t sign up now let's run our application and see how it's look like okay so you can see our application is running this is a splash screen that we created and after that this is the onboarding screen but instead of the onboarding screen in here go to splash we don't want to call onboarding screen but in the controller let's call welcome screen save the code so our splash screen arrives okay so our application is running and you can see that we cannot find the image with the two text and two buttons in a row so image might be we have not go to pub space or email and in here you can see we haven't defined the new folders so instead of onboarding change it to welcome images or whatever the name of the folder you created make sure you have to add all the assets or all the folders in here click on forget once done close the pubspec.eml file and go to run hot reload so we have a picture we have two text and also we have two buttons you know we are using the column load but you can see it's not covering the whole screen because the main direction of the column is in vertical so as a main axis alignment we will use main axis alignment dot space evenly you can also use space around let's save it and you can see that now we have button at the bottom and two text with an image all the four widgets are being spaced evenly or you can say the even space has been given to all the widgets but we don't want to give equal space to these two texts so we will instead grab this with a column widget and we will put this text inside the column now you can see this column have three children's so these three children's will be treated equally but not these two texts now let's save it and you can see we have two text right together so let's give theme to the text as a style we will use theme dot of context text theme so we are going to use headline three over here and as a subtitle again we are going to initialize the theme so as a second text so in here i have used body text one now to add some space around our container so go to container at a padding edge insert start from all the sides and we will use this default size variable that we created for our whole application so it will be 30.0 let's save the code now you can see we have a padding the next thing that we want to put this text in the center for that we have a property called text align text align dot center save the code press ctrl alt l to align our code so i've just changed the text our button text and image are taking equal height so instead of this we want to give our image more height so we can drag our text and button more further down so in the image we have a property height so instead of giving height over here we will first get the size of the screen whatever the application size of the screen is so to get the height of the device we will call media query and this is how we can get the size but we need height so we will go for the height so we have height in this variable we instead of the side we will use height but we cannot assign complete height to this image but we want to make sure that this image should only contain the sixty percent of the screen so write zero 0.6 we just have to multiply it with the 0.6 means 60 percent of the screen let's save it and you can see the text and buttons have been dragged down image is taking more space so you can so you can change this as per you need ctrl alt l to align the code more let me just minimize this one okay now it's time to play with the buttons as a outline button the first thing is we want to make sure that the text is in uppercase so next to the string you just have to press dot to uppercase now i want to make sure that these two buttons should get the maximum width for that we have to grab this button with the widget called expanded again if you're new you are confusing with these widgets you can watch our flutter crash course tutorial shutter crash course series and we cover almost everything columns images text rows expanded and whatever i'm using over here has been already taught in the federal cash course so i suggest you to watch the flutter crash course if you're new okay now let's save the code and you can see the login is now taking the maximum space but we also want to give equal space to elevated buttons to wrap this as well with the expanded to wrap it press alt enter and just and you can see these two are taking equal space now as a width to add some space at the center we will use size box want width so width s10 and you can see the space between two buttons okay press alt l to align the code add commas because without a comma it's not going to break the line okay let's first create the outline button design so we have a style property and we already learned how to design these outline buttons and all the buttons you can also get the link from the description below so as a style you will create outline button dot style from and in here we have lot and lot of options as i mean but on the first thing you can see we don't want these round edges so we will go for the shape so we can add rounded rectangle border there are a bunch of others but don't give radius so you can see we don't have any round edges after the shape we need to change the colors so outline button don't have a background color so let's add its foreground color so we are not going to use colors from here so we will use the color that we already created go to constraints go to colors for the light theme we are going to use skendry color and imported library let's save it you can see the text color has been changed next to this foreground color let's add or let's change the border color so for the watercolor we have a border site let's add its color also give the scandal color to this one so it's turned black the water has been changed now the next thing we need to add is a padding we only need padding from top to bottom because in the horizontal direction it is a responsive design so we will go for the symmetric vertical we will use t button height and the height has been changed so same style i am going to copy it for elevated button next to this on pressed as a style so we're not going to use outline button but we will change it to elevated button dot style from shape will be rectangular right color will be skin to dark but we also have a background color of this elevator button so the background color we will use skin free one but as a foreground color we'll use the white color size will be dark color right and button height will be same let's save it and you can see the second button has changed but the second one button also has elevation so if you don't want elevation you just have to call the elevation pass 0 save it and elevation is gone or you can also increase it by increasing the numbers so you you see that we created outline and elevated button for the welcome screen but these two buttons can be reused in the whole application with the same design so we're not going to declare it over here but instead let's go to themes in the youtube we get a theme over here and inside the theme okay here we are going to use elevated button theme and outline button theme but instead of creating it over here the way we created the text theme you see this is the format of the text theme basically created a class with the constructor which cannot be instantiated and with the static we can directly call text theme dot this you can see text theme dot slide theme indexing dot dot theme so again in the widgets i have created elevated button theme the simple empty glasses and outline button theme with empty glass so inside you see we have i have named it t outline button theme so for the light outline button theme and inside you can see i have a style property so instead of creating a style over here let's go to outline button and just cut the style go to outline this was for the live theme so import the dependencies close this one and we have our outline button theme party make sure you use outline button theme data instead of outline button theme so same goes for the dark theme we will paste it but instead of as a foreground color we're not going to use the dark color but we will use white color and also for the border we'll use white color height will be same and shape will be same so we have light button theme data and dark button theme data now to import it go to theme let's call outline button theme and we have t outline button theme dot light theme so this is the class and this is the theme that we're using let's copy this paste it for the dark and we just have to change this to dark outline button theme we will do same for the elevated button cut this elevated style for the light we have to paste the same also for the dark we just have to change the colors import library foreground color will be secondary color and the background color will be white color close elevated button and here we have elevated button theme we will use t elevated button theme dot light theme copy and paste for the dark change it to dark elevated theme and our theme is ready okay so let's close the theme let's close colors and over here you you can see that now for the rest of application we are not going to use the style property for outline button for the elevated button okay you can see that we have the same design but when we're going to switch it to dark mode and you can see we have dark mode as a background and we have these two buttons with the light effect okay the one last thing is that when we switch back to light mode we don't want to use the white color which is a default light color you can see this one we don't want to use it we want to use our primary color as a background color when it switched to the light mode so over here we can get the brightness of the application that whatever the brightness is brightness is equal to again we can get it from the media query so instead of creating another context we will call media query to this remove the size height media query dot we need brightness platform and for the height we will create media query dot size dot height okay for the brightness we need we need to know that it's a light theme or a shadow theme so let's create final variable is dark mode is equal to brightness if brightness is equal equal to brightness dot so it don't get confused with this statement if you are new so this one will be executed if brightness is equal equal to dark this brightness is equal to dark and true will be saved over here otherwise it will be false so now let's go to scaffold as its background color we are going to use is is dark mode is true if the dark mode is true means the dark mode is on then want to use skender color otherwise if it's true we want to use primary color so let's save it and you can see the primary color has been applied now let's change it to dark mode and you can see the same dark mode is over here so this is how we can create the designs now it is also responsive just to test the responsive design let's run the emulator and i'm going to run a tab over here on the tablet so you can see that our application is now running in the tablet mode and it has been working very fine although the image has been grown bigger but our design is not crashing our buttons are taking the equal space from x axis and also the text is looking pretty good so that's it that's how we create designs in the flutter so i hope you learned something new so that's it for this video if you learned something new please like the video and if you're new to this channel please don't forget to subscribe because more amazing videos are coming also you can get all the links from the description below so thank you for watching take care allah office

Channel: Coding With T

Views: 29,084

Keywords: flutter, welcome screen, flutter ui, flutter responsive design, flutter welcome login ui, flutter speed code, flutter welcome screen ui, flutter login ui, flutter welcome page ui, welcome page flutter, welcome screen flutter, welcome screen ui flutter, how to create welcome screen in flutter, coding with t, coding with tea, flutter login app 2023, welcome screen in flutter, flutter welcome screen, flutter welcome page, welcome screen in flutter 2023, flutter 2023

Id: qze9FjylzLE

Length: 16min 38sec (998 seconds)

Published: Thu Sep 08 2022