Flutter Tutorial - Build A Simple Image Slider Carousel | Flutter Carousel Slider

how to create an image slider or image carousel slider using flutter with the autoplaying of animations and you can even navigate here manually through your pages by clicking on these buttons by selecting here different dots or even by scrolling here through the image list if you're new here subscribe to my channel and make sure to watch this video till the end let's use this carousel slider package for creating our image slider let's get started by defining a list of images that we want to display within our carousel slider therefore we go to the build method and here we create our carousel slider widget and this comes directly from this package next we want to build then all of our images in our carousel slider therefore we define here the item count and the item builder and then over this index we can access here one specific image and we want to build it also therefore we create a new method build image and for now i create a container with a grayish color and now after a hot reload you see here these grayish containers and you can already scroll through them and next we want to display them our images inside of this container and therefore we define here an image network and put our url image inside and with this we have here this image slider and we can slide here into both directions and it is an infinite scrolling so you can scroll here through and then it will always repeat the images to make use of this carousel slider package make sure to go to your pop spec jammer file and here under your dependencies you need to include this carousel slider and later we will also use this mousse page indicator that you can already add here also inside also if you run it as a flutter web application this is also working fine and next you go then to the options and here inside you can set the autoplay flag to true so that he will automatically slide the images you also can set then the reverse flag to true if you want to have it into the other direction that he scrolls to the left side and if it is too slow for you you can even change here the autoplay interval for example to 2 seconds and then he is doing these slide animations more quickly before we have also defined within our build image method here a spacing between our images and if you like you can always change then the spacing how much you want to have here as spacing in between and if you don't like the spacing between your images you can even command it here out and then we have here no spacing between our images and if you like you can also show only one picture in the slider at a time and therefore you set here simply the viewport fraction to one and with this our image takes here the full width and you can then slide here between your images let's put again some space between our images and now we can also go here back to our options and here inside we can also set the property enlarge center to true and with this our images on the left and right side are smaller and you can also change here the strategy for example to hide and then we have here a different animation which is only animating the height of the images that go to the center location let's for now deactivate also the autoplay again and by default if you scroll to the next image then he is always snapping to this image and if you don't like it and want to have full control over your scrolling then set this page snapping to false and with this i can now scroll here every pixel and it is not snapping anymore to one specific image you also can set the enable infinity scroll to false and with this you cannot scroll any more to the left side for the first image and also for the last image you cannot scroll to the right side to go again to the first image next we can create here this dots indicator at the bottom which is then simply changing all the time if we change also our images therefore you have here within this carousel options a property on page changed and here you get then every time the index of the page after you have changed here one specific page and this index we simply want to save then in our state and therefore i go here up and create this active index field and lastly we want to create our dots indicator therefore we go here to our carousel slider and we wrap it then inside of a column widget and under our carousel slider we want to display then here an indicator therefore let's create here this new method build indicator and here we create then an animated smooth indicator which comes from a separate package and here we put then our active index inside that we have stored before inside of our state and secondly we put then here the count inside of how many dots we want to display and therefore we simply take the count of our images that are displayed in our slider and with this we have here this dots indicator at the bottom and even if we switch here our images you see that our indicator is also changing and the smooth page indicator that we are currently using is highly customizable so you can have your different kind of animations for your dots so simply check here out this package if you want to have here a full control over your dots so basically you can choose your then different effects for your dots and right now by default we have the warm effect activated and you can for example also take here the scrolling dots effect or this jumping dot effect which we want to take right now therefore go back to your smooth indicator width and here you create then this effect in this case the jumping dot effect and if you like you can also make here your dots bigger so you can set then the size of your dot in width and height and now if i scroll here through this list you see we have here this cool animation of this jumping dot another cool effect is the slide effect animation let's also try it out and you see our dot is always sliding here at the bottom to the next dot and lastly you can set then the active dot color which i set here to a reddish color and the dot color which is then the other dots that are in active and i set it here to a grayish color and with this we have also customized the colors of our dots next we want to click on the next and previous button to navigate then also manually between our images therefore we go here to our carousel slider widget and before we implement these buttons i also want to show you that you can also include here this initial page and with this you can then set initially another page then the first page which is right now displayed so if you set it to one then he would display here this first image all right now we want to navigate to the next or previous image by clicking on these buttons which i have created and therefore we want to create here first of all a controller so that we can control here our image slider and this controller you create then here inside of your state and now we want to make use of this controller if we click then on our buttons and therefore i have created here a message build buttons where i display then here one button and another button and both of them are calling then the previous and next method that we want to create here at the bottom so if we click on this next button we are going here inside and then we want to call on our controller the next page method and if we click on our previous button on the left side then we want to call the previous page method and lastly you can also define here the duration how long it should then take for the animation to the previous image or to the next image let's also try it out i click on next and you see we are navigating to the next image and if i click on previous then we are navigating to the previous image next we want to click on our dots to jump to a specific image of our image slider therefore you go to your build indicator method and the inside of the smooth indicator you have then the property on dot clicked and we want to create then a new method animate to slide and here we get then the index of the dot that we have currently clicked and this index we can now use to jump to the right page therefore we call here this animate to page method on our controller and put the index inside let's also try it out i click here on a dot and you see we are jumping then to the right image and by the way if you want to get here this whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer if you like this video make sure to subscribe to my youtube channel you

Channel: HeyFlutter․com

Views: 83,436

Keywords: animation, carousel, flutter, flutter carousel slider, flutter image slider, flutter slideshow, flutter tutorial, gallery slider, how to, image slider, image slider android, image slider animation, image slider autoplay, image slider button navigation, image slider ios, image slider web, image slideshow, slider, slider with dots, slideshow, slideshow animation, slideshow autoplay, slideshow manual navigation

Id: JEMx2ax0734

Length: 8min 56sec (536 seconds)

Published: Thu Aug 05 2021