How to build an onboarding screen in Flutter

We are going to use the SKOnBoardingScreen package

We are going to achieve this

OnBoarding Screen

Prerequisite

Flutter SDK
Any preferred IDE which supports Flutter
Emulator/Simulator or Physical Device
Basic knowledge of Flutter and Dart

You can do it manually but we have a built-in package for this on pub.dev!

There are other packages we can use to develop onboard screens but we are going to use Skonboard Screen. The reason behind this is that Skonboard is very simple and easy to understand and implement. A library that walks a user through multiple onboarding screens in a simple and easy way.
You can use any IDE but I am going to use VS Code for this tutorial.

SKOnBoardingScreen Installation

Create a Flutter project using this command using CTRL+Shift+P in VS Code

flutter create app_name

Now open the pubspec.yaml file and add the following package under dependencies.

dependencies:
  sk_onboarding_screen: ^1.0.1

Now run the pub get to add it in our project.

We are going to import two files from the SKONBOARDINGSCREEN i.e, skonboarding_screen and skonboarding_model. For the second one, we are going to create model i.e onboard screens. Then we are going to use these screens in our skonboarding_screens in our main method.
Now import the skonboardingscreen in main.dart

import 'package:sk_onboarding_screen/sk_onboarding_screen.dart;
import 'package:sk_onboarding_screen/sk_onboarding_model.dart

Creating Models

final pages = [
    SkOnboardingModel(
        title: 'Choose your item',
        description:
            'Easily find your grocery items and you will get delivery in wide range',
        titleColor: Colors.black,
        descripColor: const Color(0xFF929794),
        imagePath: 'assets/onboarding1.png'),
    SkOnboardingModel(
        title: 'Pick Up or Delivery',
        description:
            'We make ordering fast, simple and free-no matter if you order online or cash',
        titleColor: Colors.black,
        descripColor: const Color(0xFF929794),
        imagePath: 'assets/onboarding2.png'),
    SkOnboardingModel(
        title: 'Pay quick and easy',
        description: 'Pay for order using credit or debit card',
        titleColor: Colors.black,
        descripColor: const Color(0xFF929794),
        imagePath: 'assets/onboarding3.png'),
  ];

Using these Models
Now we are going to pass these Models in our SkOnBoardingScreen Widget.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SKOnboardingScreen(
        bgColor: Colors.white,
        themeColor: const Color(0xFFf74269),
        pages: pages,
        skipClicked: (value) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                return HomePage();
                },
              ),
            );
        },
        getStartedClicked: (value) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                return HomePage();
                },
              ),
            );
         },
      ),
    );
  }

In this widget, there are two main methods to go to the next screen i.e, getStartedClicked and skipClicked.

I hope it helped you out.

Thank you