Onboarding Screen in flutter

Today, we are learning about the onboarding screen in flutter. The onboarding screen gives a short overview of the app and helps you to create an impression of the app. It’s really easy to implement in flutter. Onboarding Screen shows the user functions of their apps. It’s really an important aspect of keeping the user in the app with explaining the app.

The onboarding screen appears after loading of splash screen and only at the first interaction of the user with the app. Mainly Onboarding Screen consists of more than two layouts that slide horizontally. Onboarding must also cater to a large swath of users, ranging from users brought in from a marketing campaign, word of mouth, or seeing an app in the app store.

We are using the PageView widget and dot indicator package for implementing in flutter. Here is the link for the package: https://pub.dev/packages/dots_indicator

Let’s start by creating a new project.

Add PageView Widget for onboarding screen.

return Scaffold(
      body: Stack(
        children: [
          PageView(
            controller: controller,
            onPageChanged: _updatePosition,
            children: [
             // onboarding screen widget
            ],
          ),
          Align(
              alignment: Alignment.bottomCenter,
              child: DotsIndicator(
                dotsCount: 2,
              
              ))
        ],
      ),
    );

return Scaffold(

body: Stack(

children: [

PageView(

controller: controller,

onPageChanged: _updatePosition,

children: [

// onboarding screen widget

Align(

alignment: Alignment.bottomCenter,

child: DotsIndicator(

dotsCount: 2,

))

);

Setting up the onbaording screen.

class OnboardingScreen extends StatelessWidget {
  final Widget? image;
  final List<Widget> text;

  const OnboardingScreen(this.image, this.text, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.tealAccent.shade100,
      child: Column(
        children: [
          if (image != null)
            Expanded(
              child: SafeArea(
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Card(
                    elevation: 10,
                    child: image!,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15)),
                  ),
                ),
              ),
              flex: 2,
            ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                children: text
              ),
            ),
            // flex: 1
          ),
        ],
      ),
    );
  }
}

class OnboardingScreen extends StatelessWidget {

final Widget? image;

final List<Widget> text;

const OnboardingScreen(this.image, this.text, {Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Container(

// color: Colors.tealAccent.shade100,

child: Column(

children: [

if (image != null)

Expanded(

child: SafeArea(

child: Padding(

padding: const EdgeInsets.all(20.0),

child: Card(

elevation: 10,

child: image!,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(15)),

flex: 2,

Expanded(

child: Padding(

padding: const EdgeInsets.all(10.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.center,

mainAxisSize: MainAxisSize.max,

mainAxisAlignment: MainAxisAlignment.start,

children: text

// flex: 1

);

}

Handle the dot indicator functionality.

Create a function for when a page is changed and add it in pageView.

double _validPosition(double position) {
    if (position >= _totalDots) return 0;
    if (position < 0) return _totalDots - 1.0;
    return position;
  }
  void _updatePosition(int position) {
    setState(() => _currentPosition = _validPosition(position.toDouble()));
  }

double _validPosition(double position) {

if (position >= _totalDots) return 0;

if (position < 0) return _totalDots - 1.0;

return position;

}

void _updatePosition(int position) {

setState(() => _currentPosition = _validPosition(position.toDouble()));

}

On the tap of dot indicator move the page controller.

DotsIndicator(
                dotsCount: 2,
                position:  _currentPosition,
                onTap: (double page){
                  setState(() {
                    controller.animateToPage(page.toInt(), duration: Duration(milliseconds: 300), curve: Curves.ease);
                  });
                },
              )

DotsIndicator(

dotsCount: 2,

position: _currentPosition,

onTap: (double page){

setState(() {

controller.animateToPage(page.toInt(), duration: Duration(milliseconds: 300), curve: Curves.ease);

});

)

Full code:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PageController controller = PageController();
  int  _totalDots = 2;
  double _currentPosition = 0.0;

  double _validPosition(double position) {
    if (position >= _totalDots) return 0;
    if (position < 0) return _totalDots - 1.0;
    return position;
  }
  void _updatePosition(int position) {
    setState(() => _currentPosition = _validPosition(position.toDouble()));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PageView(
            controller: controller,
            onPageChanged: _updatePosition,
            children: [
              OnboardingScreen(
                  Image.network(
                      "https://res.cloudinary.com/im2015/image/upload/w_1200,h_1200,c_fill,g_center//blog/running_cover_1.jpg"),
                  [
                    const Text("Want to explore app?", style: TextStyle(
                      fontSize: 18,
                      fontWeight:FontWeight.bold
                    ),),
                    const Padding(padding: EdgeInsets.all(12.0)),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        OutlinedButton(onPressed: (){}, child: Text("Login"),
                          style: ButtonStyle(
                            shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0))),

                          ),),
                        OutlinedButton(onPressed: (){}, child: Text("Sign up"),
                          style: ButtonStyle(
                            shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0))),


                          ),),
                      ],
                    )
                  ],
              ),
              OnboardingScreen(
                  Image.network(
                      "https://media.self.com/photos/57dc10b30d97fce03211748a/4:3/w_768,c_limit/sub-channel-fitness-running.jpg", fit: BoxFit.cover,),
                  [
                     const Text("Running makes you fit.",
                       style: TextStyle(
                           fontSize: 18,
                           fontWeight:FontWeight.bold
                       ),),
                    const Padding(padding: EdgeInsets.all(12.0)),
                    OutlinedButton(onPressed: (){},child:  const Text("SKIP"),
                      style: ButtonStyle(
                        shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0))),

                      ),
                    )
                  ]

              )
            ],
          ),
          Align(
              alignment: Alignment.bottomCenter,
              child: DotsIndicator(
                dotsCount: 2,
                position:  _currentPosition,
                onTap: (double page){
                  setState(() {
                    controller.animateToPage(page.toInt(), duration: Duration(milliseconds: 300), curve: Curves.ease);
                  });
                },
              ))
        ],
      ),
    );
  }
}

class OnboardingScreen extends StatelessWidget {
  final Widget? image;
  final List<Widget> text;

  const OnboardingScreen(this.image, this.text, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.tealAccent.shade100,
      child: Column(
        children: [
          if (image != null)
            Expanded(
              child: SafeArea(
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Card(
                    elevation: 10,
                    child: image!,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15)),
                  ),
                ),
              ),
              flex: 2,
            ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                children: text
              ),
            ),
            // flex: 1
          ),
        ],
      ),
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key}) : super(key: key);

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

PageController controller = PageController();

int _totalDots = 2;

double _currentPosition = 0.0;

double _validPosition(double position) {

if (position >= _totalDots) return 0;

if (position < 0) return _totalDots - 1.0;

return position;

}

void _updatePosition(int position) {

setState(() => _currentPosition = _validPosition(position.toDouble()));

}

@override

Widget build(BuildContext context) {

return Scaffold(

body: Stack(

children: [

PageView(

controller: controller,

onPageChanged: _updatePosition,

children: [

OnboardingScreen(

Image.network(

"https://res.cloudinary.com/im2015/image/upload/w_1200,h_1200,c_fill,g_center//blog/running_cover_1.jpg"),

[

const Text("Want to explore app?", style: TextStyle(

fontSize: 18,

fontWeight:FontWeight.bold

),),

const Padding(padding: EdgeInsets.all(12.0)),

Row(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: [

OutlinedButton(onPressed: (){}, child: Text("Login"),

style: ButtonStyle(

shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0))),

),),

OutlinedButton(onPressed: (){}, child: Text("Sign up"),

style: ButtonStyle(

shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0))),

),),

)

OnboardingScreen(

Image.network(

"https://media.self.com/photos/57dc10b30d97fce03211748a/4:3/w_768,c_limit/sub-channel-fitness-running.jpg", fit: BoxFit.cover,),

[

const Text("Running makes you fit.",

style: TextStyle(

fontSize: 18,

fontWeight:FontWeight.bold

),),

const Padding(padding: EdgeInsets.all(12.0)),

OutlinedButton(onPressed: (){},child: const Text("SKIP"),

style: ButtonStyle(

shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0))),

)

]

)

Align(

alignment: Alignment.bottomCenter,

child: DotsIndicator(

dotsCount: 2,

position: _currentPosition,

onTap: (double page){

setState(() {

controller.animateToPage(page.toInt(), duration: Duration(milliseconds: 300), curve: Curves.ease);

});

))

);

}

class OnboardingScreen extends StatelessWidget {

final Widget? image;

final List<Widget> text;

const OnboardingScreen(this.image, this.text, {Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Container(

// color: Colors.tealAccent.shade100,

child: Column(

children: [

if (image != null)

Expanded(

child: SafeArea(

child: Padding(

padding: const EdgeInsets.all(20.0),

child: Card(

elevation: 10,

child: image!,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(15)),

flex: 2,

Expanded(

child: Padding(

padding: const EdgeInsets.all(10.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.center,

mainAxisSize: MainAxisSize.max,

mainAxisAlignment: MainAxisAlignment.start,

children: text

// flex: 1

);

}

Output:

Conclusion

This is how we add an onboarding screen in flutter. You can add more functionalities to it.

Thanks for reading this article ❤

If I got something wrong 🙈, let me know in the comments. I would love to improve.

For more interesting blogs check out here – https://mobikul.com/blog/

Reference link: https://blog.logrocket.com/creating-flutter–onboarding–screen/

nausheen Siddiqui 28 February 2022

. . .

Onboarding Screen in flutter

Add PageView Widget for onboarding screen.

Setting up the onbaording screen.

Handle the dot indicator functionality.

Full code:

Output:

Conclusion

Leave a Comment Cancel Reply

Message Sent!