Carousel Slider Flutter | Responsive | Carousel Image Slider Flutter | Flutter Slider Full Screen

[Music] one let's make a beautiful responsive carousel slider this would be responsive we should run on app as well as on web browser okay so before we get started make sure that you have downloaded the link from the code code link or the code from the link below which i've given below in the video description and install it and after that you should run this command plotter get pub with this you will be able to download some dependencies for the carousel slider because we are going to use a plugin for this and the plugin is this one it's a good plugin and it it saves your life and a lot of coding okay all right and after that you make sure we come over here and we delete this unnecessary code we don't need this part so let's go ahead and delete them and then we need to create import a new class and we'll call it destination carousel but the class is not there yet we need to create a new file for this class let's go ahead and create a new file we'll call it carousel carousel.dart and it would be a stateful class so yeah that's it now we need to import some of the other libraries i guess this one and regarding this key problem you may delete it it should work and or you can add a keyword which called required and now if it doesn't work like this then you may need to delete that let's go ahead and import this class first okay now it says add keyword required okay so let's work like this for now okay so now this one has has to do with the flutter or dart version different version they have different ways to solve this problem so it depends on which version you're using okay now that's perfect so let's run it before we run it actually we can change the debug mode here show debug checker mode banner as a false okay perfect now we run it on the phone over here and as well as on the terminal and from terminal we'll launch our browser okay to launch the browser you run this command flatterran d chrome so this will launch our application as a web app on the browser okay so it may take a bit of time to load so we can do rest of the work okay now let's take a look at our assets folder uh okay the browser has launched but nothing is there yet and the app has launched on the phone as well but nothing is there yet okay i think it got killed but let's run it one more time let's take a look at the asset folder we have some images these images from africa to south america some of these images actually six images would be displaying on the carousel slider so they're in asset folder the first thing we need to do we need to create the path for this images which we should do it in a code so which i have already done so i'll copy paste the code over here as you can see this is a list variable which called images and it has the image path and image name itself and then we also have places name and this places names are corresponding with this image named okay yeah so what we want to do in the carousel we want to show these images and on the image we want to be able to write this places name so that's what we want to do okay all right so now the path and images are there names are there okay so we can go ahead and start our actual coding and because this is a black container right now let's let's change the color so we'll do colors dot white okay and now we will import the library material library which is needed it did and next we'll do a padding here const edge only top 50. okay now let's run our app okay well now on the terminal we can do we can hit r button r from the keyboard and it will relaunch our uh web browser but nothing is there yet but it's just a flatter demo there's nothing to show yet okay all right the next thing we want to do we want to import our uh package or plug-in path for slider carousel slider so let's go ahead and do it so this is the carousel path uh plug-in plus and so the slider okay is there so now we can go ahead and use it okay well to use that we will use a property first which is called child and then we'll call stack widget we are using stack widget because our slider would be here and on the slider we'll have text so two widgets they're overlapping onto each other so that's why you just stack widget okay now stack widget text children okay the first child would be here cara so carousel slider this one okay now it takes two parameters one first one is item items and second one is option options okay now for this one we need to create our items these items are the images okay these images but it doesn't really take image path what it does is it takes a child widget okay over here we need to supply so we need to supply here image widgets so over here we have six images we will supply six image widgets but we should not do them manually because you don't want to write six image widgets one by one here then the code would be very large the file we don't want it so what we could do we can generate image widgets in a for loop and then use that for loop over here then it will automatically run six times based on your image numbers okay so hopefully it makes sense now so let's go ahead and do it okay so we'll call a function we'll create a function and the function return type would be list and the list itself should be widget type and we'll call the function generate images tiles okay like this now it should return something what it should return it should return a list but this list should contain image widgets be careful though here we just have image paths they are not widgets so we will return over here image widgets so first we need to generate those image widgets and then we'll return them as a list so to get the hang of these images first we'll get this images variable which is at the top this one okay and then we'll turn them into a map okay and then we'll return something over here okay return uh widget and then we'll convert all of them to list so at the end of this call this would return image widgets and it will contain six we image widgets okay now how to do that it's more like javascript or php map function or java map function they are all same it takes a value we'll call this value element and then over here it returns a function okay so in our case we'll return a built-in function which is called clip r rect so it it clips a rectangular using border radius border that's why clip erect okay and now within it it takes child so let's go ahead and call a child so within this child will use images dot asset uh this widget and this widget the name as you see from the parameter that it takes a path so our what is our path our path is element and what is the element once again element is the path each each of this okay so as it maps through it takes each of them so each of them is elements so eventually element of is our image path okay now we can decorate a little bit over here and we'll use a fit property so we'll do box fit dot cover so that it looks nice okay and after that as you can see clip wrecked are wrecked our means radius so we need to supply border radius we'll do border radius dot circular say would do 15 point zero okay and i guess that's pretty much it with our generate image tiles all it did it returned image widgets in a loop it created image widgets in a loop and returned them as a list okay so now we'd be able to use them so each time we call this function it would give us six image widgets all right okay so now we can supply it over here let's do it we'll call generate image tiles perfect now for this uh property options we'll have a built-in function which we we can call it's called kerasol options once again this is coming from the plugin itself okay now it takes a few options the first one is called enlarge page and it will do true okay now with this we are almost done with our image uh slide carousel slider we could go ahead and run it okay and now let's do the same on the browser before we go let's see wow it's working right now so as you see images are there we can manually move them left and right beautiful perfect so now if it is false let's see what happens okay yeah so as you see you can play with this property to fit your need okay all right but i'll go ahead with true okay now let's go and see on the browser okay so our browser is over here yes perfect it's also working on the browser as i said that is a responsive carousel slider because it works both on phone and the browser and if you do like this as you can see okay you can as you see that the size is a change automatically all right okay perfect so now what do you do there are a few other settings that we could do uh first one is auto play auto player equal true okay so now it will start to play automatically once we restart it and then we as you see it worked and on the browser it should work as well hit r yes yes so now it's working it's auto playing perfect that's what we wanted all right okay so the other thing we could do we can set up the aspect ratio if you don't want this size next to it like you see those two sides they're coming out so we can solve this problem with aspect ratio we do aspect ratio 18 by eight it's up to units that how you play with it okay so let's go ahead and restart it as you see those two sides are done perfect and now let's see it on the browser the browser should be same perfect that's gone as well beautiful so our slider is working okay so the next thing we want to do we want to show this uh text on the image okay text on the image so our text is this few text we need to show them on the image so what we could do we can call a widget which is called aspect ratio this is the default widget built in flatter okay so now we'll use the same aspect ratio as it as the images so that it fits correctly on the image and so that it looks beautiful okay now we'll use a child widget within it sorry child property and we'll call a center widget and then we'll again use child widget and use the text widget we'll use child property and call text widget and within it we'll say we'll supply a dummy text over here for now okay now go ahead and run it so a few things though as you see we use a center widget so it will put everything in the center of the slider okay like that if you don't do text you would put it left or right like this okay so with center as you know you can center things all right so next one is uh this you see now it looks ugly this underlines and the tag the text color we can get rid of those things so we need to use a style over here style property and we'll call textile widget and it takes some properties the first one is say decoration we'll use the text decoration dot none so with this we get rid of the text over here and at the same time we can use text color so we don't want that color we can use colors dot white and after that we could do uh say font size okay because right now the font size is pretty big for this mobile phone right so because as we are in the aspect ratio we can also take care of the font size over here for to readjust the font size on the media on mobile phone or smaller devices we can use media query off context then we'll take the size of this screen and then from there we'll take the width and after that we'll divide it by two so now let's go ahead and see the result perfect so it's a bit smaller we can try 15. okay now it's working correctly so all we did is we took the whole width and then divided it by 15 so whatever screen size it is it would be divided by 15 okay and now now let's go ahead and sit on the browser okay yes on the browser is working perfectly as you can see okay perfect so the next thing we want to do change this text and show the text dynamically okay all right so now our text is over here and it's in a variable called places okay so we need to use this places variable and before we do that we also need to take care of the uh the slider because for now we need to keep track of which slider is being showed and use that index sliders index and pass it to pass it to a function or a loop and then we will match this index with okay so we want to okay to show this text on the slider we need to keep track which slider is being played and then use that index on the text okay so let's go ahead and do it uh the first thing we want to do there is a property called on page change we'll call this one and it takes two parameters first one is index the other one could be anything okay for now we'll use the first one okay now because we want to know which index is being played or which slide is being played and change the text immediately based on that so we need to use a set state function over here because if we find our change a condition within such stain then it will cause a re-render so all we do will create a variable which is called a current and then we'll supply this index to current okay and if you don't know what is current current is being declared over here at the top okay all right so all so over here as the slide is changing so it's getting new index every time and that index is being passed to this current now the because current is being changed all the time it would called re-render wherever we use this current variable okay so we want to use this current variable over here okay and here let's call the list of places and then within it we pass our index what is our index that's called current okay now let's save it and run it okay perfect as you see now it's working as the images changes they're showing the new text okay now let's go ahead and sit on the browser as well okay perfect so it's working on the browser as well now let's test it one more time so it's very pretty responsive as you see okay all right so uh here's the thing so if you like this video don't forget to give me thumbs up and share this video with your friends and if you have any questions you can leave a comment below at the same time next we'll see how to create dots here or buttons here so that you can click on the button and you'd be able to run this slider on clicking on the button as well

Channel: dbestech

Views: 16,489

Keywords: flutter image slider, flutter carousel slider, carousel slider flutter, flutter carousel, flutter carousel slider code, flutter carousel animation, flutter carousel slider example, carousel image slider flutter, carousel slider flutter source code, flutter carousel slider full screen, flutter carousel indicator, flutter carousel tutorial, flutter tutorial 2021, carousel slider in flutter, flutter ui tutorial, flutter slideshow, flutter carousel slider with dots, flutter slider

Id: 3GJach7WmFY

Length: 17min 48sec (1068 seconds)

Published: Tue Jun 29 2021