Flutter – OnBoarding Screen
Onboarding Screen is one o the most popular that you can see in most of the apps after loading of Splash Screen. Onboarding Screen gives a short overview of an app. Mainly Onboarding Screen consists of three to four layouts which slide as we click on Next. In this article, we are going to see how to implement an Onboarding Screen in Flutter App.
First, add the image that you will be using in the assets section of the pubspec.yaml file.
Now, follow the steps to implement On Boarding Screen in our Flutter app:
Step 1: Navigate to main.dart() file and return Material App()
First we have declared MyApp() in runApp in main function. Then we have created StatefulWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given title of our App then declared the theme of our App as brown. Then we have given our first screen of or slider app in home: HomePage().
Step 2: Create PageView in this Scaffold()
We have given Column in the body of our Scaffold(). In this Column we have given children which consist of PageView builder which is wrapped by Expanded widget. PageView is used to make our screen horizontal scroll able which depend on the number of items added to it. In this page view we have given scroll direction as horizontal, item Count which means no of pages . In that we have declared value for onPageChanged(). In which we have provided value. After that we have returned Slider which consist of image, title & description. After that we have created Container() outside the Expanded() widget for building dots of specific height and width in Row.
Step 3: Extract build Dot() from that Container()
After that we have extracted buildDot() from that Container() and returned another Container(). In which we have given height, width, boxDecoration() in which we have given color and border radius to our dots.
Step 4: Create another Container()
After that we have given another Container() in which we have given Flat Button() in which we have declared condition for onPressed() methods. In which after clicking button the slider will appear and after that user will get Navigated to next Screen. And after that we have given text color and given circular radius to button.
Step 5: Create a Stateless Widget for Slider class
After that we have created Stateless() Widget for Slider class which we have returned in PageView. builder. In which we have returned Container() which consist of Column() which contains our image title and description arranged in Column().
Step 6: Create SliderModel() class
After that we have creates SliderModel() class which consist of list of images, title and description which is going to be displayed in page view. In this class we have created constructor for three variables image, title, and description. Then we have declared getter and setter method to this variable.
The SliderModel() Class is defined as shown below:
At this stage, the home page looks like below:
The main.dart file: