Learn Make Intro View Using Flutter

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

Table of contents #

• Features

• Getting Started

• Usage

• Documentation

  • PageViewModel Class

  • IntroViewFlutter Class

• Bugs or Requests

• Donate

• Contributors

• License

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.8.0'

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,

        ),

        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(

        [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.