TabBar in Flutter with Scrolling Categories | Flutter eCommerce App

alikum and welcome back to with today we're going to learn how to create tab bar tab bar views and brand showcase and each category products or you you can say specific products related to each category so first of all let's quickly see what we going to create our application is running you can see we are currently in the dark mode and we have already created this home screen this design is completed all the categories banners and the product design is completed now head back to store in the previous tutorial we learn how to create custom Apper then we created this search container and the list of Brands using view all button but in today's tutorial you can see when we going to start moving the categories at the top you can see it's going to stick at the top not going above or on top of this Apper but they are stick and down below related to each category we have the name of the brand and top products or you can see top three products of the brand in this category we have top two Brands and down below you can see we have the four specific products related to the sports category when we go to the furniture you can see we have the different two brands with a different products and then we have again a different Furniture you can scroll to Electronics in this we have apple Acer and again we have specific products related to that we can also scroll to the cloth section in this we have only one brand but still we have three products so this is what we are going to create in today's tutorial the breakdown of today's tutorial is going to be very simple and very useful because first of all we will learn how to create this type of scrolling tab bars once created we will make sure that they should pin at the top after that we will learn how to create this type of showcase for each brand and after that use the products grid to display products for each specific category so without wasting time let's get started we creating flutter e-commerce application and we are in the section three in section one we have already covered the basics or setup of this folder structure constants utilities if you're new you can watch the or you can get the complete playlist link Down Below in the description or from the right top Corner also the playlist are divided for each separate section in the second section we have completed login sign up design with the forget password remember me Etc so once again you if you're new you can watch the previous videos and we are in the section three and today's video is about to complete the store section so let's get started Open studio and we are in The Home Room dot which is the first screen we have already completed and this is the storeo dot which we created in the previous tutorial you can see I also mentioned the tutorial over here 7th video of Section 3 we created nested scroll view custom appar and we have also designed search bar feature Brands and the grid of custom brand design but for today's tutorial over here inside the same sliver app bar right below this flexible space we going to design our list of t first and then as a body of this container right next to this header sver inside the nested scroll view we will display all the tab views and in the tab we are going to create the tab bars itself so first of all let's create the tabs to create tabs that are going to be fixed when we going to scroll at the top we are going to use the bottom property and when you hover over this bottom property it requires a preferred size widget same as the app bar at the top you can see when we hover over this app bar it also requires a preferred size so that's why we created the custom app bar in the previous tutorial using the implements as preferred size so for today's tutorial over here at the bottom we're going to create the tab bar and list of tabs is a required attribute of this tab bar so when you over over this tabs you see we have to provide the list of widgets which are the tabs so let's create a list over here as a child we going to only create a tab tab has a child property and let's create text as a heading of each tab let's say we have sorry not this one sports okay Control Alt L to align the code at a constant and down below let's create four to five tabs so I have created Five tabs sport Furniture Electronics you can name it anything control Orel next in this same tab bar we can add few more properties let's say is scrollable this scrollable is in the horizontal Direction yes this is going to be scrollable then we have indicator color property we can also change CH indicator as well indicator is the one at the bottom which is highlighted so let's give the primary color to indicator color we can also change the label color which is basically a text color so it again depends on the light and dark mode so let's use the helper functions do is dark mode it is going to return true or false based on the dark mode and let me show you this one as well it's a simple brightness is equal to dark mode then it is return Boolean as true so if it is dark show the white color else show the primary color remove the constant and also the last property which is unselected color when the label is not selected this will be the darker gray color okay let's run the application okay so our application is running let's go to login click sign in and the store you can see we have an error which is no tab controller for tab bar when creating tab bar this means that it's also written you must either provide an explicit tab controller using the controller property or you must ensure that there is a before tab controller so to use the tab bar or the tab bar view we have to use default tab controller so let's head at the top we have to wrap the complete design also the skold the widget which is default tab controller and inside this default tab controller we have to provide the length which is required this length should be the number of tab bars that we are going to create so let's say we have five tab bars okay let's run the application okay our application is running let's go to the login screen click on the sign in and you can see we have already created this home part and now this time go to store and upper portion was already created in the previous tutorial but today we have created this thing and you can see our tab bar is also scrollable down below we are going to design our application but when we scroll up at the top you can see it stick to the top and now when we going to scroll it back it's right where we wanted there's one issue with this tab bar when we are moving this at the top you can see the fonts and the background is very much visible so how we can overwrite this issue when you hover over this tab bar you cannot find something like a background color so how we can add a background color we can also not wrap this tab bar directly with some other container or with some other widget so that we can create background color of the stab bar so what we can do with is a preferred size if you already watch the abar tutorial the custom abar tutorial you already know this we have to create create a separate widget in which we will use the preferred size widget so let's do that let's go to the common folder widgets and in the app bar you have to create another thing which is tab bar over here because both are the preferred size I created a tab bar and also added a comment over here because the reason to use prefer size widget to create a custom tab bar those who are new let me remove this and you can see when we are going to implement this with a preferred size it is giving an error because we have to override one missing function or you can say the feature and for the preferred size widget we are going to use size. from height and this is the height of appar height when you hover over this you can go to the K toolbar height which is used you can directly use the K toolbar height and at the top we have that simple tab bar we created previously but over here you can see instead of giving the tabs as hardcoded I have created a list of widgets over here because when you H over this this tab they required list of tabs they cannot be nullable so we have created the same over here and pass those in the Constructor now we'll head back to storeo do and in here we can simply PA all these tabs so let's C it instead of this tab bar we can use the tab bar and in that we have list of tabs that we have to provide so B the tabs we created add a constant let's save this and you can see we have our new design but you can also see the background is now applied once the tab bar created Down Below in the body instead of the container because this was just a dumy container we have to replace this body with a tab bar view it also requires list of Childrens these list of children uh will be the body of these tab bar so we have five tab bars this means that we need to create five tab bar views each view for each tab bar so let's first design the first tab bar inside the children's first of all the tab bar will contain the pedding from the sides so first add pedding over here after this pedding because we have to create list of variables in a vertical Direction first Brands and then products as a child property of pedding use the column and in the column we have list of Childrens the first children is Brands second one is the products there can be any type of products but first let's create Brands so because we need a borders that's why we going to use the rounded container which we have already created let me show you this one this is the rounded container some properties are defined which are predefined now let's go back insert this container we need four things first one is to show the Border then as a border color we're going to use this dark gray and as a background color we will make this background as a transparent of this container and as a margin we will only use the bottom margin because let's say we have two brands or three brands next as a child we again want to use the column inside each brand we want to show first one the brand itself and then we will have list of images so for the brand we will going to use the same we created at the top in the previous tutorial which is the brand card you see we have already designed this container which will have icon and which will have two texts this is already designed let's go back add Children of the column first one is brand with products count we'll use the TBR card we created in the previous tutorial which is this one it has a gester detector so we can tap on this specific brand also to view its profile maybe or the details of that brand that brand could be the shop in case of multivendor application so we will use the show border to true this time previously it was false let's save the code and you can see we have a one single brand currently created inside this container which is a rounded container so we have to make this border to false because we already have border defined of this container So currently we have one brand defined next we want to show all the IM images of that specific brand images are inside the row because they are in the horizontal Direction so we will use row as a children we want to place equally size three images so that's why we will first use a rounded container to add image D rounded container height of this container will be handro background will be based on the dark mode if it's dark mode use the darker gray otherwise the light color then we also going to add margin to the right side because each image will be placed on the right side you can also uh loop through each of them and let's say when we are going to reach to the last one you cannot add the right side margin that's the optional thing now let's add image which is the asset image and in here I added image with a fit property as contain and the image will be the asset image image we already created is used over here add a constant let's save it and you can see we have only one image appearing we don't have pedding of this one so let's also add the Ping let's save it and now you can see see we have one box which is a pedding and also that there's a reason to not add a width property so the reason will be explored in few minutes so containers created let's say we need three containers in this design so three images created but we are going to wrap this with the equal size uh which are going to utilize the equal size which you can say it is an Adaptive design for different type of device sizes for that we have to wrap this row with a widget which is expanded widget which is going to squ the equal size for all of three and we going to use it on the first one you can see it's taking the maximum space so let's wrap it on all three okay I added all of three let's save it and now you can see they are taking equal space now the last thing which is to add ping around this rounded container feding is medium let's save it and our brand promo card or you can see a Showcase of the brand is ready now we are going to extract this refactor extract for widget I'm going to name it e brand showcase it's extracted now inside because we are going to use this one single brand for different categories and also each category will have two to three brands so that's why we are not going to keep the images static we will also replace the text of each brand and we will pass the brand model but we will do that in the backend tutorial but for now let's add this images and get the images from where this brand showcase is being called it is a list of string called in the Constructor so what we can do we cannot use the list of images over here like at 0 1 2 3 so why not make the code more cleaner okay down below you can see I have created a function so this function is outside of this build method this is the build method at the top and it is outside this build method which is again a function it is returning a wiget so it is going to require an image and also the context to appear for the light and dark mode so now we are going going to replace all these childrens with a single line okay next to this children because we will have list of images so we will use images do map property to map anything we want it requires a widget so we will return a widget using the function we created which is brand top image product this is the function which is going to return a widget and children also requires list of widget so as an image this e is the image which will be the single image among all these images so it will be going over here and the context will be passed at the end to make it list we will wrap it with a list so two list will return a list of children's over here Control Alt L to align okay now we have a separate function and we reduce our code into one single function we can extract it go to the brands where we created previous brand card we will create a new class brand showcase. do past or code and add all the required libraries okay once done go to store. do and import this library and in here you can see now it requires list of images so I passed three images okay now let's save the code and nothing being changed let's go to and we have an error which is controllers length property five does not match with the number of children one so this means that in the tab bar view we only have a one children which is not going to work because at the top we have five tab bars so for that in the tab bar view we should have five childrens So currently let me copy this five times which is really a bad approach just to see the design let's save it so it's saved we have list of all the tab bar views but we cannot update the image let's go over here we use the images we pass the same image to this one and we forget to add image down below over here so we will replace this asset with the image remove this constant and now this time let's save it and you can see now we have three separate images or three different images okay the brand showcase is also completed let's close it go to storeo do let me for now let's delete this as well let's also extract this ping from here because we want to paste this code not in the store do but to keep it as minimal as we can we will keep it into a separate widget which is an empty class category tab created over here so inside this class instead of the scaffold let's paste the pedding remove the constant import this Library okay now we have the brands created let's create the products and also over here let's call the category tab five times let's add a constant control alt l so that's it for the St add back to the products in here add the heading which is a t-section heading we created earlier for the throughout our project so you I'm going to use the same over here title will be you might like products and also show action because by default it's true show action button is true and on press is going to be this one then we need to add some space we also need to add space in the brand showcase right after this brand card add some space now it's looking good and also our heading is now visible and to display the products which will this time going to be four products we have first have to use the T grid layout and let's pass the four item count as an item Builder context is not needed use the index property and in here as a child as an individual product we have also created product called vertical design currently we're not passing anything but definitely we will pass individual product so let's save it and you can see we have created four products okay first let's add the space after this brand between products and Brands let's save it space is added now for the grid layout we cannot make it scrollable because we have all the products uh inside the pedding we don't have anything which can be scrolled we can only scroll the tab bar view but it cannot go beond this point so this is the maximum size overcome this issue we have to wrap this pedding with a list view not a column or not a single child scroll view we will use the list view inside the list view we will make the shrink R to True only use the available space and then to stop this scrollable effect we will use the never scrollable scroll physics because we already using nested scroll view so let's add a constant also for a little space at the bottom I use the sized box let's save it and you can see arrow is gone now we can easily use the nested scroll view effect and we can scroll as much as we want and we can also add as many items Down Below on the stream and it will not throw any error at the top for this specific category or any specific category let's say we have two Brands when you're going to save this you can see we will have two brands for each category over here and all the categories will have a different type of products also you all will take to the products of that specific category these brands are also clickable so that's it for today's tutorial when you go to the storeo dot in here in the future in the using the back end we will definitely create the models and try to map each category with their own data so that's it for today's tutorial if you have any question you can ask me down below in the comment and also if you have any confusion you can ask me in the comments you can download the complete code link is in the description and if you learn something new please like the video and if you're new to the channel don't forget to subscribe and hit the Bell icon to get notif for all the upcoming videos once again thank you for watching take care Allah

Channel: Coding With T

Views: 912

Keywords: tabbar in flutter, tabbar flutter, tabbar flutter example, tabbar flutter custom, custom tabbar in flutter, flutter tabbar, flutter tabbarview, flutter tabbar widget, flutter tab bar design, tab bar decoration flutter, flutter product card design, flutter ecommerce app ui, coding with t, coding with tea, defaulttabcontroller flutter, tabbarview flutter, tabbarview, tabbarview flutter example, default tab controller flutter, flutter, tabbar in flutter without appbar

Id: dXEKfSiAOLI

Length: 20min 4sec (1204 seconds)

Published: Thu Oct 26 2023