Flutter Tutorial - Horizontal/Vertical PageView and PageController.

hi everyone welcome back to my channel in this video I'll be talking about how to create this kind of UI with the help of page view widget in flutter basically we will be developing this kind of UI where you will see image with some text and when you will scroll it will be scrolled like page view for this I have used page view Builder so for this stay tuned with us let's start coding right after this [Music] [Music] intro so this is my home screen and uh I'm calling this home screen from my main function this I'm using abar Center title is true and as a title I'm using text widget and uh also I will provide background color to this cap fold and let's take colors do purple and the shade of 100 and inside the app bar text this flutter page View and let me provide the styling also text style basically I'll provide some color so color dot [Music] white that's it and the background of app bar color I'm using colors. purple with the shade of 300 okay and inside body I'm using Center and inside this as a child I'm calling this class sliding card view I have create separate class for [Music] this this is the class sliding card View and let me do coding for this this is stateful kind of widget and here I'm creating page controller by the name page controller then importing some predefined functionality in it State here I'll initialize our controller just page controller and viewport fraction initially I'm using 0.8 I will change this value and will show the effect what will happen when I will change the value of viewport fraction so on dispose again we will have to dispose the controller so page controller dot [Music] dispose now let's jump into the build function is returning size box it is a root wiget for build function so height I'm taking here media query of context do size dot height multiplied by 0.55 so I want to show page view in the center so I'm using Center wiget in home screen and height is 0.55 and after that child will be Page view. Builder and item Builder obviously it will take context and index curly bra and here we will have to return but before that we will have to add item count so for this I have created demo card data array and we have created separate model for that so let's code that this is the separate class for our data which will come statically here when you will work with API then you can get this data from server for now I'm using using here card data model and taking two values name and image and this image is coming from the asset basically I'm adding here 10 elements so after that this fifth one this is the sixth [Music] [Music] one 7th 8th 9 and this one is the last one I've taken image from the assets so for this my pictures are in the assets folder and here are the images directly in the assets folder [Music] you will have to make this [Music] alignment when you are using asset image you will have to use the proper alignment that I'm using here so we are done with card data model now here we will have to add clip Behavior not none and controller page view controller page controller sorry now we will return our UI for image and text so initially I'm taking container and clip Behavior clip do [Music] none and the margin constant I'm providing to avoid warning lines Ed inserts only from the top I want margin so left and right H respectively the bottom I want 24 decoration box decoration we'll provide some box shadow colors and all so color for this container I'm using colors. purple with a shade of [Music] 200 and Border radius we will have to apply Corner radius so border radius not circular and we want to apply border radius with 32 value from all four sides and the Box Shadow for box Shadow I'm using box Shadow with color could be black with opacity 0.4 that would be fine and for offset offset value value 8 and 20 and blood radius 24 we will change the value later to show you the effect of [Music] this and now I'm adding child here and as a child I'm adding column and we will place our image and text inside this column so it will take children the type would be widget and we will add this big bracket and inside that clip arct for providing Corner radius to the image ass set border radius order radius dot vertical let me provide the value top radius do circular and 32 would be this value and the child image. asset for showing our asset image so our image will come from the same array so asset is common here so I'm adding slash and the dollar Mark will show the value so demo card data array and then we'll pass the index here next dot this image [Music] the height for the image I'm taking media query off context do size do [Music] height multiplied by 0.4 you can adjust height width of the image from here and the width I want my image to take the full width of its parent widget so I'll apply media query of context do size do WID and fit will be box fit do [Music] fill so this part image part is done and rest of the content is for text so here I'm providing some gap between image and text so I'm using size box with a height of8 and here I'm using expanded widget and inside this I'll use text widget for showing our text text and again I'll use before that let me align my text to the center and I'll use demo card data array for the text value demo card data and we'll pass the index here dot name so we will be able to get name from this and let me provide some styling because our text is quite bold so text style and we'll increase the font size [Music] also so font weight font weight dot value of 600 font size I'm using 20 here so let me run my code for [Music] now for now it is looking good and again there are few parameters on which you can play with that so box Shadow I'll increase the value 0.7 as you can see the shadow is changing with the help of this opacity and also blood radius is also changing now Shadow is appearing to be darker one for now after after changing the value so you can change this value and you can get your desired UI output and there is one more thing viewport fraction so now I'm changing it and you will see the difference I'm using 0.4 this is used for showing the particular page view how much area will be visible to the user like this now I'm using 0.4 as you can see more than one page is visible to the user now if I will use one then you will see maximum value is one here so I'm using one now you will see there is single card appearing to the user at one time so you can increase and decrease this value according to your requirement I will put the code on GitHub and we share the link with you and make sure you do subscribe to our Channel like the video hope to see you next time in our next [Music] video

Channel: thecodeme

Views: 433

Keywords: flutter, flutter tutorial, flutter for beginners, flutter animation, flutter app development, dart language, easy UI with flutter, learn with flutter, make app with flutter, package of the week flutter, flutter package of the week, flutter design of the week, flutter user interface

Id: uSHBwM1jQXQ

Length: 16min 31sec (991 seconds)

Published: Tue Jan 16 2024