FLUTTER — OnBoarding Screen. Hi! I am fairly new to Flutter and have…
By: Senthil Kumar
Tags: Flutter, Library, Flutter Ui, Onboarding, Flutter Widget

Hi! I am fairly new to Flutter and have been working on various projects for 6 months. Usually, the library makes the life of a developer easy. We don’t have to create a new solution from scratch, we could use the library based on our project requirement. There are abundant libraries available for Android and iOS when compared to Flutter.

I am currently working on a project where I had to create an On-Boarding Screen giving the user hints of the project. I have looked for the libraries and couldn’t find one that suits my requirements and had to develop it from scratch.

While developing this I thought that after completing I would build one myself, so that others could use this library or at the very least they wouldn’t have to start from the beginning.

So here we are, my very first Flutter library!!! This is an early version of the library and will be working on this library gradually and much more. Any and all feedback , bug reports, and new feature requests are welcome. Could mention it in the comments below or at the issue tracker

Why OnBoarding Screen?

Nowadays apps offer various solutions from simple to complex, not everyone knows what your app is about and often struggles initially when the application is complex.

Just to give an overview of what your app is about we usually opt for onboarding screens and also to inform of various feature available within(to attract users using simple and elegant animation)

Below I have explained how to use this library in your application.

How to use OnBoarding?

This is a simple library that allows the user to walk through multiple screens.

Note: The sample and the library can be found in the link. The library supports the following Android, iOS and also web.

Step 1: Installation

Add the dependency to your pubspec.yaml file. You can get the latest version from https://pub.dev/packages/sk_onboarding_screen

dependencies:

sk_onboarding_screen: ^1.0.1

Step 2: Usage

Let’s dive into the usage of the library. First, install the packages required, this can be done in one of two ways.

You can install packages from the command line :

$ flutter pub get

Alternatively, your editor might support flutter pub get like Android Studio and Visual Studio Code.

Step 3: The real step ( coding )

Include the following packages by adding the below lines in your code

import 'package:sk_onboarding_screen/sk_onboarding_screen.dart;

2. Adding multiple screens, follow the steps mentioned below. Use the SKOnboardingModel for passing the values.

For now, I have added the following fields below in the model class and in the next version, I will be working on providing various options.

title — Pass the title of the screen

description — A brief description of the screen

titleColor — The color of the title text

descripColor — The color of the description text

imagePath — file path of the image should be passed in the field

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'),

];

We are almost at the end!!

3. Next, pass the created list of model class into the SKOnBoardingScreen widget. I have added the code snippet of the following below.

@override

Widget build(BuildContext context) {

// TODO: implement build

return Scaffold(

body: SKOnboardingScreen(

bgColor: Colors.white,

themeColor: const Color(0xFFf74269),

pages: pages,

skipClicked: (value) {

print("Skip");

},

getStartedClicked: (value) {

print("Get Started");

},

),

);

}

In the near future, I’m going to customize the library by adding more fields so that we could have a lot of control over the library.

Step 4: Output

Next :

Even though this library is still in its early phase, feedback is really appreciated. If you’d like to contribute or add the library to your project, feel free to do so.

This is just my library, I’m going to write more as the project evolves, so stay tuned!

Check it out the library sk_onboarding_screen on pub.dev and github.com.