Flutter Tutorial - Onboarding Screen UI, Introduction Screen, Walkthrough [2022]

how to create an onboarding screen in flutter first of all we create a page view with three container widgets with this we can swipe horizontally between our pages our containers next we wrap our pageview inside of a container and give it some space to the bottom and now we want to fill this bottom space therefore we create a bottom sheet of 80 pixels in height and here inside we create a row with two text buttons to also add some functionality to these buttons we go to our page view and add a controller and within the state we create a page controller and now we can make use of this controller and therefore we go down to our bottom sheet and here inside we create first of all a page indicator and put the controller inside with this if we swipe through the pages then the page dot indicator is animated optionally you can also change the design of this dot indicator and finally we want to make use of the controller to implement the skip button therefore we call the controller jump to page method and we go to the second page our last page and if we click on the next button then we call the next page method on the controller with this if i click on the next button we always go to the next page and if we click on the skip button then we directly go to the last page to the dot page indicator you can add the same functionality so we animate os to the page on which dot index we have clicked with this we can also click on the different dots to navigate between the pages and finally we replace the container pages by real pages so each page has a color an image a title and also a subtitle therefore i have created a build page method that takes all of these parameters and then we display first of all the image the title and also the subtitle below with this we have a real onboarding design with images title and subtitle the images i have placed in the assets folder and you also need to go to your pubspec yammer file and under the flutter tag you need to add these assets folder next within the page view we want to check if we have reached the last index the last page then we want to store it inside of a boolean field is last page and let's also use this boolean field therefore we go back to the bottom sheet and if we have this flag set to true then we want to show a text button let's also give the text button a different style and now if we press on this button then we want to navigate to the home page therefore we create a new home page and i basically create a normal scaffold let's also try it out i click on get started and we go to the home page the problem is if you restart your app or if you hot restart your application then you will always go back to the onboarding screen therefore if we click on the get started button we also want to call the shared preferences plugin and set a boolean flag show home to true this boolean flag is permanently stored on our phone and now we can also access it if we start our app for the first time and therefore we get again from the shared preferences exactly the same key this boolean and then we want to put this boolean into our app and from our app we get then basically the show home and if we have the show home flagged set to true then we want to show the home page otherwise the onboarding page let's also try it out if we click on the get started button we go to the home page and this time if we click on hot restart or restart our application then we also stay on the home page and from the home page we also want to log out again so we create an icon button and if we click on this logout button then we want to set this show home flag again to false and secondly we also navigate back to the onboarding page with this if we click on the log out button then we go back to the onboarding screen and if you restart your application or click on hot restart then we also stay again on the onboarding screen [Music] you

Channel: HeyFlutter․com

Views: 71,735

Keywords: android app, flutter, flutter introduction screen, flutter introduction screen example, flutter onboarding, flutter onboarding screen, flutter onboarding screen example, flutter onboarding screen only one time, flutter onboarding ui, flutter swipable pages, flutter tutorial, flutter tutorial for beginners, flutter ui, flutter ui ux, flutter walkthrough screen, ios app, mobile app, onboarding screen, splash screen

Id: AmsXazhGMQ0

Length: 4min 19sec (259 seconds)

Published: Fri Feb 04 2022