Flutter – OnBoarding Screen

Onboarding Screen is one of the most popular that you can see in most of the apps after loading of Splash Screen. The Onboarding Screen gives a short overview of an app. The 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. A sample video is given below to get an idea about what we are going to do in this article.

First, add the image that you will be using in the assets section of the pubspec.yaml file.

Dart

assets:
  - images/slider1.jpg
  - images/slider2.png
  - images/slider3.jpeg

Now, follow the steps to implement the On-Boarding Screen in our Flutter app.

Step-by-Step Implementation

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().

Dart

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {


  @override
  Widget build(BuildContext context) {
    return Scaffold();

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.

Dart

@override
  Widget build(BuildContext context) {
    return Scaffold(

      // Column created
      body: Column(
        children: [
          Expanded(

            // PageView Builder
            child: PageView.builder(
                scrollDirection: Axis.horizontal,
                onPageChanged: (value){
                  setState(() {
                    currentIndex = value;
                  });
                },
                itemCount: slides.length,
                itemBuilder: (context, index){

                  // Contents of Slider that we
                  // created in Modal Class
                  return Slider(
                    image: slides[index].getImage(),
                    title: slides[index].getTitle(),
                    description: slides[index].getDescription(),
                  );
                }
            ),
          ),

          // Container created for dots
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(slides.length, (index) => buildDot(index, context),
              ),
            ),
          ),

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.

Dart

Container buildDot(int index, BuildContext context){

  // Another Container returned
    return Container(
      height: 10,
      width: currentIndex == index ? 25 : 10,
      margin: EdgeInsets.only(right: 5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.green,
      ),
    );
  }
}

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.

Dart

Container(
           height: 60,
           margin: EdgeInsets.all(40),
           width: double.infinity,
           color: Colors.green,

           // Button
           child: FlatButton(
             child: Text(
                 currentIndex == slides.length - 1 ? "Continue": "Next"),
             onPressed: (){
               if(currentIndex == slides.length - 1){

                 // Navigate to next screen
                 Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Screen1()),
                 );
               }
               _controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
             },
             textColor: Colors.white,

             // Border radius to button
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(25),
             ),
           ),

         ),

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().

Dart

class Slider extends StatelessWidget {
  String image,title,description;

  //Constructor created
  Slider({this.image, this.title, this.description});

  @override
  Widget build(BuildContext context) {
    return Container(

      // column containing image
      // title and description
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image(image: AssetImage(image)),
          SizedBox(height: 20),
          Text(title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),),
          SizedBox(height: 12),
          Text(description),
          SizedBox(height: 25),
        ],
      ),
    );
  }
}

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. 

Dart

class SliderModel{
  String image;
  String title;
  String description;


  // Constructor for variables
  SliderModel({this.title, this.description, this.image});

  void setImage(String getImage){
    image = getImage;
  }

  void setTitle(String getTitle){
    title = getTitle;
  }
  void setDescription(String getDescription){
    description = getDescription;
  }

  String getImage(){
    return image;
  }

   String  getTitle(){
    return title;
   }
   String getDescription(){
    return description;
   }
  }

  // List created
  List<SliderModel> getSlides(){
  List<SliderModel> slides = new List<SliderModel>();
  SliderModel sliderModel = new SliderModel();

   // Item 1
   sliderModel.setImage("images/slider2.png");
   sliderModel.setTitle("Copper Articles");
   sliderModel.setDescription("Interested in buying Copper Handicrafts");
   slides.add(sliderModel);

   sliderModel = new SliderModel();

  // Item 2
  sliderModel.setImage("images/slider2.png");
  sliderModel.setTitle("Copper Articles");
  sliderModel.setDescription("Interested in buying Copper Handicrafts");
  slides.add(sliderModel);

  sliderModel = new SliderModel();

  // Item 3
  sliderModel.setImage("images/slider2.png");
  sliderModel.setTitle("Copper Articles");
  sliderModel.setDescription("Interested in buying Copper Handicrafts");
  slides.add(sliderModel);

  sliderModel = new SliderModel();
  return slides;
}

The SliderModel() Class is defined as shown below:

Dart

class SliderModel{
  String image;

// images given
  SliderModel({this.image});

// setter for image
  void setImage(String getImage){
    image = getImage;
  }

// getter for image
  String getImage(){
    return image;
  }
  }
    List<SliderModel> getSlides(){
  List<SliderModel> slides = new List<SliderModel>();
  SliderModel sliderModel = new SliderModel();

  // 1
      sliderModel.setImage("images/slider2.png");
      slides.add(sliderModel);

      sliderModel = new SliderModel();

  // 2
  sliderModel.setImage("images/slider2.png");
  slides.add(sliderModel);

  sliderModel = new SliderModel();

  // 3
  sliderModel.setImage("images/slider2.png");
  slides.add(sliderModel);

  sliderModel = new SliderModel();
  return slides;
}

At this stage, the home page looks like below:

Dart

import 'package:flutter/material.dart';
import 'package:kc0035a_flutter_customer_app/Screen1.dart';
import 'package:kc0035a_flutter_customer_app/data/SliderModel.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  List<SliderModel> slides = new List<SliderModel>();
  int currentIndex = 0;
  PageController _controller;

  @override
  void initState() {

    // TODO: implement initState
    super.initState();
    _controller = PageController(initialPage: 0);
    slides = getSlides();
  }
  @override
  void dispose(){
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Geeks for Geeks"),
      ),
      body: Column(
        children: [
          Expanded(
            child: PageView.builder(
                scrollDirection: Axis.horizontal,
                controller: _controller,
                onPageChanged: (value){
                  setState(() {
                    currentIndex = value;
                  });
                },
                itemCount: slides.length,
                itemBuilder: (context, index){

                  // contents of slider
                  return Slider(
                    image: slides[index].getImage(),

                  );
                }
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(slides.length, (index) => buildDot(index, context),
              ),
            ),
          ),
          Container(
            height: 60,
            margin: EdgeInsets.all(40),
            width: double.infinity,
            color: Colors.green,
            child: FlatButton(
              child: Text(
                  currentIndex == slides.length - 1 ? "Continue": "Next"),
              onPressed: (){
                if(currentIndex == slides.length - 1){
                  Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Screen1()),
                  );
                }
                _controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
              },
              textColor: Colors.white,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25),
              ),
            ),

          ),
        ],
      ),
      backgroundColor: Colors.white,
    );
  }

  // container created for dots
  Container buildDot(int index, BuildContext context){
    return Container(
      height: 10,
      width: currentIndex == index ? 25 : 10,
      margin: EdgeInsets.only(right: 5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.green,
      ),
    );
  }
}

// ignore: must_be_immutable
// slider declared
class Slider extends StatelessWidget {
  String image;

  Slider({this.image});

  @override
  Widget build(BuildContext context) {
    return Expanded(

      // contains container
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [

            // image given in slider
            Image(image: AssetImage(image)),
            SizedBox(height: 25),
          ],
        ),
      ),
    );
  }
}

The main.dart file:

Dart

import 'package:flutter/material.dart';
import 'package:kc0035a_flutter_customer_app/SplashScreen.dart';

void main() {
  runApp(MyApp());
}
// stateless widget created
class MyApp extends StatelessWidget {

  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),

      // first screen of app
      home: HomeScreen(),
    );
  }
}

Output: