Search Bar and Horizontal ListView builder Categories in Flutter 2023

Salam alikum and welcome back to coding with t today we're going to learn how to create custom search bar and also how to create horizontal scrollable categories in flter so first of all let's quickly have a look what we are going to create okay so our application is running okay so we are inside our login screen and in here we are just going to use the Google signin method click on it select your email and we are login with our main application and in here you can see in the previous tutorial we learn how to create this custom appar with the custom shape the background so in today's tutorial we're going to design this custom search bar you can see in the white background we going to design it in a way that it can be reusable throughout our this application or for other future applications because if you go to the store you can see we have also used the same custom search bar over here so we going to design this custom search bar in a way that it can be reused after that same in today's tutorial we're going to create this scrollable categories with a background which is white background with a text at the bottom and you can see when text text is going to be bit large or it is exceeding the limit it will be using the ellipses of our flutter text so we'll also try to make it responsive as well as adaptive design so let's get started if you're following the series you know we are creating flutter e-commerce application and we are inside our section three in first section we have configured and set up our project and then in the section two we learn how to design the login sign up part so if you're new you can watch the previous videos and also you can get the playlist linked down below from the description and also of you want to download the code or get the source code for free the link of that starter kit is also provided in the description so without wasting time let's get started with today's [Music] tutorial open and studio and we are inside the project we created in our e-commerce application so in here you can see in the previous tutorial we learn how to create this home app bar which is inside the widgets which is over here in the home appar do Dot and we learn how to create a custom appar using the preferred size widget and also created the card counter icon which is over here so let's go to the home do Dot and start with the today's tutorial which is the search bar to create a custom search bar first of all if you remember that we are going to create that inside our header container which is the custom header and you see we have a stack and inside that stack we have that background design which we have created and inside that we have created a column and in that column we first created our app bar which is right on top of our design and now down below we are going to create the search bar to create a search bar or the custom search bar we're going to use this container so first of all let's give the width of this container to assign the full width we have already created device utils do get screen width pass the context and this is going to return us a complete width of our application so at the top just remove this constant add constant next to this home app bar and the error is gone so with this given now let's add some pedding inside our search bar so we are going to use admin sees. all and I'm going to use the medium size so let's go to the sizes and you can see the medium size is 16 let's add a constant okay inside this container because we have to make it circular to give the radius and also to add a border we have to use the decoration property use the Box decoration and inside first thing let's add a color color. transparent for now but when we going to reuse that widget or create a custom widget we will switch that color and make it reusable for other applications if we are going to need color in case then we have to add a border or the Border radius so let's add border radius. circular and as a card radius we are going to use card radius. large let me show you as well in the sizes class same we have a property which is card radius which is again 16 after that we have to add border and use the border. all property as a color of the Border I'm going to use the gray color okay once the side decoration is done let me also run this application okay so our application is running let's go to the login click on the sign in and you can see we have a transparent border and also it's being touching to the bord so to wrap this container with a pedding because we have to make sure that all the elements inside the screen should use the same side space so let's use the sizes do default space but not from the all side but we only want this space to be in the horizontal sides so in the horizontal we going to pass the space default space which is 24 so let's save it and you can see your design is now aligned to add space behind or below this Apper not behind sorry use the constant we going to use the size box and give it a height space between sections and also let me show you this as it is 32.0 let's save the code okay so space added now inside the spading let's start adding a row because because we want to add icon and then a text so for that because we want to align elements in a horizontal Direction so we have to use the row as a child of this container inside the row use the children and the first property is the icon we're going to use the icons X which is a search normal and then because have to pass the color let's say we're going to use the gray color over here let's save the code and our ion is added next to this icon we have to give some space or horizontal space so we are going to again size box this time use the width property and we're going to use the space between items not between sections so let's save it space is added next create a text add a constant at the top okay I've added the text with a search in store and style theme as applied with a body small let's save the code and you can see we have text appeared but let me just change this transparent color to colors. white or we going to use our own colors D color white let's save it and you can see we have successfully applied the background color now we have to change this color as well so let's make it darker gray save the code and our text and icon is pretty much visible so our container with a search bar is ready now right click on this ping Vector extract as a flutter widget rename it as a e search container vector and we have our own search element created let's add a constant now in here uh there are two things that you have to learn let me go to this store screen and you can see this tore screen don't have anything like the background and also we're not using this uh search bar on a blue background right so same way if in future we have to reuse that widget on other functions or in other applications we might have some other scenarios so while creating reusable widget which we can reuse in separate projects so we have to keep this in mind that this widget can be reused or designed in a way that it can be reused in any case so let me show you in here first of all let's create the properties we don't want the background to be fixed we don't want the Border color to be fixed and also text to be fixed so in here I've created a text icon so just copy it and replace it with a fix text same just copy this icon replace it with the icon over here remove this constant you see this icon is aable so if in case or in some other project or if even this in this project you don't want to use the icon you uh just you don't have to pass any icon or you just have to use the icon which you want and also down below you see we have two Boolean varibles which is a show background and show border so if in case we don't want to show the Border or the background so we can easily deal with this so first of all let's go to the show background let's see this is the background color so add show background over here add a question mark If show background is true then we have to check that if if it is a dark mode or the light mode So based on that we have to switch the colors so at the top inside this build method first of all let's create a variable which is going to return us the state of the brightness of our application which is light or dark mode so let's say dark mode is equal to T helper functions import this Library T helper functions. is dark mode so this is going to return us true if the dark mode is enabled and false if it is not if you want to show the background then we are going to check that if it is a dark mode we are going to show the dark color else we are going to show the light color which is white so this is a dark and let's change this white to the light color okay next if you don't want to show the background then we are going to use the simply color do transparent if show background is true it is going to decide it is light mode or dark mode then apply the relevant color and if we don't want to show this background we just have to use this else property which is the transparent and same let's add the Border in the border. all first of all if we want to show the Border this will be the Border else border will be n so it means that we don't want to show any border same we can use the dark mode for this border as well over here for the colors but for now let's keep it gray okay once these values are applied over here let's add them in the Constructor so whenever we are going to use this class or use this widget it's all up to us to pass these values the value which is required is a text and also show background and show border is required so we can remove this required as well so let's say we already have a design ready and we don't want to repeat that values over here inside our container at the top so what we can do is we can remove this required from here and let's say we are going to by default show background is equal to true and same for the show border is equal to true so we're going to use these values it is not going to be required any longer so what is required is a text at the top you can see in the search container only text is required when you hover over this you have to pass text which is a required keyword icon is nullable show background and show bord by default we have provided something and once the text is provided you see the error is gone now let's save the code and you see our icon color is gone or disappear because we don't have that icon so let me also provide the default icon which will be the icons x. search normal and if you want to use that icon you just have to call this icon and you can pass any icon you like so that default icon will be replaced now let's save the code and you see the icon is right over there okay now let's extract it let's go to the custom shapes in the containers let's create a new file name it search container import material and paste the code import required libraries press control or L and that's it we are done let's go to the home do do import this search container so our search container is ready let's add some space as well down below the search container and now we can start creating our categories for the categories in the previous search container we provided the padding on the both sides but for the categories we are not going to provide the space on the both sides but we will only keep the space on the left side because we want the scrollable categories can scroll throughout the screen on the right side so in the padding as ins sets dot only and we will use the left side and again which will be the default space from the left side then as a children of this pedding we have to create a column because first thing is a heading then inside that heading we have to create scrollable categories so that's why we need to use the column inside the column add children's Control Alt l in the children's the first thing is a heading so I have created a text with the popular categories and style theme is headline small let me remove this constant add constant on others widgets okay because we want this uh text to be reusable which is the heading testt and uh let me also show you on the screen okay because we want to reuse the heading again and again on different sections so why not create a separate widget so that's why let me show you inside this function you see we have a popular categories heading and down below we have a popular product heading with a next button which is view all if we go to the store again you see featured Brands and again a view all button down below let me show you you might like again we have a view all button so because we want to use this heading again and again so why not create a separate wiget which will be the section heading or you can name it anything so this heading is not going to exceed sing Max lines so let's provide the max lines as one then if it is going to exceed its space so over overflow will be ellipses which is going to add dots when it is going to exceed its limits and the second thing we have to create is a button not in here which the button is not required over here but it might be required in other places so let me also wrap this text with a row because in the row we want to first show the text and then show the button if uh we want to show it so let's wrap it with the row after this text create a text button on press is currently null and text is the button title so let me just right click on this scow refector extracted as a flutter widget and let me name it as the section heading and now we can easily use the section heading throughout our project without redoing anything we will same apply the theme we don't have to worried about the theme the lines the ellipses or its responsiveness so we can easily manage all things over here to reuse this on different locations the first thing we required is a text then button text and also this on press over here so you see we have a title button title on press of the button text color might be different in here we are using the white background and then we are going to use the black background so that's why we need to use this next color as well so let me assign these properties for the text color right after this heading add exclamation mark do apply property and in the color we are going to pass this text color property which will be provided from the widget wherever it is going to be used this show action button is a Boolean so we have to use it over here let's scroll up show action button if we want to show this action button that's fine else we don't want to show it provide the N so the better way to do is you just have to create the if statement and inside you have to use show action button if the if is true we are going to display this text button and let me also replace this title as well with the button title remove this constant also remove this text with the title on press will be replaced with this onpress so once everything is done go to this section heading click on ADD final arguments so onpress is being passed over here which is nullable if you want to pass the onpress it can pass it over here if you don't want to pass it not the user wherever we going to use this so it's optional text color is again an optional button title is view all for most of the cases but if you want to pass the button title you can pass it same title is required so only thing which is required is a title show action button is by default false or let's make it by default because most of the cases we are displaying that show action button so in the section heading when you hover over it we are required with the title popular categories and in this case we don't want to show this action button so let's make it false we can easily extract this widget so let's go to the common in the widgets let me create another folder for a package name a text because all the text wigets will be inside this directory so let's create create a file section heading do do import material do paste the file import anything but nothing is required control RL to align let's close this go to the home and we can easily import The Heading okay once the heading is created we want to give a small space so let's just copy and paste the size box again with the height not between the sections but a small space which is a space between items space between item is the half of space between sections so down below we are going to create the scrollable categories because categories are horizontally scrollable so that's why we going to use the list View and for the list view there are two ways uh to use this list view one way is to use the list view in a manual way and add all the properties manually but we're not going to use the manual method we are going to use the list view. Builder which help you to easily attach your backend categories so we are not going to fetch the categories from the back end in this tutorial because it is a design tutorial so I'll teach you that how you can get the categories from your local storage and you can easily replace that controller one function and you can get all the values from your Firebase SQL or from any function so let's create list view. Builder as a item Builder we first have a context which we don't need and then we have the index which is actually going to highlight current item Control Alt l so first of all before we're going to create an item Builder so the first thing which is required is the item count so before we are going to create a function for the back end let's just give some value which is item count for six okay now because we want to make it horizontally scrollable so we have to pass the scroll Direction which is the exis do horizontal and now inside this item Builder let's start designing our category for the category we have two things circular image at the top or circular icon at the top then we have a text at the bottom so for the vertical alignment we're going to use the column in the vertical column childrens's the first thing is a circular image so to create a circular image we are going to use this container withd and height of 56 feding will be from all sides as inserts. all and we're going to use the T sizes do small which is 8.0 let's add a constant because want to make it circulars and also add a background so we have to use this decoration use a box decoration add a color and a border radius of border border radius and Border radius will be border radius. circular we can easily give 56 to make it circular so let's give it 100 let's save the code but we have some issues because want to return this column so I return it error should be gone let's save it and you can see something pushed at the top because there's a reason list view. Builder is not allowing us to use this space provided so for that we have to do one more thing over here first of all in the list view let's try to add shrink craft to true because it should not add all the space so let's save it nothing change to make this list view work we have to wrap this list view with a widget which is a size box the reason is that currently it don't have any fixed size because the vertical height is not limited in the list view because list view by default is uh scrollable then we also have a column at the top so that's why we have to provide a fixed height so it cannot get any unbounded height so let's pass the height as 80 save the code and you see we have we have how many items we have six item counts over there and they are creating a circular shape so we only have a created container now inside this container as a child we want to add an image it should be Center as a center child let's create an image it will be the s image which we are going to pass in a few minutes and then again inside this image we have to use the fit property box fit. cover and also we can pass the color property for the light mode colors of each image color should be in the white so for now let's pass the dark color let's use the teamj sport icon and when you go to this image strings Down Below in the utils constants you can see over here in the image strings I have added all the or the icons which we going to use as a category icons so at the top you first have to go to the Assets in the icons you will get all the category icons you can again uh get all the assets for free link is down below in the description so once you have everything in here you just have to go to the pope.l file and in here the way we have added these paths you just have to add the brands and categories as well so let's go to icons in the categories right click copy path reference path from content route and we can easily paste it over here make sure to add forward slash now we can easily extract the categories or use all the categories okay once done so PP has been changed click on get dependencies or run the FL PG okay here you can see our heading and also all the icons with the image is being displayed now let's save it and you see I change the icon to shoe icon and you see all the icons has been replaced now our container is ready which we can call as a header circular icon at the top now we have to add a text at the bottom so first we need to add a space space between items and also we going to divide that space to half okay for the text I use the theme which is the label medium but again for to apply a color because we have a background which is blue so we have to apply a color which will be white color now let's save it and you see all the categories have their own text so in here one more thing is that let's say we have a category name which is a little larger shoes category now when we are going to save this you see that our design is not as the design we want which is although scrollable but uh it is not taking the equal space so to overcome this issue you just have to wrap this text with a widget which is a size box widget and as a width of this size box we are going to provide the 55 which is the maximum width and now you see that our categories are definitely not exceeding the 55 withd but our text is not going to be the ellipses text now insert this text Control Alt L2 align and after this style we have to pass the max lines as one overflow as ellipses when you save the code you see that we have a single dots and also the max line is not going to exceed the two lines so our error is gone to add space between each category we can simply WRA this column or you can also use the list view do separator so let's WRA this column with up pading change dot all with the dot only and on the right side of each category we're going to use the space between items when you save it you see we have a equal space between all the categories and also at the top we have to change the heading text color to white and let's save it so our design is pretty much ready okay as we going to reuse this icon with a text in multiple places so why not create a separate widget so click on this pedding go to refactor and extract as a flutter widget going to name it P the vertical image text click refactor and add a constant and in here we are not going to redo the design we only have to pass the image title and when this category is going to be tapped so three things may mainly image title and also the on tab with a text color and also the background color which is also required let's add these values in the Constructor and also replace these values over here and for the on Tab when you click on this spreding right click create a widget which is a gesture detector and inside this gesture detector let's add the on Tab and pass the on Tab to it so whenever this is on Tab is going to be tapped it is going to trigger for the single category so I've added all these elements right down over here Control Alt L let's add the default text color which is the white and at the top in the vertical image we have to pass the required attribute which is image which is the shoe icon remove this constant next we have to pass the title and definitely on Tab which is currently not going to do anything but later on it will lead us to the subcategories of this specific category invalid constant so you have to remove this constant let's save the code and you see the background color is also needed so by default we going to assign this background color as the white color now let's save it and you see it's working pretty fine and down the background color if background color is required then we going to use this background which is not n then we are going to use this background color otherwise this double question mark means that if this value is null use this value so we are going to use the dark mode we're going to check if it is dark mode we will use the black color otherwise we are going to use the white color so same we can change the image color as well currently see it's a dark color so we can replace that color with the by checking the dark mode if the dark mode background color will be black so the icon color or the image color will be white so it's a vice versa so I have created a variable at the top instead of reusing these values down below over here so which can be simply replaced with a dark mode Control Alt l so we have a circular icon we have a text with the gesture detector and vertical image text has been created which can also be used in the search and multiple other locations okay in the common widgets go to the widgets and I have created a new directory which is the image text widgets and I have pasted the simple class over here so and go to the home do in the vertical text image import this library and we are good to go okay now for the future video or for the back end video which is in the next section we are going to learn how to fetch all these categories from the Firebase and then we going to definitely use controller to show a list of categories right over here okay also to keep the design clean right click refactor and we're going to create these categories as well for a separate widget so the home categories and we can remove it inside the home widgets because it's a specific related to the home so inside the home widgets create a new file home categories do dot V the material Library past the code import the vertical image text control all to align and inside the home do we can simply import the libraries and you see our code is pretty much clean at a constant so that's it we'll learn today to create search bar or a custom search bar reusable search bar so you can also go to this pedding and also wrap it with a widget using gesture detector so create this on TP method and use the gist detector to paste it over here and again it's nullable so it's all up to the widget where we going to use this so for now currently this search container on T is not going to lead us anywhere but in future we definitely going to use it so that's it for today's I hope you learn something new if you learn something new please like the video and you can once again get or download the complete code from the description below you can directly get it from the coding.com you can get the link from the description once again thank you for watching take care Allah

Channel: Coding With T

Views: 19,730

Keywords: flutter search bar, search bar in flutter, search bar in flutter with firebase, flutter search, flutter search bar widget, flutter category ui, flutter category list, flutter category, flutter search bar example, custom search bar in flutter, coding with t, ecommerce app flutter, flutter categories, listview in flutter, listview builder flutter, horizontal listview flutter, horizontal listview builder flutter, category design, flutter ecommerce app, flutter listview

Id: tojRS4dJkLg

Length: 28min 29sec (1709 seconds)

Published: Sun Oct 22 2023