Flutter Carousel Slider with Dots | Flutter eCommerce UI Design

welcome back to coding with t today we're going to learn how to create scrollable banners in the flutter so without wasting time let's quickly have a look what we're going to create our application is running and in here you can see we have already defined the header part header part of this home screen is completed now we're going to start officially this body part of this home screen the first thing of the body part is this Banner which we going to design today so we going to break down today's tutorial into three major parts so the first thing of this breakdown is we are going to need the image which will have some radius at the top you can see the Border radius maybe the Border also and we need to add radius to the image which is using the clip or R widget we are going to learn in few minutes and after that we going to learn how to create the carousel slider using which we are going to slide these images and after that we have the bottom navigation dot slider you can see at the bottom and we going to slide this image or we're going to slide this Carousel we're going to create the custom because in the carousel we don't have anything like bottom navigation so make sure to watch the video to the end so without wasting time let's get started we are creating flutter e-commerce application and we're about to start the banner tutorial of the section 3 we have already completed the section one and section two if you new you can watch the previous videos or you can get the complete playlist link from the description or from the right top corner so without wasting time let's get started with today's tutorial studio and we are inside our home do Dot and at the top you can see we have completed our header part which we have learned in previous tutorial and also I have mentioned with the section of the videos and in the previous tutorial typically we learn how to create a search bar and the categories so once the header part is completed we are officially going to start the body part so this header means that uh we are going to not use the blue part as a background but we're going to use the white part or the rest of the part of the body so before directly start coding the prerequisites or to add the assets or the dependencies you first have to go to the assets folder inside go to the images and in the banners you can see we have three banners so we're going to use these banners and I have already defined in the image strings we just have to go to the lip folder utils constants and in the image strings dot we have created a class and now whenever we want to use these images we just have to call T images do promo Banner 1 2 or 3 and it is going to give us this path of the image because they are stratics so we don't have to create instance of this class so once images declared let's go to p spec DOL file and in the local assets of this ppml file we have to Define right inside this flutter assets we have to define the banners also make sure to add forward slash include all the images inside this folder and also the dependency that we going to use is the carousel slider let's open browser and you can see this one we are going to use which a carousel slider make sure to the latest one and in the utility packages we going to paste it click on up get once done head back to the home door Dot and in here we are going to first of all design the image which is the first thing that we need to design so to design the image because image can have a border radius border itself and definitely border Shadow maybe the background color or bunch of other things so why not use the container property to do all the stuff inside this container because want to add a border radius so use the decoration property box decoration border radius do circular and we going to use the T sizes do medium let me remove the constant from the top add constant to the header also to this box decoration it's a radius so we have to use the Border radius instead border radius do circular and then as a child of this container we want to add not inside the Box decoration Control Alt L inside this container we want to to use as a child we want to add the image property so as a image because now we are fetching the assets from the local directly so we we have to use the asset as an image use the asset image and as a path of the asset image we going to use images do promo Banner so let me just show you one more time you can see we just have to call teames do promo Banner it is going to return the path of the image so it's over here add a constant let's run the application so our application is running let's head to the login screen click on sign in and you can see it's unable to load the banner as it not found issue is that I have added products over here so let's go to the image right click copy path reference copy the path from the content route and paste it over here so basically I just have to replace this banners let me just run it and you can see we have our image it's taking the complete width let's head back to home instead of this container because this container is going to contain the image itself so let me just wrap it with the pedding the pedding the equal size throughout of the screen so that's why we are going to use this bedding as a default space let's save it and now you can see beding has been applied so the image with border radius because the image itself or the design of the images itself has some border radius if I am going to change this image to the another image which don't have already defined the Border Rus you can see the image we have applied the Border radius to this container but the image don't have any effect of that border radius to apply the radius on this image we have to wrap it using Alt Enter on the top of this image wrap it the widget and the widget name is clip R right it has a property of Border radius so this border radius should be the same as the Border radius of the container because in case you are going to add border maybe Shadow maybe the background color so it will not look good so let's save it and now you can see the Border radius has been applied using this clip or control all to align the code and image is created now we want to make sure that this image can be reused on the Widgets or on the products that we are going to create in upcoming video so we going to right click on this container go to refactor extract flutter widget I'm going to name it t rounded image refector and a constant but in this case uh we cannot reuse this container or this rounded image as we want because these are the fixed things and before doing anything else in the main widget of the image we have a property which is a fit property because in most cases you might find find the images which are not fit as you want so you can use this fit property using this box fit do contain I'm going to use a contain you can see value cover contain fill and bunch of other options so the one I'm going to use is the contain so let me first add all the variables that we might require while creating the rounded image keeping all that in mind let me create the variables okay here I have created bunch of the variables the first one is the width and height then image URL itself apply is radius where we are using this widget if we want to apply the radius it should be true if we don't want to apply the radius we will make this clip our right border radius to be none or maybe false or maybe zero then we have the Border we can add a background color fit property is again we have just added using contain feding is Network image and also the onpress is Network image is the one that if we are going to use this widget as a network image so if we're going to pass the network image URL to this surrounded image as a image URL so we going to make this image Network image to True else we will make it false and also the on press is definitely in some cases not in all we might have the case in which we going to click on that image so some event should be triggered so we just have to wrap it with a gesture detector and let me add all these values down will over here okay I've added or assigned all the values in the just director on Tab this on press is going to be fast it's nullable so if we have the on press event in here it will be triggered otherwise it's not we have a width height padding inside the same container we created then is a decoration box decoration I have added a border as well and also background color or the color property but you see the Border radius is not changed so let me also change this border radius so replace that border radius with this one because the radius should be same on both clip arct and also for the decoration property and then inside this clip AR wct if apply image radius Boolean is going to be true we will apply the radius whatever passed and otherwise we going to use the Border radius do0 and inside this image fit property over here and also the Boolean is Network image we're going to use the network image and pass the URL if it's not we are going to use the asset image and pass the URL you will face the error over here if you are not going to use this as image provider with the asset image I don't know why but currently it's the old one and it's not being updated by the flutter so let's get the default values inside the Constructor border is nullable pedding on press is nullable width and height I just defined some values but if you don't want to Define it it's not mandatory you just have to add the required sign so the only thing required is the image URL so this is the best widget which only requires you to pass one value and have lot of optional values so you see we have these all values are optional except this image URL so the default values has been applied and they are already defined over here so default image will be created so border radius was missing border R is created okay at the top you can see we have to provide the required argument which is image URL so we have that image URL promo Banner 4 which don't have any radius in the image why this error required the Border radius as well let me add the Border radius instead of providing over here as a required attribute let's remove the required and pass the radius as T size. medium and now we don't have to pass the Border radius as well error is gone let's save the code and you see all the details have been applied but the width and height is 115 to 158 so let's remove this width and height let's save the code and you can see we back with the design you cannot see the Border radius because we have apply image radius by default as false if we're going to make it by default as true you can see the radius has been applied now in case if you don't want to apply the radius we have to Define apply image radius to false over here so once created let's extract this wiget to the common widgets I cre images folder and inside you can see I have created a new file which is pred image Dot and inside we have the class control or to align and head back to the home do over over this rounded image import this library and the aror is gone so the image is created now we have to make sure that we we can use the carousel slider to have two to three images or depending upon how many images we want okay so for now let's just C it from here we are going to use the carousel slider Carousel slider and inside the carousel slider we have the required item which is the items or the list of items so as a list we can easily paste our custom wiget so let's again remove this constant so let's add the options here we we have to use the carousel options property and inside we can play with this view fraction point and we're going to give it 0.8 it is going to show the enlarged images and because I don't want to do that but let me just show you let's save the code you see we have a carousel with the viewport is basically 08 then we have another image these uh this is being tweet as the unlimited scroll so let's control D to duplicated three times so let's change the image save it and you can see we have three sliders over here we can see the background because we don't want 0.8 we want the complete view fraction let's save the code and you can see we have our complete slider add a constant so kusal slider is also created add Comm over here now next thing is to add when whenever we going to scroll this Carousel slider we also want the bottom dots to be scrolled so the first thing that we need to do is we need to wrap this Carousel slider with a column widget because we want to create right below this Carousel slider a little space okay because we want to create a custom circular shapes so for the first shape let's try to use our own previously created circular container the circular container when you hover over it this is the circular container created in our previous tutorial or the second tutorial of this section so now inside this we we can easily pass the FD let's say it's a 20 cross 20 let's give it some background color and you can see we have a nice little dot with a 20 cross 20 right in the center because column by default have a center property for all the elements now to have multiple containers in a same row we have to wrap this widget with a row widget and now we can easily replicate this two to three times or as many times we want let's say three times let's save it and you can see because we are using the row property so that's why we put back to the left side because row has a complete length and we have three dots So to avoid this overriding again and again we can simply use the for property over here which is a for Loop a very basic for Loop constant control alt L and you can see we have a simple one for loop I is equal to 0 less than three we want to Loop it three times and each time want the same navigational dot when we are going to save this still it's the same we going to create a margin in the circular container because uh we have the pedding which is in the double property in a circular container we want the same ping so that's why I have used p in sets do all to keep everything in the center but for the margin we cannot use the agent sets dot all so hold over it we need to create Ed inserts variable instead of this double for the margin Edge inserts it will be nullable property so assign the margin to this margin and we are not going to Define anything by default so margin is created now head towards here create a margin because we only want to assign a little space on the right side of each navigation dot so margin will be only from the right side let's give it 10 let's save it we have to hold reload and you can see a space has been assigned or applied the last thing to change its height to four let's save it and you can see we have the design we want for the bottom navigation dots now we want to make them swing Along With or make them show the selected when we are moving this banners for there let's uh close this one close the constants go to Features shop and inside the controller we're going to create the home controller so we created a simple home controller uh simple home controller extends a gex controller and if you don't know about anything about the gex don't have to be worried so create a simple variable which is going to point to your index which is 0 1 2 or 3 So currently it's pointing to the first index which is the zero index do OBS means that make this variable or this integer variable you see this zero is an integer so basically this is an integer variable simple so this OBS is going to make this integer variable observable so now this variable can be observed using the gex by The gex Observer so this means that uh Whenever there is change inside this variable Observer is going to update the state of the UI wherever that Observer has been created so far we created a variable and a function in which an index will be passed or the current index will be passed let's say using the swipe now the index is two so the two index will be passed and that index is simply going to be assigned using the value property when you over this value you see it's set type of integer so this Carousel current index is a RX type of integer so when you we are going to use this dot value it means that we can easily assign this integer to this one so whenever we are going to update the indicator this value will be assigned now head back to the home controller because we always want to keep our design look minimal so first of all I going to extract this column as a whole refactor extract flutter widget name it t promo slider and keep our main H Ro Dart as clean as possible because the slider is only related to the home RO Dart so let me extract it go to screens in the home do do in the widgets right click create a new file I'm going to name it promos slider. do import material do do paste your file add required Imports add back to the home R Dart import this promo slider new file add a constant at the top and head back over here now inside we need to call our home controller to call the Home controller simply use controller is equal to we're going to use the get.put method but if you already defined the controller in the bindings which I will create a separate video you don't have to do this nothing to worry go for the get output and call this home controller that's it it's just uh creating a new instance of this home controller class so we will use this controller and using this carouso slider because we want to update the state of that indicator so first of all we need to know where this state is going to be updated so whenever this slider is going to slide we have a method inside the carousel which is on page change it is going to to return us an index when you H over this integer is an index of this current page and also kusal page change reason so we don't need a reason so add underscore and as a function we are going to call the function we created controller dot update page indicator and we can directly pass the index now whenever the page is going to be Chang it is going to give us a new index to this function and this function is going to assign the new index next to this Observer this observable variable sorry not not an observer itself so let me go to this row variable and right click wrap it with another wiget this time we are going to use the Observer itself which is going to observe the change of the observable Whenever there is change in that observable variable it is going to update the state just like a stateful wiget it has to be a function so in here how we are going to decide which uh indicator is selected Control Alt L to align inside this T circular container head towards this background color instead of giving this color as a green we're going to call the controller. carousel slider indicator. value if the value is equal is equal to I means if index current index is zero and also the current index selected current index is also zero this means that it is selected then we are going to assign remove the constant control alt f to align the code and you see in the background color if the controller current selected index is equal to the value of this four that specific indicator background color will be the primary otherwise all other will be the gray color so let's save it and you can see the first one is the primary color and the rest of two are in the gray color and I'm going to change it you can see the navigation position is also being changed and also we want to make the navigation dots in the center so wrap this OBX with a center widget let's save it and it's not being applied the reason is that row is currently taking the full space so we have to use the main exercise dot minimum let's save the code and you can see we are perfectly in the center and one more thing that if you also want to make this promo slider reusable a bit more times you just have to create a list of strings over here at the top same like this one so promo slider whenever we going to use this promo slider we can pass any type of banners and it is going to design those banners for us instead of hard coding everything we can simply use vn. map and we going to map the value which is e e is a simple you can call it URL replace this T images Banner with a URL property which is a string itself remove this constant and also make sure to add dot tool list at the end and also for the navigational dots because currently we have a fixed navigational dots we will use the banners do length property we going to add Loops for this custom container and that's it now we can easily pass the list of strings right from the home do do where we have called our promo slider so as a bannner list let's say we're going to pass the T images promo Banner do 1 2 and 3 you can pass any much as you want now let's save it and you see still it's working pretty fine we can easily if we want to duplicate this promo slider we can easily copy this one pass the desired images inside it and the banner will be created we don't have to do anything else so that's it for today's tutorial I hope you learn something new if you have any question you can ask me down below in the comments and if you have any confusion you can also ask me down below in the comments so that's it for today's tutorial thank you for watching take care Allah

Channel: Coding With T

Views: 26,275

Keywords: flutter carousel slider with dots, flutter carousel slider 2023, carousel slider flutter 2023, create carousel slider in flutter, flutter carousel slider code, flutter carousel slider tutorial, ecommerce app flutter, flutter carousel_slider, flutter ecommerce app, image slider in flutter, carousel slider in flutter, flutter carousel slider, flutter carousel slider autoplay, carousel slider flutter, how to create image slider in flutter, Flutter carousel slider example

Id: hkExmbmsCvQ

Length: 23min 26sec (1406 seconds)

Published: Mon Oct 23 2023