Build Intro Views In Flutter Application

A Flutter package for simple material design app intro screens with some cool animations.
Category: Tags: ,

Description

Requirements

  • VS Code

Description

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.

Who this course is for:

  • Students
  • Mobile Developers
  • Flutter Learner

Reviews

There are no reviews yet.

Be the first to review “Build Intro Views In Flutter Application”