Page Slider Carousel in Flutter | PageView Builder | Flutter UI Tutorial

hey guys welcome back to my youtube channel today in this tutorial I'm going to show you how we can build this app UI within our flutter project as you can see over here that our app is running on both the platform on ios and android as well right and we can see our app is having a slider transition effect over here and below this transition effect we can see bottom of that friend we have get started button and the login button okay so if we click on this login button then we can see the login screen is appearing over here we can go back to our previous screen and also over here we can see the get started button so if we click on get started then we can see the sign up screen as well right so I will show you how we can build this UI in flutter in this tutorial and this tutorial will be in two parts first part of this tutorial I am going to show you how we can build this getting started screen where we will implement this slide transition effect with page view and these buttons as well and later part of this tutorial we will beat this signup screen and this login screen so if you are interested in this kind of tutorial and find this kind of tutorial helpful to you then hit the like button and subscribe to my channel for more tutorials like this I have many more tutorials on flutter and react native on my channel so if you are interested on that then you can definitely check those from my channel and without wasting any more time let's get started with the tutorial [Applause] okay so here I have created a fresh new install of flutter and I have removed extra quotes from this main dot dot file and I have provided this getting started a screen in this home attribute for this material and this is our getting started screen currently there is our F / in which I have provided the home title and the body of it has the center widget and within this Center I have provided this text so I have imported it over here so this is how our app is looking right now so from here we are going to start building our app right so first of all what we need to do right now we need to clear the slider and the getting started button and login button on this screen so we will build that over here and also I have imported this asset folder and over here we have this images folder and within this I have provided some image as well which we will provide in the slider section of our app right so here are those images which we will provide and the image for the logo as well I will provide all these files and scripts in my github repository and I will provide the link in the description we look after I complete this project now start building the UI so first I want to give a column layout so I remove it and within the column we can provide the children which 'its we can provide multiple widgets over here so why I am using column because we need to provide multiple widgets overture because first we need to provide the widget 40 slider and after that we need to provide the button for getting started button and the login button as well so for the children of this column I will provide two columns first column will hold the slider area and the second column will hold the buttons which will be the bottom part of the screen so currently I provide some text over here and four other column I will provide a flood button for the flood burden I will provide the text of getting started and after this flood button I will create a row and within this row I will provide first text and over here I will provide the text have an account question and after that I will provide another flat button which will contain the login button so now if I save it so this is how it is looking right now so this hello is the first column layout in which we will create a slider so first let me make this Center aligned and increase this fontsize little bit so it will be 18 and the font size of it also will be right in to match the similarly Oh and main axis alignment of this row will be Center so this is how it will display and then let me work on this getting started button so now the shape of this button will be rounded rectangle border and border radius for this will be border radius circular file and I need to provide a color of it currently I provide primary color later I will change it and we need to provide the unpressed as well to remove this morning so now I have provided the primary color and the text color will be colors dot white so I will provide the white colored text and the column layout for this cross axis alignment will be cross accessed stretch okay so it will be a stretch all over the screen so now we need to provide a padding for this so first let me provide padding for this button and after that we will remove some space from both the sides as well so we will provide the padding for this column as well so padding for this flat button will be pixel padding and I want to increase the font size of this button text as well so it will be font size 18 oh it's looking quite good now let me provide the padding for this complete screen so that we can have the spaces left from this edge to our button okay and for that we need to wrap this column this parent column to a padding so we can add padding over here and I will provide dot 20 pixels padding for this so now we can see it has left sufficient space from both the sides right and one more thing I want to provide white background for our app screen and for that I need to wrap this padding with a container so wrap with container and I will provide color white so now we can see our background is white also I want to remove this app bar as well because I don't need this effort over here so I can simply delete it so now after saving it we can see our app layout and I've also want to remove this debug stripe so for that I need to go to this material up and over here debug show check mode banner will set to false so it has been removed now we need to focus on creating this main column which will contain our slider so within this I need to replace it with our content and to provide the slider we need to implement the page view but before providing page view I want to design the layout for single slide item over here first and after that we will convert it to page view and create this slider so for that I am creating another column over here and the main axis alignment for this column will Center and cross axis will be Center as well and now we need to provide some children widgets over here so first of all I will provide a container which will contain the image in a circular shape so for this container I provide with 200 height 200 and the decoration will be box decoration and shape of it will be box shape circle and the image will be decoration image and over here I need to provide the image so in here i will provide a set image as i have provided the assets over here so it will be a set image and over here i can provide the path of our image and to use this image for these assets we need to first in from our app of this assets so for this within this pub spec dot ml file i can provide this assets so for this i can comment out this old and I can mention the assets so it will be assets directory within assets I have images and over here I have image one jpg image - image 3 and logo PNG file so now save it so now after that over here we can use that image so to use it I need to provide the part of this image so this is our image and feet will be box feet covered so now save it so this is our image and after this image we will provide some text or title and short description right so after this container we will provide context in which we will provide our title and I will provide style font size of it will be 22 and color of weight will be theme of context primary color for the moment so this is our title and after that I will provide some lorem ipsum text I can copy this text widget over here so I have copied some lorem ipsum text and I don't want to provide these styles okay so I remove them and now let me check it so this is how it's looking right now I can provide the text align so it will be text-align:center so I need to provide some spaces in between these widgets so for that I will provide sized box and height I will provide 10 so there is some space so I want to increase this space I have provided for P so there will be enough space and from this title and description i will provide smaller space over there so it will be sized box and height 20 okay let me provide 10 for this and after this text I will provide another sized box so I will provide this sized box over here to give some space in between these two column so this section will have some space okay so now it's looking quite nice now we need to make this section to take over as much space they can get and this will be at the bottom of the screen right so for this we need to wrap this column with a widget which is this column which is holding this complete slide item area we need to wrap this column width or widget and widget will be expanded okay so after saving it we can say that our buttons has posting to the bottom part of the screen and this is how our slide item is looking like right now and over here I have made a mistake I've provided extra color so we don't need this extra column I can remove it so I have removed one column widget from here and I need to remove this as well so now after saving it we can see that it has been positioned properly so this is a single slide item and over here we will provide multiple slides and slide indicator right so now we need to build this so to build this first we need to create a new widget called slide item and over there I will provide this column widget which folding this slide item so I am creating a new directory called widgets and within this I will create slide item dot dot file and I will create our stateless widget which will be slide item and I need to import material dot package and over here I will provide this column right so it will be this column so except this item and we need to import slide item over here and for this we need to import the slide item widget over here okay so I have provided the relative path and this is the slide item so now save it and there is nothing changed so it is working properly so now we need to provide different slide items and to provide the sliding effect we need to implement the slide items within our page view so for this I'm first creating another directory called model and over here I will provide different information for our slides items and from that model that slight list item information I will generate different slide items dynamically with in this slide item widget so first I am creating the model directory and within this I will create slide model dot dot file and over here I will create a class slide this is the structure of our slide data so over here I will provide first image URL and after that I will provide title then the description it will require all these arguments so for this I can provide required and to use this required I need to import this material dot so this is our model this is how our slide will look like these are the information one slide will hold so within this file I am creating the slight list so I am creating final slight list and it will be an array of item it will be slide and within this slide I need to provide first image URL so image URL will be assets images then image one image to image three right so images image one dot jpg so this is one data after that we need to provide a title so the title will be anything as per your requirement so I am providing this is our title and the description will be some lorem ipsum text ok so I have this slide to list ready so I am just copy pasting it over here so this is our slide items we have three slides over here and this is our slide model so now I served it now we need to import slide list in our getting started and slide items as well so we need to create dynamic slide right so to make this dynamic I need to provide the index information over here and from that index we will fetch the details from here okay so if it will be 0 then it will fetch the first item then the second then the third in this manner so we will require the index information so I have created final int index and over here now we'll record this index for this slide item to render and over here I will provide those informations so first we need slide lists then the index of it and then we will provide the image URL right and for the title we need to provide the similar thing slide lists provide the index and the title and for this description we need to do the same thing okay and we need to import it so I'm just giving you a relative path okay so now I can save it now we need to implement the page view so now it will be page view and I am creating this dynamically so that's why I will use this builder method so in that manner I can provide as many slides as I want over here in this slide lists and it will render automatically so for the Builder first we need to provide item count and the item count will be slight list dot length okay whatever item is present over here so the length of this slide lists array will be the item count and the item builder will be these slide items right for the item builder I need to provide the context and the index and over here it will build slide items with the index information so we will pass this index information I in this slide item and slide item will get that index and it will render the image URL title as per index value right so this is the slide item and now we need to provide some page view specific properties so for that first we need to provide a controller for a controller I need to create it so for this I am creating our final page controller called page controller initial page will be zero index so this page controller is private for this class so I can provide the page controller for this controller property and for the squirrel direction I want access dot Hollis hunter so now update the path of this slide and after that let me save it once so now we can see that our text has been changed as we have provided in the slide list over here right and if we slide then we can see that we can slide through different items so our page view builder is working properly and it is working as expected if I provide two vertical over here then it will scroll vertically right so that's how scroll Direction is working so now we need to provide slide indicator dots and we need to make this slide automatically so it will slide automatically without sliding on the screen by the user right so for that we need to first make it a stateful widget so let me convert it to a stateful widget and we need to manage steps over here so first I am creating a integer current page zero and after that in this post method I need to dispose the page controller so when this screen will not present so that time page controller will dispose it and it will improve our performance and after that we need to provide the init state and now we want to provide automatic transition over here so for this we need to import time and to use this primer we need to import it from dot s ink so it will be dot I think so time on periodic here we need to provide a duration and after that we need to provide the function which will perform after this duration iteratively so I am providing duration and I am providing it five seconds and after that over here we will provide timer function and within this if current page less than two then we will increase the current page to plus plus so that means it will increment it by 1 yes we will set current page as zero so the current page will be automatically zero one two after these two Russian and if it is more than two then it will be again 0 and then it will be 0 1 2 then 0 again 0 1 2 ok so this is the cycle and after that for the page controller I will provide animate to page and it will animate to current page and here I need to provide the animation duration and the animation duration will be 300 millisecond and after that I will provide link animation effect so it will be curves dot is in you can play with different animations as per your requirement so this is all in its state and after that we need to create another function which is on page changed so it will automatically change to different pages so after changing the page we to set something over here we need to set the index and for that we need to set current page to index and we are providing within this set state so it will automatically update the app and now we need to use this on page Ghent we are using it so now save it and reload this now we can see our app is present and over here we can see our automatic transition for our app right so we have created automatic transition with this timer with the help of this timer and this on page changed right and now after that we need to provide the slide indicator dots over here so to give the slide dots over here we need to first create slide dots widget so within we years and creating like dot dot dot file and over here I am creating a stateless widget for slide dots and import material dot dot package and for this I will provide animated container over here because we want to animate the dots so here I need to provide our duration and the duration will be 150 milliseconds then I want to provide a margin so edge inserts symmetric horizontal I will provide 10 and I will provide height and width of it automatically based on the current index of this slide so it will be dynamic so for this I need to creator Buddha is active and it will be required for this slide dots and this is how it will be required and if is active is set then the height will be 12 otherwise the height will be 8 similarly I will provide wait for it and it will be the same because our dots will be same height and width okay like this image in the circle now I want to provide a decoration so the box decoration will be border radius border radius all and then the radius will be circular and the circular radius will be 12 and I want to provide a collar as well and the color will be also based on the is active or not so it will be if it is active then I will provide the primary color for the dots and if it is not active then i will provide colors dot gray so I have saved this slide dots now we need to use these slide dots within our getting started screen and to use it first we need to wrap this page view with stack stack is a widget which will enable the feature to stack one widget on another widget first we want to wrap it with a new widget which will be the stack widget and for a stack widget we will provide the children so it will be children like this so we don't meet this child so our page view builder will be within this widget and after that we will provide our alignment alignment directional bottom center and for its children we will create another stack which will hold the dots over here so for this first we need to create a container and for the container I will provide Marcin bottom 35 pixel and for this stack i will provide alignment alignment direction to talk start and for this container i will provide a child row and within this row i will provide children and for these children we will provide the slide dots and we will provide the is active information based upon which light is currently active okay so it will be dynamic so to have that dynamic effect we need to provide or loop over here so i can provide a for loop over here so for int I equal to 0 I less than slight list length I plus plus and for this I will provide a check over here if I equal to current page then I will import slide dots and I will provide the information for is active boolean as proof else I will provide false so I need to import these slide dots over here and it has been automatically imported but I need to update its path so I have imported it so now let me save it once and now we can see the dots over here now we load it Dero i can provide main exercise as men access size dot main and main access alignment as main axis alignment dot center so now we can see our slide dots is showing properly at the center of this spring okay so that's how we can build this base sliding effect sliding animation effect over here and this is how we have implemented the getting started screen over here so if you have learned something new from this tutorial and found this tutorial helpful to you then hit the like button let me know your thoughts below and if you have any kind of solution for me for my next tutorial video then you can also let me know by commenting down below and subscribe to my channel to encourage my work and I will see you in next part of the tutorial where I will implement the sign up screen and login screen of this app so I will see you later so in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 45,173

Keywords: flutter tutorial, flutter carousel slider with dots, flutter carousel slider, flutter pageview tutorial, flutter pageview animation, flutter pageview indicator, flutter pageview pagecontroller, flutter carousel with dots, flutter carousel example, flutter ui design tutorial, flutter carousel slider example, flutter pageview transition, flutter page transition, flutter page view, flutter page animation, flutter page indicator

Id: oS7iK5ivgD0

Length: 34min 8sec (2048 seconds)

Published: Fri Sep 20 2019