Learn Make Intro View Using Flutter

A Flutter package for simple material design app intro screens with some cool animations.
Rating: 2.9 out of 5 (49 ratings)
3,772 students
Learn Make Intro View Using Flutter
Rating: 2.9 out of 5 (49 ratings)
3,772 students
build Intro Views Flutter

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
Curriculum
1 section • 6 lectures • 31m total length
  • 1- Install The Package
  • 2- Create IntroViewFlutter
  • 3- Create Page in App
  • 4- Try The Package
  • Finish
  • main.dart

Instructor
Full Stack PHP Developer
Ahmed Zeyada
  • 2.9 Instructor Rating
  • 58 Reviews
  • 3,843 Students
  • 6 Courses

Hi,

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

- PHP

- 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