Flutter - OnBoarding Screen - GeeksforGeeks

19 Aug, 2021
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.
Dart
assets:  - images/slider1.jpg  - images/slider2.png  - images/slider3.jpeg
 Now, follow the steps to implement On Boarding Screen in our Flutter 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();
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),              ),            ),          ),
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,      ),    );  }}
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),             ),           ),          ),
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),        ],      ),    );  }}
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,                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 declaredclass 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),          ],        ),      ),    );  }}
Dart
import 'package:flutter/material.dart';import 'package:kc0035a_flutter_customer_app/SplashScreen.dart'; void main() {  runApp(MyApp());}// stateless widget createdclass 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:
clintra
abhishek0719kadiyan
android
Flutter
Dart
Flutter
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Android Studio Setup for Flutter Development
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - BorderRadius Widget