Flutter – Onboarding Screen Using flutter_overboard Package

In Flutter, Onboarding screens, also known as welcome screens or introduction screens are a collection of screens or pages that are displayed to users when they first launch a mobile app or a software application. The primary purpose of onboarding screens is to introduce users to the key features, functionality, and benefits of the app, helping them get started and familiarized with the application. In Flutter we can easily Implement the Onboarding Screen with the help of the flutter_overboard package. In this article, we are going to create an onboarding screen with the help of the flutter_overboard package. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2 : Add the Required Dependency

Add the below dependency to your pubspec.yaml file and flutter_overboard package.

dependencies:
  flutter_overboard: ^3.1.1

Or, Simply we can run the following comment in out vs code Terminal

flutter pub add flutter_overboard

Step 3: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';
import 'package:flutter_overboard/flutter_overboard.dart';

Step 4: Execute the main Method

Here the execution of our app starts.

Dart

void main() => runApp(MyApp());

Step 5: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Onboarding Screen Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Flutter Onboarding Screen'),
    );
  }
}

Step 6: Create MyHomePage Class

In this class we are going to create 4 onboarding screen with the help of flutter_overboard package. After all the onboard screen are displayed then the Home page will displayed. Comments are added for better understanding.

List of onboarding Screens:

// List of onboarding Screen
final pages = [
    PageModel(
        color: Color.fromARGB(255, 243, 154, 21),
        imageAssetPath: 'assets/1.png',
        title: 'Page Model 1',
        body: 'Learn Flutter',
        doAnimateImage: true),
    PageModel(
        color: Color.fromARGB(255, 64, 214, 22),
        imageAssetPath: 'assets/2.jpg',
        title: 'Page Model 2',
        body: 'Learn Java',
        doAnimateImage: true),
    PageModel(
        color: Color.fromARGB(255, 202, 236, 12),
        imageAssetPath: 'assets/3.png',
        title: 'Page Model 3',
        body: 'Learn Python',
        doAnimateImage: true),
    PageModel.withChild(
        child: Padding(
          padding: EdgeInsets.only(bottom: 25.0),
          child: Image.asset('assets/1.png', width: 300.0, height: 300.0),
        ),
        color: const Color(0xFF5886d6),
        doAnimateChild: true)
  ];
}

Dart

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  final GlobalKey<ScaffoldState> _globalKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      body: OverBoard(
        allowScroll: true,
        pages: pages,
        showBullets: true,
        inactiveBulletColor: Colors.green,
        skipCallback: () {
          // Show a Snackbar when "Skip" is clicked
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text("Skip clicked"),
          ));
        },
        finishCallback: () {
          // Navigate to a new screen when onboarding is finished
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(
              builder: (context) =>
                  HomeScreen(), // Replace HomeScreen with your desired screen
            ),
          );
        },
      ),
    );
  }

  // List of onboarding Screen
  final pages = [
    PageModel(
        color: Color.fromARGB(255, 243, 154, 21),
        imageAssetPath: 'assets/1.png',
        title: 'Page Model 1',
        body: 'Learn Flutter',
        doAnimateImage: true),
    PageModel(
        color: Color.fromARGB(255, 64, 214, 22),
        imageAssetPath: 'assets/2.jpg',
        title: 'Page Model 2',
        body: 'Learn Java',
        doAnimateImage: true),
    PageModel(
        color: Color.fromARGB(255, 202, 236, 12),
        imageAssetPath: 'assets/3.png',
        title: 'Page Model 3',
        body: 'Learn Python',
        doAnimateImage: true),
    PageModel.withChild(
        child: Padding(
          padding: EdgeInsets.only(bottom: 25.0),
          child: Image.asset('assets/1.png', width: 300.0, height: 300.0),
        ),
        color: const Color(0xFF5886d6),
        doAnimateChild: true)
  ];
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Home Screen! Geeks Premier League 2023'),
      ),
    );
  }
}

Here is the full Code of main.dart file:

Dart

import 'package:flutter/material.dart';
import 'package:flutter_overboard/flutter_overboard.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Onboarding Screen Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Flutter Onboarding Screen'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  final GlobalKey<ScaffoldState> _globalKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      body: OverBoard(
        allowScroll: true,
        pages: pages,
        showBullets: true,
        inactiveBulletColor: Colors.green,
        skipCallback: () {
          // Show a Snackbar when "Skip" is clicked
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text("Skip clicked"),
          ));
        },
        finishCallback: () {
          // Navigate to a new screen when onboarding is finished
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(
              builder: (context) =>
                  HomeScreen(), // Replace HomeScreen with your desired screen
            ),
          );
        },
      ),
    );
  }

  // List of onboarding Screen
  final pages = [
    PageModel(
        color: Color.fromARGB(255, 243, 154, 21),
        imageAssetPath: 'assets/1.png',
        title: 'Page Model 1',
        body: 'Learn Flutter',
        doAnimateImage: true),
    PageModel(
        color: Color.fromARGB(255, 64, 214, 22),
        imageAssetPath: 'assets/2.jpg',
        title: 'Page Model 2',
        body: 'Learn Java',
        doAnimateImage: true),
    PageModel(
        color: Color.fromARGB(255, 202, 236, 12),
        imageAssetPath: 'assets/3.png',
        title: 'Page Model 3',
        body: 'Learn Python',
        doAnimateImage: true),
    PageModel.withChild(
        child: Padding(
          padding: EdgeInsets.only(bottom: 25.0),
          child: Image.asset('assets/1.png', width: 300.0, height: 300.0),
        ),
        color: const Color(0xFF5886d6),
        doAnimateChild: true)
  ];
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Home Screen! Geeks Premier League 2023'),
      ),
    );
  }
}

Output: