Flutter Onboarding Screen - Shop App Flutter - Episode 1

[Music] [Applause] [Music] so [Music] oh [Music] hello lotta devs welcome to episode number one today i'll show you how easily you can create onboarding screen on flutter at first we have an image then a large title with short one or two lines of text the bottom of the screen contains an animated page indicator and a rounded button for navigating to the next page it's time to code the screen first need a column inside the children define the illustration or you can say image and set the height to 250. it's not exactly what we want to fix that wrap column with safe area still a lot need to fix but we'll do it later below the image define a text i need a bigger text that's why i say text style to headline 5 looks good but medium font weight looks perfect and on flasher w 500 means medium font weight now set the text alignment to the center after that define another text and keep it as it is just set the text alignment to center need little free space between those two texts define a size box and set the height to 16. inside a column put a spacer at the top then add another one after the image as you can see slowly we are getting in shape we need to place the spacer after the text already done with the top part let's make a component click on the column then press ctrl shift r select extract wizard i'm going to call it onboard content need parameter for image and title also make those required means you have to pass something on that parameter now replace image string with image large text with title and another one with description back to onboard screen and pass the require parameter on slaughter a wizard called page view allow us to add slide effect to the ui so wrap our onboard content with pageview.builder and you are done now we need the bottom part first wrap our page view with a column oh no now everything is gone chose a blank screen to fix that wrap our page view with a expanded wizard use size box to define the height and width of our button i think 60 is good we don't have an exact wizard for rounded button i'm using elevated button make sure you define unpressed now as an empty function and the child is an sbz icon i want a circle button but right now the corner of our button are bit rounded to make it full rounded button change the shape to circle border last but not least change the icon color to white what we want is once the user tab on the button it slides to the next tab we need a page controller to make it happen but first convert the stateless onboard screen to a stateful widget then define a private variable with a late modifier on any state define the page controller and set the initial page to 0. don't forget to dispose the page controller back to pageview.builder and set the controller to page controller restart the app as you can see the error is gone to make it work need to call the next page method also don't forget to set the curve and duration by default i'm using 300 millisecond for that kind of animation till now each tab looks the same to fix that first i'll create a model called onboard which have three parameter image title and description once done with the model create a dummy data for onboarding screen called demo data again back to page view and set the item count to demo data dot length also replace the onboard content parameter [Music] [Music] the indicator is just a simple container with a height of 12 and a width of 4. the color is the primary blue color and the border radius is 12. extract the wizard i'm gonna call it dot indicator and add a parameter call is active and it's false by default if the indicator is active the height is 12 otherwise 4. here number of dot will be the length of our demo data and each dot at a padding of 4. [Music] [Applause] [Music] oh [Music] you

Channel: The Flutter Way

Views: 56,208

Keywords: flutter, Android App, iOS app, mobile app, UI speed code, flutter app design, flutter responsive ui, shop

Id: c4dsvckUA1Q

Length: 6min 45sec (405 seconds)

Published: Sat Apr 23 2022