Flutter Custom AppBar Design | Reusable AppBar Flutter 2023

Salam alikum and welcome back to coding with t today we're going to learn how to create a custom app R in flter if you're following the series you already know that we have created a custom AB or theme already inside our section one if you're new you can uh watch the playlist link is in the description or you can get it from the right top corner so first of all as you can see we creating flutter e-commerce application and we have already covered section one and section two and in the section one we already designed how to set up professional application including folder structure themes utilities and bunch of other things so and in the second section we'll learn how to design the login part login sign up for get password screens now officially we designing the flutter e-commerce application and we are about to create the third [Music] tutorial so without wasting time let's get started with today's tutorial open end studio and we are inside the project we created for our FL e-commerce application and for now we are inside the home do dot which we have created in the previous tutorials and today we're going to start with this container which is the previous tutorial we left off with the custom shape so custom shape is designed now on the top of this custom shape which is a container and then in the stack we're going to use this child widget right over here and we are to place all the elements the first one will be the app bar then we are going to create in the next tutorial custom search bar and the scrollable categories so for today's tutorial the first question is that why we need to create a custom theme and we have already defined the theme inside the themes go to custom theme and at the APPA theme we have already defined for the light and dark modes so why do even we need a custom theme again so the answer to this is that uh we cannot add spaces let's say we are going to use 30 pixels from the sides so whenever we are going to design the screen we first add spacing which the 30 pixel space uh all around the screen so the first need is that we cannot add space spaces Down Below in the theme over here so instead of using that same AB bar uh with the specific spaces we going to create a custom AB bar that can easily be wrapped with any widget so let me just go to the home do Dot and in the scaold let's say we're going to use our custom AB bar in some other tutorial in some other screen sorry we are going to create this AB bar so error is gone we don't have any error but let's say I'm going to wrap it with a container or maybe with a in we cannot uh do this because when you over over it we will see the error which is the argument type pedding cannot be assigned to the parameter type preferred size widget so this means that we cannot assign stateless or stateful widgets directly to this app bar when you over it it's a preferred size widget not a simple widget but a preferred size so that means that we cannot use any type of widget right uh in this app bar so to overcome that issue or to design a custom app which have some custom background maybe you want to use the images maybe you want to use some logos or anything else that cannot be done in the themes we will achieve today inside today's tutorial so to create a custom app let's go to Commons in the widgets and over here I have created a simple directory which is the appar and inside we have AB which is a simple stateless widget named TF bar which is a simple empty stess widget you can see over here but let me just cut it from here here and you can see we have to implement this preferred size widget to this stess glass so when you over over this you have to create one missing override so this is the override and in the override instead of throwing this unimplemented error again you just have to use the size basically want to pass the size to this app bar because this is the preferred size so we will use the size do from height and we have already defined it over here which is a k toolbar height so let's head back over here in the device utils do get AB bar height will return that AB bar height so once this is defined now we can easily use this AB bar or we can simply first of all we will wrap it with a pedding so we will use the Ed insect. symmetric because want to only assign spacing from the right and left sides instead of top and bottom so in the symmetric we have a horizontal property so we will go to the T sizes dot default space so it's going to assign some space to this default app so because app already have some space so instead of using the default space you can just play with these values so the default space when you go to the T sizes you can see we have small medium large and bunch of other options for the default space down below over here you can see it's a 24 so for today's tutorial I'm going to use the medium which is 16 so let's just change it with a medium it is going to return us the equal space which uh basically is the default space of our screen so so let's add a comma over here semicolon then as a child of this pedding we are going to actually create this Apper control rl2 align remove this constant or add a constant at the top now inside this appar we can easily start creating our properties so first of all because default app bars have a back arrow by default so automatically imply leading is going to be false and then as a leading we want to show some icon maybe or we want to create a back arrow so because we want to use a custom AB bar so that's why let me create a variable at the top first and in the variables you can see I have created a title widget which will be the title of the app bar then we have a Boolean variable which is going to check that if if you want to show the back arrow or not then we have a leading icon or we don't have a leading icon and then we have actions which is again going to be the list of widgets and simply leading icon on press to save the time so first of all we want to check that if back arrow needs to be visible if this back arrow variable is going to be true we simply have to create an icon button property on press is going to get return the get. back function which will be return the screen to the previous screen and we have to create function over here first and then in the icon we just simply have to create a back arrow icon which is again a custom icon which we cannot use or which we cannot uh change in the ab bar so we going to use the icons X property with the arrow left icon then in the else we again have to create another widget because whenever we going to use this custom abar we are not using the back arrow so let's say we don't have a back arrow but we want to show some other icon as a back arrow so let me paste it one more time if show back arrow is true we will simply show the back arrow and it back properties is already enabled we don't have to add anything and and if the back arrow is not available we want to let the user to create their own icon and also Define its onpress property so simply instead of this onpress we will pass the leading onpress wherever we are using the custom on press event and again the custom icon as well in the icons but over here we have one more thing Control Alt L to align if this show back arrow is true we are displaying the back arrow it's fine but if we don't have a back arrow then this icon button is going to keep the space until unless we have something as a back button so let's say we don't want to pass anything we only want to show the title in that case we are simply going to check the leading icon if it is not equal to null then we are going to display the back button the leading icon which has been passed and also the on press event of this button otherwise we are going to return the null that means that we are not going to return any type of leading widget right Control Alt L to align and then next after this leading widget we have a simple title again it's a widget so we have created a nullable widget at the top so it's all up to us we can pass the title we can avoid the title and same for the actions we have created actions property at the top when you over over this actions it requires list of wigets and same we have created actions over here which is a list of widgets they are nullable so it's all up to us if we want to pass the icons or if we want to pass the title we can pass it so we are almost done with this app bar so let's head back to the home screen and instead of this container because we want to Stack elements from top to bottom so we have to use the column inside our home screen as a children of the column the first thing we are going to use is the T app bar and you can see it's not giving us any error but at the top let's remove this app let's add a constant and also let me run this application okay so our application is running let's go to the login screen and hit in this login and you can see we currently have a back arrow at the top so let's head back to T Bar and in the default showback Arrow if we are going to pass this false let's save it and by default there is no back arrow nothing else and our AB bar is working pretty fine so for our design we're not going to pass anything prefix so let's start with a title and want to create two elements as a title so we have to use the column property in the children let me create two text so for the text one the style or the theme of the text is which is the label medium we have already defined the text theme so label medium with the apply Color which is gray so always if it's a light mode if it's a dark mode this apply property and if you want to use this apply make sure that you have to add exclamation mark and in in the apply property you have defined this color so if it's light mode or the dark mode this color is not going to be changed but rest of the design of this text theme which is label medium will be applied so I have created two text and as a text property let's go to the text files which is inside the constants text strings down below I have added two strings first for the abar title and second for the abar subtitle so once used let's save the code and you can see we have successfully created our two text with the definitely a custom space we want using this custom app bar inside the column we have the values Central align so we will use the cross access alignment and make it start save the code and the top text is also now in the left side once the title is created next to this title we want to create simply icon button which is going to be inside this actions and and in the actions we can create list of widgets so for the first widget let's create icon button currently it on press is going to be null and as an icon we going to use icons x. shopping bag now let's save it and you can see we have icon which is on the right side which is a action button or which is an icon Button as an action of the app bar but we also want to change its color so we are going to use the color property with the TC colors. white and you can see when we going to save this it's going to be white but if we want to create the cart count because it is a cart so we have to display count on it so definitely we need to create a separate widget because this widget or the home screen is going to be very large for that so first of all let's try to achieve that in the same and then we are going to extract that as a separate widget so the first question is that if we want to place two icons on top of each other so definitely we want to use the stack property so let's cut it from here first of all we need to use the stack and as a children of the Stag because stag allow us to paste or put items on top of each other and we can align them using the position widget so in the Stag first of all we need to create a icon button so let's save it you can see nothing change but for the second property which is going to be a counter we are going to design this as a container or in the container and at the width and height is going to be 18 then as a decoration to make it circular and also to add a background color we are going to use the Box decoration and first of all let's create it color color will be colors do black and then as a border radius we're going to use the circular border radius with the handroid even if you're going to pass 18 over here it is going to make it a complete round now let's try to save it and you can see a black dot on the left top corner so if we want to move this container we can wrap this wrap it with a widget widget is going to be position widget so as a position we just going to pass the right zero which is going to push it to the right side so you can see now it's on the right side and also if you want to add some transparency in this background color you simply have to add dot with opacity let's say 0.5 save it and you can see the background is also being visible so it's all up to you now if we want to add the text inside this container so definitely as a child of this container we are going to create let's say a center and in the center let's create a text we are going to use dynamically calculate total cart items over here but for now let's say we have two items in the card let's save it and we have two written over there but we have we have to change the color and we have to apply the theme to this text so I'm going to use the label large now let's save the code and you can see it's being visible to reduce the size using the same Technique we have to use the phone size Factor when you're going to reduce this with a 0.8 times let's save it it's not being saved there is something wrong I think an extra bracket now let's save the code and you can see the size of that two is a bit smaller so it's all up up to you you can do all these variations so this means that we are ready with this custom edit so we can simply wrap it right click on this stack go to refactor and extract a flutter widget I'm going to name it card counter icon which is the T card counter icon let's refactor it so we have a separate widget because uh we want to use this separate widget on different places and we also let the user to use this widget as they like for that simply create an on press and also create an icon color of this color because currently we have a blue background so that's why we're going to use this color as a white but if in case we don't have a blue background so definitely we are going to need this icon color added in the Constructor and let me just replace these values let's remove this constant so we have icon color for this icon and onpressed is over here and at the top you can see we have to pass one thing which is the on press So currently it's empty because we don't also want to design this or change this icon color so by default I'm going to use the white color so for that we simply use colors. white over here so by default white will be used but in most cases we not going to use the white color so that's why I'm not going to pass the white color so let me just remove this question mark this means that this is also going to be a required keyword and now at the top you can see we have required argument which is the icon color as well so let's pass the white color Control Alt l so I have created go to the commons and in the widgets I have created a new directory which is the products and inside the directory I have another directory which is cart and in that directory we have created a cart menu icon and which is a t card counter icon over here so let's go back import this library and we good to go now let's save it and you can see we have the same design now we can also extract this app bar refactor extract flutter widget to keep the code clean that's it we're not going to create it as a custom widget to be reusable but only widget for this home screen the home app extract it and we going to Simply paste it right where we have designed this home screen in the widgets create a new widget create a new file home abar do and import the material Library paste our class import required libraries in here text custom card counter and colors that's it Control Alt l in the home we just have to import this Library over here and you can see just add a constant and that's it we are done with today's tutorial control RL and I added some of the comments in the ab bar you can see we have the video three of this section three and then in the same section three video 4 for both search bar and categories will be created which is the next video so I hope you learn something new if you're confused or if you have any question you can ask me down below in the comments uh once again you can get or download the code from the description below which is coding with you.com and thank you for watching take care Allah

Channel: Coding With T

Views: 8,822

Keywords: custom appbar flutter, flutter custom appbar, flutter custom appbar design, how to add custom icon in flutter, how to create a custom widget in flutter, flutter custom app, appbar flutter, appbar flutter custom, appbar design in flutter, appbar widget flutter, flutter preferred size widget, preferredsize flutter, preferredsizewidget appbar flutter, flutter reusable appbar, flutter custom appbar class, coding with t, ecommerce app flutter, flutter custom appbar 2023

Id: uD_ju_cwXK0

Length: 17min 5sec (1025 seconds)

Published: Tue Oct 17 2023