Learn Make Intro View Using Flutter

A Flutter package for simple material design app intro screens with some cool animations.
Free tutorial
Rating: 4.0 out of 5 (112 ratings)
7,089 students
31min of on-demand video

build Intro Views Flutter


  • VS Code


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.


  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(


            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(


          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


Full Stack PHP Developer
Ahmed Zeyada
  • 2.8 Instructor Rating
  • 137 Reviews
  • 7,389 Students
  • 3 Courses


Iam Ahmed Zeyada, Iam Full Stack PHP Developer

I have may years For Programming And Design Websites Using PHP , MySQl , HTML 5, CSS3, JavaScript & jQuery.

My Experince is:

- HTML 5, CSS3
- JavaScript , jQuery


- SQL 

- Laravel, CodeIgniter

- git, github, gitlab

I have worked on many large projects in conjunction with specialized software teams

She also worked as a trainer for several large technology companies and organizations in the field of web programming and API programming

Top companies trust Udemy

Get your team access to Udemy's top 19,000+ courses