How to create Carousel Slider using PageView widget in flutter

in this video I will show you how to create custom image slider as shown in the simulator using pitch view widget this image slider consists of two functionalities which allows you to scroll manually and it can scroll automatically according to a timer so I will guide you through the code step by step starting from an empty column widget before we dive into the code don't forget to hit the Subscribe button for the latest video firstly you have to prepare images so here I have added three images to be displayed you can add any number of images you prefer as long as it's more than one now display the image using image. assets and pass in a random image path make sure your image shown successfully in the simulator before you continue next we will create a custom stateless widget to hold the image I will call it image placeholder in this image placeholder wiget class it will return the image asset don't forget to set feed parameter to box feed. cover so the image fill the whole Space now the problem with this widget pass is that currently it will create the same viget for every viget created because we pass in a static image path to make it Dynamic we have to provide a parameter to the class and make the image assets take the dynamic value we have now done with our image placeholder class coming back to the column viget firstly I will create a size box with infinity wave and a quarter of the screen height using media query next in the child wiget use page view. builder to build the images image placeholder viget will be returned in the item Builder but there are some other parameter we need to fill firstly item count here I will create a list of string that holds the images path the item count will be the length of this list because it's the number of images to be displayed next in the item Builder is where we return the image widget so for this I will create a list of widget variable and set it to l initialization then in init State function I will use list. generate function to generate three image placeholder class wigets with each image path respectively now coming back to the item Builder we just have to return the list of widget now let's test it out in the simulator so as you can see we now achieve image slider manual scroll effect which you can only slide manually between images however there is no page indicator that shows which image I'm currently seeing now I will show you how to add page indicator to the image slider firstly we have to wrap the size Bo widget in a stack widget this is because the page indicator have to stack on top of the images now we will add the code for page indicator firstly create a container vget with transparent color then add a row viget to The Container ch in the row wiget I will use list. generate function to generate three Circle Avatar I will set the circle Avatar radius to four and a yellow background color let's try it out in a simulator so as you can see it's currently positioned on the top left we can add a position ition widget to set it to bottom then we can set the row wiget main axis alignment to Center to move the circle Avatar to Center next I will add padding to the circle Avatar so they don't stick together now it looks much better in the simulator however the circle Avatar doesn't shows which image currently in we can handle it by creating an integer value by default is set to zero which is the first image then in the circle Avatar background color we can check if the integer value is equal to the index we will set it to Yellow else will be gray color the page indicator looks much better now other than sliding through images you can also add an on Tab function in the circle Avatar so that you can tap on the circle Avatar to show the image directly to achieve that we need to create a page controller and the initial page is set to zero assign this page controller to the page view Builder controller parameter now in the on Tab function we can call Page controller. animate to page function and pass in the index I will set the duration to 300 milliseconds with curve dot is in with this on T function you can now slide from page one to three immediately without sliding one by one next it seems like the pitch in indicator is not responsive yet so in our page view Builder on page change parameter add a set State method to update the current page index to the active page variable now as you can see in the simulator when the page change the page indicator changed as well as of now we have completed creating image slider with manual effects and ont effect lastly I will show you how to create automatic scroll effect using timer so firstly we have to create a timer and a function this function will start the timer and animate the images so here I will use the timer do period function in this function I will set the duration to 3 seconds so every 3 seconds it will execute the following function in the function firstly we have to check if page controller. page is equal to image path. length minus one this mainly checks if the current page is the last image if yes then we'll call the page controller to animate back to the first page which is index zero and you can set the duration and curves as well else if it's not the last page we will just call the page controller do next page function to animate to the next image now we have completed the timer function I will execute this function in any state method now let's test it out in the simulator so as you can see I can scroll manually tap to change image and now if I don't touch it it will slide automatically lastly don't forget to dispose the timer so this is how you create custom image slider using pitch view widget if you have any question feel free to comment below don't forget to like the video and subscribe to our Channel see you in the next video

Channel: AI with Flutter

Views: 7,123

Keywords: flutter carousel slider, carousel slider in flutter, flutter carousel slider tutorial, flutter image slider, image slider flutter, carousel slider flutter, image slider in flutter, flutter pageview widget, flutter page indicator, pageview widget flutter

Id: BDWNRGZM-PU

Length: 11min 10sec (670 seconds)

Published: Mon Jan 22 2024