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.

pub package Build Status

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.

dependencies:
 intro_views_flutter: "^2.2.2"

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

dependencies:
 intro_views_flutter:
   git: git://github.com/aagarwal1012/IntroViews-Flutter

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(
            'assets/taxi.png',
            height: 285.0,
            width: 285.0,
            alignment: Alignment.center,
          ),
          textStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
        );
    
  • Now refer the code below to get the IntroViewsFlutter widget.

    final Widget introViews = new IntroViewsFlutter(
          [page],
          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
mainImageImageSet the main image of the page.Null
titleTextSet the title text of the page.Null
bodyTextSet 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
textStyleTextStyleSet TextStyle for both title and bodytitle: color: Colors.white , fontSize: 50.0
body: color: Colors.white , fontSize: 24.0

IntroViewFlutter Class

Dart attributeDatatypeDescriptionDefault Value
pagesListSet the pages of the intro screen.Null
onTapDoneButtonVoidCallbackMethod executes on tapping done button.Null
showSkipButtonBoolShow the skip button at the bottom of page.true
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
skipTextTextOverride Skip Button Text and styles.Text('SKIP')
doneTextTextOverride Done Button Text and styles.Text('DONE')
doneButtonPersistBoolShow done Button throughout pagesfalse

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

Want to contribute !

This is the well documented package. I have documented each and every method that I have used, so have a good read to the code and suggest some changes and new feature to be added in the package.
Feel free to open an issue.

License

IntroViews-Flutter is licensed under MIT license.

Libraries

animated_page_dragger
circular_reveal_clipper
constants
intro_views_flutter
page
page_bubble
page_bubble_view_model
page_button_view_model
page_dragger
page_indicator_buttons
page_reveal
page_view_model
pager_indicator
pager_indicator_view_model
slide_update_model