intro_views_flutter 2.8.2
intro_views_flutter: ^2.8.2 copied to clipboard

Flutter Android iOS web

A Flutter package for simple material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. I decided to rewrite almost all the features in order to make it available to the flutter developers and extensible as possible.

Table of contents #

Features #

  • Easy addition of pages.

  • Circular page reveal.

  • Cool Animations.

  • Animation control, if the user stops sliding in the midway.

  • Skip button, for skipping the app intro.

  • Custom font selection.

  • Material Design.

Getting Started #

You should ensure that you add the intro_views_flutter as a dependency in your flutter project.

  intro_views_flutter: '^2.8.2'

You can also reference the git repository directly if you want:

    git: git://

You should then run flutter packages get in your terminal so as to get the package.

Usage #

  • IntroViewsFlutter widget require a list of PageViewModel , and some other parameters. Refer the code below to create a PageViewModel page.

    Final page = new PageViewModel(
        pageColor: const Color(0xFF607D8B),
          iconImageAssetPath: 'assets/taxi-driver.png',
          iconColor: null,
          bubbleBackgroundColor: null,
          body: Text(
            'Easy  cab  booking  at  your  doorstep  with  cashless  payment  system',
          title: Text('Cabs'),
          mainImage: Image.asset(
            height: 285.0,
            width: 285.0,
          titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
          bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
  • Now refer the code below to get the IntroViewsFlutter widget.

    final Widget introViews = new IntroViewsFlutter(
          onTapDoneButton: (){
            //Void Callback
          showSkipButton: true,
          pageButtonTextStyles: new TextStyle(
              color: Colors.white,
              fontSize: 18.0,
              fontFamily: "Regular",

    For further usage refer the example available.

    For Landscape preview click the link.

    Note : If you added more than four pages in the list then there might be overlapping between page icons and skip button, so my suggestion is just make the showSkipButton: false.

Documentation #

PageViewModel Class #

Dart attributeDatatypeDescriptionDefault Value
pageColorColorSet color of the page.Null
mainImageImage / WidgetSet the main image of the page.Null
titleText / WidgetSet the title text of the page.Null
bodyText / WidgetSet the body text of the page.Null
iconImageAssetPathStringSet the icon image asset path that would be displayed in page bubble.Null
iconColorColorSet the page bubble icon color.Null
bubbleBackgroundColorColorSet the page bubble background color.Colors.white / Color(0x88FFFFFF)
textStyleTextStyleSet TextStyle for both title and bodytitle: color: Colors.white , fontSize: 50.0
body: color: Colors.white , fontSize: 24.0
titleTextStyleTextStyleSet TextStyle for titlecolor: Colors.white , fontSize: 50.0
bodyTextStyleTextStyleSet TextStyle for bodycolor: Colors.white , fontSize: 24.0
bubbleWidgetSet a custom widget for the inner bubblenull

IntroViewFlutter Class #

Dart attributeDatatypeDescriptionDefault Value
pagesListSet the pages of the intro screen.Null
onTapDoneButtonVoidCallbackMethod executes on tapping done button.Null
onTapBackButtonVoidCallbackMethod executes on tapping back button.Null
onTapNextButtonVoidCallbackMethod executes on tapping next button.Null
showSkipButtonBoolShow the skip button at the bottom of page.true
showBackButtonBoolShow the Back button at the bottom of page. Overrides showSkipButton starting from the second pagefalse
showNextButtonBoolShow the Next button at the bottom of page. Overrides doneButtonPersist.false
pageButtonTextSizeDoubleSet the button text size.18.0
pageButtonFontFamilyStringSet the font of button text.Default
onTapSkipButtonVoidCallbackMethod executes on tapping skip button.null
pageButtonTextStylesTextStyleConfigure TextStyle for skip, done buttons, overrides pageButtonFontFamily, pageButtonsColor, pageButtonTextSize.fontSize: 18.0, color: Colors.white
skipTextText / WidgetOverride Skip Button Text and styles.Text('SKIP')
doneTextText / WidgetOverride Done Button Text and styles.Text('DONE')
backTextText / WidgetOverride Back Button Text and styles.Text('BACK')
nextTextText / WidgetOverride Next Button Text and styles.Text('NEXT')
doneButtonPersistBoolShow done Button throughout pagesfalse
columnMainAxisAlignmentMainAxisAlignmentControl [MainAxisAlignment] for columnMainAxisAlignment.spaceAround
fullTransitiondoubleAdjust scroll distance for full transition300.0
backgroundColorSet the background color to Colors.transparent if you have your own background image belownull

For help on editing package code, view the flutter documentation.

Bugs or Requests #

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I'll look into it. Pull request are also welcome.


Donate #

If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a cup of β˜•

Contributors #

Thanks goes to these wonderful people (emoji key):

Tal Jacobson

🚧 πŸ“– πŸ“†



Kravchenko Igor




Slawa Pidgorny

Haider Al-Tahan




Kenneth GulbrandsΓΈy

πŸ› ⚠️

Sahil Kumar


Rodrigo Boratto




This project follows the all-contributors specification. Contributions of any kind welcome! See

License #

IntroViews-Flutter is licensed under MIT license.

pub points


A Flutter package for simple material design app intro screens with some cool animations.

Repository (GitHub)
View/report issues


API reference






Packages that depend on intro_views_flutter