How to Create Onboarding Screen One Time In Flutter?

Flutter onboarding screen is a Flutter intro slider that appears first thing when the app launches. It is mostly used to introduce the services or the benefits which the app provides or simply a walk through of the app features. This is your absolute chance to introduce your app to the users so introduction screen must be pretty informative and creatively designed.

So, how to create onboarding screen one time in Flutter?

Flutter provides a special library to create onboarding screen “introduction_screen”. Using this library, you can create a list of page views using PageViewModel and customize them based on your preference using various properties provided. On the other hand, you can set the introduction screen to be displayed only at first launch time using the library “shared_preferences”.

With that being said, we see how useful onboarding screen can be. In this article, we’ll go through an example of creating an introduction screen then set it to appear during the first launch of the application only. So without further ado, let’s dive into how to create one.

1. Code Setup

Initially, add the following dependency to pubspec.yaml file of your project

dependencies:
  introduction_screen:
  shared_preferences: ^2.0.13

Subsequently, import the library in your dart file where you’re going to create the onboarding screen

import 'package:introduction_screen/introduction_screen.dart';

2. Create Introduction Screen

To begin with, the main widget that we’ll be using in this tutorial is IntroductionScreen. Within this widget, you can add a list of pages of type PageViewModel and customize them accordingly. Also, there’re other properties that you can use to customize the appearance of the introduction screen’s sections. Below is a snippet of the onBoarding Screen implementation code.

import 'package:flutter/material.dart';
import 'package:introduction_screen/introduction_screen.dart';
import 'homescreen.dart';

class onBoardingPage extends StatelessWidget {
  const onBoardingPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return IntroductionScreen(
      pages: [
        PageViewModel(
          title: 'WELCOME TO FOOD VIBE',
          body: 'Enjoy your favorite cuisine at your couch watch your favorite TV Show',
          image: buildImage('assets/onboard1bg.png'),
          decoration: buildDecoration(),
        ),
        PageViewModel(
          title: 'EXTRA FAST DELIVERY',
          body: 'Your food will be delivered quickly to you fresh and hot',
          image: buildImage('assets/onboard2bg.png'),
          decoration: buildDecoration(),
        ),
        PageViewModel(
          title: 'FIND YOUR FAVORITE FOOD',
          body: 'Search for the best restaurant in your area and choose your favorite food ',
          image: buildImage('assets/onboard3bg.png'),
          decoration: buildDecoration(),
        ),
        PageViewModel(
          title: 'ENJOY YOUR MEAL',
          body: 'Enjoy your favorite food within minutes',
          image: buildImage('assets/onboard4bg.png'),
          decoration: buildDecoration(),
        ),
      ],
      next: Icon(Icons.navigate_next, size: 40, color: Colors.red,),
      done: Text('Done', style: TextStyle(color: Colors.red, fontSize: 20)),
      onDone: () => goToHome(context),
      showSkipButton: true,
      skip: Text('Skip', style: TextStyle(color: Colors.red, fontSize: 20),), //by default, skip goes to the last page
      onSkip: () => goToHome(context),
      dotsDecorator: getDotDecoration(),
      animationDuration: 1000,
      globalBackgroundColor: Colors.purple.shade50,
    );
  }

  DotsDecorator getDotDecoration() => DotsDecorator(
      color: Colors.grey,
      size: Size(10,10),
      activeColor: Colors.redAccent,
      activeSize: Size(22,10),
      activeShape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(24),
      )

  );

  void goToHome(BuildContext context) => Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (_) => HomeScreen()));

  Widget buildImage(String path) => Center(
      child: Image.asset(path)
  );

  PageDecoration buildDecoration() => PageDecoration(
    titleTextStyle: TextStyle(fontSize: 25, fontWeight: FontWeight.bold, color: Colors.red),
    bodyTextStyle: TextStyle(fontSize: 20),
    pageColor: Colors.purple.shade50,
    imagePadding: EdgeInsets.all(0),
  );
}

 

3. Implement SharedPreferences

Now, after creating the introduction screen it’s time to set it to only appear only the first time the application launches. You can achieve this using SharedPreferences library which will keep track of introduction screen and let the application know if the user watched it before.  If the user has already watched the intro screen, then the home screen will be displayed; else, the intro screen.

Below is a snippet of the code you need to write in main.dart file to display the onboarding screen one time only.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:shared_preferences/shared_preferences.dart';

import 'homescreen.dart';
import 'onboarding_page.dart';


int? initScreen;
Future<void>  main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferences preferences = await SharedPreferences.getInstance();
  initScreen =  await preferences.getInt('initScreen');
  await preferences.setInt('initScreen', 1); //if already shown -> 1 else 0
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return MaterialApp(
      title: 'Flutter OnBoarding Screen',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

      initialRoute: initScreen == 0 || initScreen == null ? 'onboard' : 'home',
      routes: {
        'home' : (context) => HomeScreen(),
        'onboard': (context) => onBoardingPage(),
      },
    );
  }
}

Conclusion

And there you are, you now have an onboarding screen that shows the first time your app launches. You can get the source code from my github here. This was a built-in introduction screen that is really easy for any one to pick up. We’ll look into creating custom introduction screen in future tutorials to create awesome onboarding screen designs.

Wanna learn more about Flutter? I have category called Flutter that’s ripe for you to explore. You can learn about Flutter widgets, layouts, and practice with a bunch of real examples. Also, don’t forget to subscribe to my blog to be one of the firsts to know about my newest posts!