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.