pyozer / introduction_screen

Add easily to your app an introduction screen to provide informations to new users

IntroductionScreen

Introduction Screen allows you to have a screen on an app's first launch to, for example, explain your app. This widget is very customizable with a great design.

introduction_screen uses another package, dots_indicator, that I also created.

Installation

You just need to add introduction_screen as a dependency in your pubspec.yaml file.

dependencies:
  introduction_screen: ^3.1.14

Examples

Not all of the many parameters in each class are used in these examples. See Parameter Lists for the complete documentation for each class.

Note: if you want to display IntroductionScreen only once, like on the first start of your app, use shared_preferences (or a similar strategy) to save the status of whether it has been already displayed or not. It's not responsibility of this package to handle this.

PageViewModel

A list of PageViewModels is used for IntroductionScreen's pages parameter.

Simple page

This example only defines the title, body, and image parameters. (You can define image as any widget.)

PageViewModel(
  title: "Title of introduction page",
  body: "Welcome to the app! This is a description of how it works.",
  image: const Center(
    child: Icon(Icons.waving_hand, size: 50.0),
  ),
)

Page with custom colors

This example defines the color of the page using the decoration parameter. The image link does not exist and is only for example.

PageViewModel(
  title: "Title of blue page",
  body: "Welcome to the app! This is a description on a page with a blue background.",
  image: Center(
    child: Image.network("https://example.com/image.png", height: 175.0),
  ),
  decoration: const PageDecoration(
    pageColor: Colors.blue,
  ),
)

Page with custom text style

This example defines custom TextStyles in the decoration parameter for the title and body.

PageViewModel(
  title: "Title of orange text and bold page",
  body: "This is a description on a page with an orange title and bold, big body.",
  image: const Center(
    child: Text("👋", style: TextStyle(fontSize: 100.0)),
  ),
  decoration: const PageDecoration(
    titleTextStyle: TextStyle(color: Colors.orange),
    bodyTextStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 20.0),
  ),
)

Page with a footer (button)

This example defines a footer for the page with a button. The image does not exist and is only for example.

PageViewModel(
  title: "Title of custom button page",
  body: "This is a description on a page with a custom button below.",
  image: Image.asset("res/images/logo.png", height: 175.0),
  footer: ElevatedButton(
    onPressed: () {
      // On button pressed
    },
    child: const Text("Let's Go!"),
  ),
)

Page with widget body

This example defines the page body using bodyWidget and a Widget, rather than with body and a String. Only use body or bodyWidget. The titleWidget parameter does the same thing for the title.

PageViewModel(
  title: "Title of custom body page",
  bodyWidget: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: const [
      Text("Click on "),
      Icon(Icons.edit),
      Text(" to edit a post"),
    ],
  ),
  image: const Center(child: Icon(Icons.android)),
)

IntroductionScreen

The IntroductionScreen Widget is the single object that holds all pages and related navigation and settings. In these examples, listPagesViewModel is a list of pages. A page is a PageViewModel object, like the examples in the previous section.

Note:

• If you not provide the next parameter, the "Next" button will be not displayed. The parameter showNextButton must then be set to false.
• If you want to display the "Skip" button, you must add a skip parameter and set showSkipButton to true.
• The done parameter is only required if showDoneButton is true.

Simple intro screen

This example only defines the pages, showNextButton, done, and onDone parameters.

IntroductionScreen(
  pages: listPagesViewModel,
  showNextButton: false,
  done: const Text("Done"),
  onDone: () {
    // On button pressed
  },
)

Intro screen with skip button

This example defines showSkipButton and skip to show the "Skip" button on all pages except the last one.

IntroductionScreen(
  pages: listPagesViewModel,
  showSkipButton: true,
  showNextButton: false,
  skip: const Text("Skip"),
  done: const Text("Done"),
  onDone: () {
    // On button pressed
  },
)

Intro screen with back button

This example defines showBackButton and back to show the "Back" button on all pages except the first one.

IntroductionScreen(
  pages: listPagesViewModel,
  showBackButton: true,
  showNextButton: false,
  back: const Icon(Icons.arrow_back),
  done: const Text("Done"),
  onDone: () {
    // On button pressed
  },
)

Intro screen with custom button text and dots indicators

This example defines dotsDecorator to show a custom implementation of the page progress dots. This example also uses a custom style for the "Done" button, bolding it.

IntroductionScreen(
  pages: listPagesViewModel,
  showSkipButton: true,
  skip: const Icon(Icons.skip_next),
  next: const Text("Next"),
  done: const Text("Done", style: TextStyle(fontWeight: FontWeight.w700)),
  onDone: () {
    // On Done button pressed
  },
  onSkip: () {
    // On Skip button pressed
  },
  dotsDecorator: DotsDecorator(
    size: const Size.square(10.0),
    activeSize: const Size(20.0, 10.0),
    activeColor: Theme.of(context).colorScheme.secondary,
    color: Colors.black26,
    spacing: const EdgeInsets.symmetric(horizontal: 3.0),
    activeShape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(25.0)
    ),
  ),
)

Intro screen with custom button style

A custom style will be applied to all buttons using the baseBtnStyle parameter ("Back", "Skip", "Next", "Done"). Specific button style parameters may also be used: backStyle, skipStyle, nextStyle, doneStyle.

If both baseBtnStyle and a specific button style are defined, the baseBtnStyle will be merge with specific style.

The following is the default button style:

TextButton.styleFrom(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8.0),
  ),
)

This example will override the default in the following ways:

• All buttons have a light grey background
• The "Skip" button is red
• The "Done" button is green
• The "Next" button is blue

IntroductionScreen(
  pages: listPagesViewModel,
  showSkipButton: true,
  skip: const Text("Skip"),
  next: const Text("Next"),
  done: const Text("Done"),
  onDone: () {
    // When done button is press
  },
  baseBtnStyle: TextButton.styleFrom(
    backgroundColor: Colors.grey.shade200,
  ),  
  skipStyle: TextButton.styleFrom(primary: Colors.red),  
  doneStyle: TextButton.styleFrom(primary: Colors.green),  
  nextStyle: TextButton.styleFrom(primary: Colors.blue),
)

Intro screen with key param to change page manually

To change page manually / programatically, in response to user input or another event:

1. Define a GlobalKey as part of the parent widget's state
2. Pass that key to the IntroductionScreen key param
3. Use the currentState member to access functions defined in IntroductionScreenState e.g.
   1. next()
   2. previous()
   3. skipToEnd()
   4. animateScroll()

This example moves to the next page after a delay:

class IntroScreenDemo extends StatefulWidget {
  @override
  State<IntroScreenDemo> createState() => _IntroScreenDemoState();
}

class _IntroScreenDemoState extends State<IntroScreenDemo> {
  // 1. Define a `GlobalKey` as part of the parent widget's state
  final _introKey = GlobalKey<IntroductionScreenState>();
  String _status = 'Waiting...';

  @override
  Widget build(BuildContext context) {
    return IntroductionScreen(
      // 2. Pass that key to the `IntroductionScreen` `key` param
      key: _introKey,
      pages: [
        PageViewModel(
            title: 'Page One',
            bodyWidget: Column(
              children: [
                Text(_status),
                ElevatedButton(
                    onPressed: () {
                      setState(() => _status = 'Going to the next page...');

                      // 3. Use the `currentState` member to access functions defined in `IntroductionScreenState`
                      Future.delayed(const Duration(seconds: 3),
                          () => _introKey.currentState?.next());
                    },
                    child: const Text('Start'))
              ],
            )),
        PageViewModel(
            title: 'Page Two', bodyWidget: const Text('That\'s all folks'))
      ],
      showNextButton: false,
      showDoneButton: false,
    );
  }
}

Parameter Lists

IntroductionScreen parameters

Many parameters can be used to customize your app introduction like you want! This is the full list:

Pages

• Page that will be display (PageViewModel), by adding pages: [..] parameter.
• Use your own pages (Widget) without using those predefined, by adding rawPages: [..] parameter.
  • If you provide both rawPages and pages parameter, pages will be used.

Callbacks

• Set a custom callback when done button is pressed, by adding onDone: () {} parameter.
  • This param is required if you define done param, EXCEPT if you set showDoneButton: false
  • If you set overrideDone param, it will be ignored.
• Set a custom callback when skip button is pressed, by adding onSkip: () {} parameter.
  • By default, it will go to the last page
  • If you set overrideSkip param, it will be ignored.
• Add callback to listen page changes, by adding onChange: (page) {} parameter.

Use pre-made buttons

• Define pre-made Done button child (Widget), by adding done: Text('Done')
  • This param or overrideDone are required, EXCEPT if you set showDoneButton: false
  • By providing done, the parameter onDone is also required.
• Define pre-made Next button child (Widget), by adding next: Text('Next')
  • This param is required, EXCEPT if you set showNextButton: false
• Define pre-made Skip button child (Widget), by adding skip: Text('Skip')
  • This param is required if you set showSkipButton: true Define pre-made Back button child (Widget), by adding back: Text('Back')
  • This param is required if you set showBackButton: true

Use custom buttons

If you want to control pages, you can use key param. Search this repo's Issues for more detailed information.

• Define your custom Done button (Widget), by using overrideDone
  • This param or done are required, EXCEPT if you set showDoneButton: false
  • This parameter has priority over the done parameter.
• Define your custom Next button (Widget), by using overrideNext
  • This param or next are required, EXCEPT if you set showNextButton: false
  • This parameter has priority over the next parameter.
• Define your custom Skip button (Widget), by using overrideSkip
  • This param or skip are required if you set showSkipButton: true
  • This parameter has priority over the skip parameter.
• Define your custom Back button (Widget), by using overrideBack
  • This param or back are required if you set showBackButton: true
  • This parameter has priority over the skip parameter.
• Define your custom dots widget (or the widget that you want on that position), by using customProgress

Manage display of pre-made or custom buttons

• Hide/show Skip button, by adding showSkipButton: false parameter.
  • Default false
• Hide/show Next button, by adding showNextButton: false parameter.
  • Default true
• Hide/show Done button, by adding showDoneButton: false parameter.
  • Default true
• Hide/show Back button, by adding showBackButton: false parameter.
  • Default false

Controls

• Display or not the progress dots, by adding isProgress: false parameter.
  • Default true
• Enable or disable dots progress tap, by adding isProgressTap: false parameter.
  • Default true

Page

• Freeze the scroll, by adding freeze: true parameter.
  • Default false
• Duration of scrolling animation, by adding animationDuration: 400 parameter.
  • Default 350
• Initial page, by adding initialPage: 2 parameter.
  • Default 0
• You can provide a ScrollController for each page by adding scrollControllers: [..] parameter.
  • If you have 5 pages, you can provide 5 differents ScrollController.
  • If you want to have only one ScrollController for page 1, you can provide: scrollControllers: [controller1]
  • If you want to have only one ScrollController for page 3, you can provide: scrollControllers: [null, null, controller1]
  • Will be ignored for page(s) if useScrollView is set to false in PageViewModel(s)

Pages style

• Global background color, by adding globalBackgroundColor: Colors.blue parameter.
  • Tips: use Colors.transparent to display an image as background (using Stack with IntroductionScreen inside for example)
• Customize dots (progression) by adding dotsDecorator: DotsDecorator(...)
  • You can customize dots size, shape, colors, spacing.
• Customize dots container by adding dotsContainerDecorator: BoxDecorator(...)
  • You can customize container that contain controls.
• Skip/Back button flex, by adding skipOrBackFlex: 1 parameter.
  • Set 0 to disable Expanded behaviour, default 1
• Dots indicator flex, by adding dotsFlex: 1 parameter.
  • Set 0 to disable Expanded behaviour, default 1
• Next/Done button flex, by adding nextFlex: 1 parameter.
  • Set 0 to disable Expanded behaviour, default 1
• Animation curve between pages, by adding curve: Curves.elasticIn parameter.
  • Default Curves.easeIn

Buttons style

• Change global style of buttons (for skip, next, done, back), by adding baseBtnStyle parameter.
• Change skip button style, by adding skipStyle: TextButton.styleFrom(alignment: Alignment.centerLeft) parameter.
• Change next button style, by adding nextStyle: TextButton.styleFrom(alignment: Alignment.centerRight) parameter.
• Change done button style, by adding doneStyle: TextButton.styleFrom(splashFactory: NoSplash.splashFactory) parameter.
• Change back button style, by adding backStyle: TextButton.styleFrom(primary: Colors.red) parameter.

Semantic

• Change skip button semantic label, by adding skipSemantic: 'Skip introduction' parameter.
• Change next button semantic label, by adding nextSemantic: 'Go to next page' parameter.
• Change done button semantic label, by adding doneSemantic: 'Exit introduction' parameter.
• Change back button semantic label, by adding backSemantic: 'Go to previous page' parameter.

Layout

• Show the bottom part of the page, that include skip, next, done buttons by setting showBottomPart: true parameter.
• Hide the bottom part of the page when the keyboard is open with hideBottomOnKeyboard parameter.
• Customize controls position on screen, by adding controlsPosition: const Position(left: 0, right: 0, bottom: 100) parameter.
  • Default const Position(left: 0, right: 0, bottom: 0)
• Customize margin of controls's container, by adding controlsMargin: EdgeInsets.all(16.0) parameter.
  • Default EdgeInsets.zero
• Customize padding of controls's container, by adding controlsPadding: EdgeInsets.all(8.0) parameter.
  • Default EdgeInsets.all(16.0)
• Add global header (top), static and displayed above pages, by adding globalHeader: Image.asset(...) parameter.
• Add global footer below controls/dots, by adding globalFooter: ElevatedButton(...) parameter.
• Change axis of scroll by adding pagesAxis: Axis.vertical.
  • Default Axis.horizontal
• Change default scroll physics of PageView by adding scrollPhysics: ClampingScrollPhysics().
  • Default BouncingScrollPhysics()
• You can also enable right-to-left behavior by adding rtl: true.
  • Default false
• Change default implicit scrolling behavior by adding allowImplicitScrolling: true
  • Default false
  • Reference: PageView's allowImplicitScrolling parameter
• Activate the SafeArea by setting safeAreaList: [true,true,true,true] parameter.

PageViewModel parameters

You can provide many parameters to customize each pages:

• title: "Title of the page" or titleWidget: Text("Custom widget for title")
• body: "Body of the page" or bodyWidget: Text("Custom widget for body")
• image: Image.asset(...) image of the page.
  • It's expecting a Widget, so if you want to pass a Video, Text, or anything else, you can.
• footer: ElevatedButton(...), display a widget below body
  • Like image param, it's expecting a Widget, you can pass what you want.
• decoration: PageDecoration(...), page decoration to customize page
  • See next section for all parameters you can pass
• reverse: true, reverse order of image and content (title/body). (Default: false)
• useScrollView: false, by default pages use a Scrollview to handle small screen or long body text. You can remove ScrollView by setting to false.
• scrollViewKeyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual, by default the keyboard dismiss behavious is manual, you can change it.
  • Only used if useScrollView not set to false.

PageDecoration parameters

• pageColor: Colors.white, background color of the page
  • You cannot use both pageColor and boxDecoration params
• titleTextStyle: TextStyle(...), TextStyle of the title
• bodyTextStyle: TextStyle(...), TextStyle of the body
• boxDecoration: BoxDecoration(...), BoxDecoration of page container
  • You cannot use both pageColor and boxDecoration params
• imageFlex: 2, flex ratio of the image
• bodyFlex: 3, flex ratio of the content (title/body)
• footerFlex: 1, flex ratio of the content (title/body)
• footerFit: FlexFit.loose, flex ratio of the content (title/body)
• imagePadding: EdgeInsets.only(bottom: 12.0), padding of the image Widget. (Default EdgeInsets.only(bottom: 24.0))
• contentPadding: EdgeInsets.only(all: 24.0), padding of the content (title/body/footer) Widget. (Default EdgeInsets.all(16))
• titlePadding: EdgeInsets.only(bottom: 24.0), padding of the title text/Widget. (Default EdgeInsets.only(top: 16.0, bottom: 24.0))
• descriptionPadding: EdgeInsets.only(bottom: 24.0), padding of the body text/Widget. (Default EdgeInsets.zero)
• footerPadding: EdgeInsets.only(top: 24.0), padding of the footer text/Widget. (Default EdgeInsets.symmetric(vertical: 24.0))
• bodyAlignment: Align.center, content (title, body, footer) alignment. (Default Align.topCenter)
• imageAlignment: Align.center, image alignment. (Default Align.bottomCenter)
• fullScreen: true, Set image as fullscreen (background). (Default false)

introduction_screen's Issues

Set pageColor not working

Hi, i try add pageColor: Colors.transparent but not working, can you fix it. Thanks

Page states not saving

If you have form fields in the PageViewModel they do not save state when going between the pages. For this to work IntroPage needs to be a StatefulWidget and AutomaticKeepAliveClientMixin needs to be used.

How do I scroll to the next page when I press the next button I created?

Thanks for the nice library.

I want to link my own Next button with the Introduction Screen.
Therefore, I want to use _onNext () of IntroductionScreenState, but it is private.
Is there any other way?

cannot decrease the space taken by text (increase the area of image height)

HI,
i tried to find any way to expand the image height and decrease the text space portion
but i couldn't find any solution for this issue
any help?

Number of dots

Is there a limit to the number of dots - I have more than 6 and they overflow.

Implement copyWith to PageDecoration class

For example I have const variable pageDecoration to pass to decoration property of my PageViewModels, but in one PageViewModel I want to change only one value of pageDecoration, so a copyWith method would be very good.

How can i use full screen background image for onboarding?

I want to set images as background and on top of that I want to display buttons.

Overflow on dot indicator for more than 5 pages

The dot indicator overflows in pixels when there are more than 5 pages.

Check mounted status after async ops

Hi!

To avoid potential issues, I think these two functions should check the mounted property before calling setState.

Future<void> skipToEnd() async {
  setState(() => _isSkipPressed = true);
  await animateScroll(widget.pages.length - 1);
  setState(() => _isSkipPressed = false);
}

Future<void> animateScroll(int page) async {
  setState(() => _isScrolling = true);
  await _pageController.animateToPage(
    page,
    duration: Duration(milliseconds: widget.animationDuration),
    curve: widget.curve,
  );
  setState(() => _isScrolling = false);
}

as in:

if (mounted) {
  setState(() => _isSkipPressed = false);
}

How can i use full screen background image for onboarding?

How can i use full screen background image for onboarding?

Stop scrolling inside the bodyWidget

I have noticed that the bodyWidget makes that part of the page scrollable. How do we stop this behavior?

how i can skip to a specific page

Is there a way to move to the next slide after a certain time. Or access the next() function to do it manually?

I need that after 5 seconds, the slide change automatically, like in some web banners behaviors

Thanks

onChange Event not triggering

The onChange function doesn't trigger when the user switches from one page to the other?

Accessing the page controller

Can the controller be accessed to move to a certain page on a button click for example?

scroll physics

I think it would be better to change physics in pageView to AlwaysScrollableScrollPhysics instead of BouncingScrollPhysics Or at least it would be great if scroll physics be more modifier than just freeze.

Thanks For Your Awesome library

new install or update

It would be cool if users get told how the app works ( new install) Or new features ( upgrade )

I think there is a flutter plugin to do this..

Onboard screen shows up, every time the user has viewed once.

As per convention, the user is supposed to see the onboard only once, when the app loads for the first time and never after that. But this introduction screen keeps showing every time the app is launched.

Custom footer

Great work on this library, my suggestion would be to make this part customizable:
https://github.com/Pyozer/introduction_screen/blob/master/lib/src/introduction_screen.dart#L246-L278 such that it's possible to have very custom widgets for that part.

Any chance the description could be a Widget?

This is the third Onboarding approach I have tried and is the one I like the most. Great work.

What I'm trying to accomplish is to have text and icons in the description - so that I could describe things like "Tap the + button to ...." or "Tap the Pencil to do ...", where the + and Pencil are icons / images.

Would this be possible?

Thanks,

Steve

Position of title and body in the landscape mode

Hi,
Is there any way to change the padding between the title and the image? It is particularly important for me when the mobile is in the landscape mode.
Thanks

Minor improvements questions

Hello Jean I like the simplicity of your library

but I was wondering if it was possible to
Iset the image optional, on the pageviews.

and then make it possible to override the default skip action, for instance if I wanted to skip to the next screen instead of the next pageview.

dart:async isn't required.

dart:async isn't required as dart:core which is automatically imported has all those features according to Dart 2.1.

Background color for all Pages

Hello @Pyozer ,

Wonderful work ! I love it !
I have 2 questions,

The first one is, is it possible to have a backgroundcolor or background image for all PageViewModel...?
I try to place the IntroductionScreen() in a container with a backgroundimage or background color and i set the PageColor to Colors.Transparent for all PageViewModel,
But the background is still white !

Is it possible ?

Also, my second question, is it possible to hide the next button and Done button ?
the same as showSkipButton: false,

Thanks a lot !

Pascal

SkipButton

How to put the skip button in the upper right corner and the dots below the image?

I tried to use container to define position but although I can locate the dots using

padding only moves the dots but the skipbutton can't locate or position it: /

Is there a way to use gradient background

Is there a way to use different gradient background for each page?.

I want to use only 1 background image for all PageViewModel and disable it no action when I change next PageViewModel

Intro Screen should just open first time when opening app not everytime.

Introduction screen is very awesome but the thing is it should just be there only once when we open app first time.
So, I made a splash screen and used dart async to find intro screen is opened or not , it worked fine.
If you could provide that feature in this package it would be helpful a lot.
Thank You.

Just show the Introduction Screen once, after the very first start of the app

Hi @Pyozer,

First of all thanks for this wonderful plugin that you made for us!

I was wondering if would be possible to show the plugin just once after the very first start of the app.

Would be really cool that somehow the Introduction Screen would be able to understand, with a state manager or a cache system, that the user already saw it and not show the plugin again.

Thanks for everything, cheers!

Right to Left Behaviour

thanks for the solid package, works wonderfully here. Was wondering if you can add RTL behaviour where the pages scroll to the right not to the left and reverse the location of next/end buttons. Also I could do the PR with some pointers 👍

thanks

A RenderFlex overflowed by 13 pixels on the right.

When we add more pages, the view is scrollable or expanded. Getting the RenderFlex overflowed on Screen

Error in scroll listener

When the body content is too extensive and I scroll it, the following error occurs:

type 'FixedScrollMetrics' is not a subtype of type 'PageMetrics'

Version: v1.0.7

Stack trace:

#0      _IntroductionScreenState._onScroll (package:introduction_screen/src/introduction_screen.dart:163)
#1      NotificationListener._dispatch (package:flutter/src/widgets/notification_listener.dart:127)
#2      Notification.visitAncestor (package:flutter/src/widgets/notification_listener.dart:45)
#3      ViewportNotificationMixin.visitAncestor (package:flutter/src/widgets/scroll_notification.dart:31)
#4      Element.visitAncestorElements (package:flutter/src/widgets/framework.dart:3509)
#5      Notification.dispatch (package:flutter/src/widgets/notification_listener.dart:61)
#6      DragScrollActivity.dispatchScrollStartNotification (package:flutter/src/widgets/scroll_activity.dart:436)
#7      ScrollPosition.didStartScroll (package:flutter/src/widgets/scroll_position.dart:658)
#8      ScrollPosition.beginActivity (package:flutter/src/widgets/scroll_position.dart:650)
#9      ScrollPositionWithSingleContext.beginActivity (package:flutter/src/widgets/scroll_position_with_single_context.dart:116)
#10     ScrollPositionWithSingleContext.drag (package:flutter/src/widgets/scroll_position_with_single_context.dart:246)

error while loading images from assets

Widget _buildImage1() {
    return Align(
      child:  Image(image: AssetImage('assets/porsche_self_drive.png'),height: 175.0),
      alignment: Alignment.bottomCenter,
    );
  }

error:

where I'm missing pubspec details are perfectly fine!

Any good links on where to find onboarding images?

Any good links on where to find onboarding images?

Curve parameter not working

I've tried using the curve parameter but it seems that it's not being applied? The animation is still the same when changing the page.

Sample code:

    IntroductionScreen(
        curve: Curves.bounceOut,
        pages: pages(),
        done: Text('Done'),
        onDone: () {},
      ),

Fixed header all page

Hi,
how can I add header or top widget for each page, I mean common top logo I want to place on top.

Skip to end

Is it possible to make 'skip' act as 'skip to end'?

null-safety Support

It would be nice if the plugin would also support for Dart null safety, which is being enforced by upcoming flutter releases. For details, refer to: https://dart.dev/null-safety

Images not opening in Linux Desktop

Thanks for the introduction screen code. I couldn't get the images to appear when I ran the code using $flutter run -d linux. With the same codebase, I ran $flutter run -d chrome and the images do appear in the web version. I opened an issue in Flutter:

flutter/flutter#62269

Show Introduction screen only on first launch

Hi,

thanks for the awesome plugin! But I have a problem:
The Introduction Screen is called on every launch of the app. Should it works this way? I only know introduction screens which are only visibile on the first launch of the app.
How can I implement this?

Thanks for help!

how to show onboard screens only once

i just want to show only once install app after. every time i am opening it show on board screen. how to disable that?

Dot Color for inactive progress indicator

Just a minor issue but I would like dotColor which is present in DotsIndicator widget to be available through IntroductionScreen's parameters. This will help those like me who want to change the color of the dots that are not active

Disable the "back" button on HomeScreen After clicking "done" on the Intro page.

Disable the "back" button on HomeScreen After clicking "done" on the Intro page.(Disable the "back" option redirection to the intro page)

Can i use video at image parameter?

Can i use a video player at image parameter of PageViewModel ?
PageViewModel( title: 'TitleExample', body:'Text example', image: VideoPlayerController.asset('assets/videos/presentation.mp4'), ),

Go to previous page without scrolling - Back Button

How can I get to the previous page without swiping?

A package may not list itself as a dependency.

Running "flutter pub get" in introduction_screen...
Error on line 27, column 3 of pubspec.yaml: A package may not list itself as a dependency.
╷
27 │ introduction_screen: ^1.0.7
│ ^^^^^^^^^^^^^^^^^^^
╵

pub get failed (65; ╵)
Process finished with exit code 65

[proposal] Improve README documentation

First of all, thank you for your plugin! It was easy to use and gave excellent results :)

I am a native English speaker and I think I can help improve the documentation

I just sent three pull requests #65 #64 #63 for various typo errors and I decided to stop and just fork the project to help edit the README and Documentation. If you are okay with this I will proceed to edit the text and also the example file to make it easier for others to use as well.

How can i pass data between pageviewmodels ?

null-safety support required

How to set the contents(like title,body,image) in center on page?

The default is from top to bottom, Could I change it in center?