Flutter: Introduction Screen

image source: google images

You can use an introduction screen to explain your software, for example, at the launcher. This widget has a nice design and is quite adaptable.

Simply add the introduction_screen to your pubspec.yaml file as a dependency.

There are numerous parameters accessible; however, only a few of them are specified in the next portion of the example. Please refer to the Document for a list of all accessible parameters.

Note: Use SharedPreferences (or something similar) to save status if you just want to show IntroductionScreen once (e.g. at the start of your application) (already display or not). This package has no responsibility for this.

Let us get into work.

listPagesViewModel

The list of pages is represented by listPagesViewModel.

PageViewModel is the foundation of a page. Below is an example of a PageViewModel.

PageViewModel

Only the title, body, an image, and page decoration are defined in this (you can define any widget)

Image source from document

Let’s get started on our introduction screen now that that’s out of the way. Let’s start by making an introduction_screen.dart file.

Wondering what buildImage, getPageDecoration and getDotsDecorator are? We will go one by one.

• buildImage: a common method to add images that takes an image path as a parameter.

• getPageDecoration: a common method to customize the pages.

• getDotsDecorator: Another package, dots indicator, is used by the introduction_screen.

We can customize the dots according to our wishes. But the options are limited.

Note: The Next button will not appear if you do not give the next parameter. If you want a skip button to appear, use the skip argument and set

showSkipButton: true.

The done parameter is required only if showDoneButton: true.

Below are some samples with done, skip, and back buttons.

• Intro screen with done button

• Intro screen with skip button

• Intro screen with back button:

On the first page, the back button is not visible.

Then we’ll take command of our main.dart to show the introduction screens on app launch.

That’s all there is to it. Our introductory screen has been completed successfully.

Many parameters can be used to customized Intro like you want ! Just hit into document to know more in depth.

The source code can be found on Github.

GitHub - vinodbaste/introduction-screens-in-flutter

Thank you for taking the time to read this article. If you found this post to be useful and interesting, please clap and recommend it.

if I got something wrong, mention it in the comments. I would love to improve.