intro_views_flutter 2.3.0

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 94

Platform Pub Package Build Status License: MIT

IntroViews is inspired by Paper Onboarding and developed with love from scratch. I decided to rewrite almost all the features in order to make it available to the flutter developers and extensible as possible.

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.2.4"

You can also reference the git repository directly if you want:

dependencies:
 intro_views_flutter:
   git: git://github.com/aagarwal1012/IntroViews-Flutter

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,
          ),
          textStyle: 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.

Documentation

PageViewModel Class

Dart attributeDatatypeDescriptionDefault Value
pageColorColorSet color of the page.Null
mainImageImageSet the main image of the page.Null
titleTextSet the title text of the page.Null
bodyTextSet the body text of the page.Null
iconImageAssetPathStringSet the icon image asset path that would be displayed in page bubble.Null
iconColorColorSet the page bubble icon color.Null
bubbleBackgroundColorColorSet the page bubble background color.Colors.white
textStyleTextStyleSet TextStyle for both title and bodytitle: color: Colors.white , fontSize: 50.0 <br> body: color: Colors.white , fontSize: 24.0

IntroViewFlutter Class

Dart attributeDatatypeDescriptionDefault Value
pagesList<PageViewModel>Set the pages of the intro screen.Null
onTapDoneButtonVoidCallbackMethod executes on tapping done button.Null
showSkipButtonBoolShow the skip button at the bottom of page.true
pageButtonTextSizeDoubleSet the button text size.18.0
pageButtonFontFamilyStringSet the font of button text.Default
onTapSkipButtonVoidCallbackMethod executes on tapping skip button.null
pageButtonTextStylesTextStyleConfigure TextStyle for skip, done buttons, overrides pageButtonFontFamily, pageButtonsColor, pageButtonTextSize.fontSize: 18.0, color: Colors.white
skipTextTextOverride Skip Button Text and styles.Text('SKIP')
doneTextTextOverride Done Button Text and styles.Text('DONE')
doneButtonPersistBoolShow done Button throughout pagesfalse
columnMainAxisAlignmentMainAxisAlignmentcontrol [MainAxisAlignment] for columnMainAxisAlignment.spaceAround

For help on editing package code, view the flutter documentation.

Want to contribute !

This is the well documented package. I have documented each and every method that I have used, so have a good read to the code and suggest some changes and new feature to be added in the package. See Contributing.md. Feel free to open an issue.

License

IntroViews-Flutter is licensed under MIT license.

2.3.0

Feature Enhancement

  • Exposed columnMainAxisAlignment to change mainAxisligment.
  • Updated Readme.

2.2.4

  • Adjust the Scaffold in fullscreen.

2.2.3

  • General Update.

2.2.2

  • Added Widget testing.
  • Updated Readme.

2.2.1

  • Added feature to override Text widget styles for skip and done button.
  • Added doneButtonPersist to show done button throughout the session.
  • Updated Readme.

2.1.1

  • Fixed overflow for small screen apps.

2.0.1

Major Updates

  • Made intro views responsive.
  • Refracting page view model.
    • Body title, expects Text Widget.
    • Main image, expects Image Widget.
    • Added TextStyle property to page view model that can be used to set styles for both title and body.
  • Added TextStyle property for page indicator buttons which overrides previous button properties.
  • Updated Readme and example.

1.0.3

  • Made intro views responsive.
  • Added onTapSkipButton voidCallback.
  • Updated Readme.

1.0.2

  • Updated Readme.
  • Fixed bugs.
  • Fixed formatting issues.

1.0.1

  • Updated Readme.
  • Fixed static analyzers issues.
  • Fixed formatting issues.

1.0.0

  • Initial Release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:intro_views_flutter/Models/page_view_model.dart';
import 'package:intro_views_flutter/intro_views_flutter.dart';

/// This is the main method of app, from here execution starts.
void main() => runApp(new App());

/// App widget class

class App extends StatelessWidget {
  //making list of pages needed to pass in IntroViewsFlutter constructor.
  final pages = [
    new PageViewModel(
        pageColor: const Color(0xFF03A9F4),
        iconImageAssetPath: 'assets/air-hostess.png',
        iconColor: null,
        bubbleBackgroundColor: null,
        body: Text(
          'Haselfree  booking  of  flight  tickets  with  full  refund  on  cancelation',
        ),
        title: Text(
          'Flights',
        ),
        textStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
        mainImage: Image.asset(
          'assets/airplane.png',
          height: 285.0,
          width: 285.0,
          alignment: Alignment.center,
        )),
    new PageViewModel(
      pageColor: const Color(0xFF8BC34A),
      iconImageAssetPath: 'assets/waiter.png',
      iconColor: null,
      bubbleBackgroundColor: null,
      body: Text(
        'We  work  for  the  comfort ,  enjoy  your  stay  at  our  beautiful  hotels',
      ),
      title: Text('Hotels'),
      mainImage: Image.asset(
        'assets/hotel.png',
        height: 285.0,
        width: 285.0,
        alignment: Alignment.center,
      ),
      textStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
    ),
    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,
      ),
      textStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'IntroViews Flutter', //title of app
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ), //ThemeData
      home: new Builder(
        builder: (context) => new IntroViewsFlutter(
              pages,
              onTapDoneButton: () {
                Navigator.push(
                  context,
                  new MaterialPageRoute(
                    builder: (context) => new HomePage(),
                  ), //MaterialPageRoute
                );
              },
              showSkipButton:
                  true, //Whether you want to show the skip button or not.
              pageButtonTextStyles: TextStyle(
                color: Colors.white,
                fontSize: 18.0,
              ),
            ), //IntroViewsFlutter
      ), //Builder
    ); //Material App
  }
}

/// Home Page of our example app.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('Home'),
      ), //Appbar
      body: new Center(
        child: new Text("This is the home page of the app"),
      ), //Center
    ); //Scaffold
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  intro_views_flutter: ^2.3.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:intro_views_flutter/intro_views_flutter.dart';
  
Version Uploaded Documentation Archive
2.3.0 Sep 21, 2018 Go to the documentation of intro_views_flutter 2.3.0 Download intro_views_flutter 2.3.0 archive
2.2.4 Sep 5, 2018 Go to the documentation of intro_views_flutter 2.2.4 Download intro_views_flutter 2.2.4 archive
2.2.3 Aug 14, 2018 Go to the documentation of intro_views_flutter 2.2.3 Download intro_views_flutter 2.2.3 archive
2.2.2 Jul 8, 2018 Go to the documentation of intro_views_flutter 2.2.2 Download intro_views_flutter 2.2.2 archive
2.2.1 Jun 29, 2018 Go to the documentation of intro_views_flutter 2.2.1 Download intro_views_flutter 2.2.1 archive
2.1.1 Jun 28, 2018 Go to the documentation of intro_views_flutter 2.1.1 Download intro_views_flutter 2.1.1 archive
2.0.1 Jun 27, 2018 Go to the documentation of intro_views_flutter 2.0.1 Download intro_views_flutter 2.0.1 archive
1.0.3 Jun 26, 2018 Go to the documentation of intro_views_flutter 1.0.3 Download intro_views_flutter 1.0.3 archive
1.0.2 Jun 23, 2018 Go to the documentation of intro_views_flutter 1.0.2 Download intro_views_flutter 1.0.2 archive
1.0.1 Jun 23, 2018 Go to the documentation of intro_views_flutter 1.0.1 Download intro_views_flutter 1.0.1 archive

All 11 versions...

Popularity:
Describes how popular the package is relative to other packages. [more]
88
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
94
Learn more about scoring.

We analyzed this package on Sep 21, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.12.3
  • Flutter: 0.8.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test