nice_intro 0.1.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 87

nice_intro #

Get your users to know your app with ease

Getting Started #

Onboarding is a great way to introduce your app to newcomers, to help them quickly adapt to the new conditions so that they can get the most out of your app

Pub Version Donate

A Flutter package to build awesome intro slides for your apps.

Demo #

This is somehow what you can expect from this package :)

Package Demo package demo

Installation #

Add the following to pubspec.yaml:

dependencies:
  nice_intro: ^0.1.4

Usage Example #

First, import the following files

import 'package:nice_intro/intro_screen.dart';
import 'package:nice_intro/intro_screens.dart';

Then, create a list of screens each one with the IntroSreen class:

List<IntroScreen> pages =  [
        IntroScreen(
          title: 'Search',
          imageAsset: 'assets/img/1.png',
          description: 'Quickly find all your messages',
          headerBgColor: Colors.white,
        ),
        IntroScreen(
          title: 'Focused Inbox',
          headerBgColor: Colors.white,
          imageAsset: 'assets/img/2.png',
          description: "We've put your most important, actionable emails here",
        ),
        IntroScreen(
          title: 'Social',
          headerBgColor: Colors.white,
          imageAsset: 'assets/img/3.png',
          description: "Keep talking with your mates",
        ),
      ];

You'll come up with a list of nice slides screens.

Finally, pass the pages to an instance of IntroScreens class:

IntroScreens introScreens = IntroScreens(
      footerBgColor: TinyColor(Colors.blue).lighten().color,
      activeDotColor: Colors.white,
      footerRadius: 18.0,
      indicatorType: IndicatorType.CIRCLE,
      pages:pages

    return Scaffold(
      body: introScreens,
    );

And pass it to your scaffold widget.

Documentation #

IntroScreen widget's properties

NameTypeDefaultDescription
titleStringrequiredSet the title of your slide screen
descriptionStringrequiredSet the description of your slide screen
headerStringContainer()Set the widget to use as the header part of your screen
imageAssetStringnullSet the image path of your slide screen
textStyleTextStylenullSet the style of the title and description of your slide
headerBgColorColorColors.whiteSet the background color of the slide
headerPaddingEdgeInsetsEdgeInsets.all(12)Set the padding of the header part of your slide screen

IntroScreens widget's properties

NameTypeDefaultDescription
slidesList<IntroScreen>requiredlist of your slides
onDoneFunctionrequiredSet the action to do when the last slide is reached
onSkipFunctionrequiredSet the action to do when the user skips the slides
footerRadiusdouble12.0Set the radius of the footer part of your slides
footerBgColorColorColor(0xff51adf6)Set the background color of the footer part of your slides
footerGradientsList<Color>Set the list of colors for the gradient of the footer part of your slides
footerPaddingEdgeInsetsEdgeInsets.all(24)Set the padding of the footer part of your slides
indicatorTypeIndicatorTypeIndicatorType.CIRCLESet the type of indicator for your slides
activeDotColorColorColors.whiteSet the color of the active indicator color
inactiveDotColorColornullSet the color of an inactive indicator color
skipTextString"Skip"Set the text of the skip widget
nextWidgetWidgetSet the widget to use for next interaction of your slides
doneWidgetWidgetSet the widget to display when the last slide is reached
viewPortFractiondouble1.0Set the viewport fraction of your slides
textColorColorColors.whiteSet the text color of the footer part of your slides
physicsScrollPhysicsBouncingScrollPhysicsSet the physics for the page view

IndicatorType enum properties

  • IndicatorType.CIRCLE
  • IndicatorType.LINE
  • IndicatorType.DIAMOND

Now enjoy!

Refer to example folder and the source code for more information.

[0.1.0] - [2020-04-26] #

  • Initial build for Flutter nice button library

[0.1.1] - [2020-04-26] #

  • Minor update: update package description

[0.1.2] - [2020-04-27] #

  • Minor update: update the doc and the example

[0.1.3] - [2020-05-04] #

  • Minor update: updates the doc and the example
  • Add physic parameter to the IntroScreens class

[0.1.4] - [2020-05-011] #

  • Minor update: updates the doc and the example
  • Add header parameter to the IntroScreen class to set a custom widget for the header of a slide

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:nice_intro/intro_screen.dart';
import 'package:nice_intro/intro_screens.dart';
import 'package:tinycolor/tinycolor.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'intro screen demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    var screens = IntroScreens(
      onDone: () => Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) => NextPage(),
        ),
      ),
      onSkip: () => print('Skipping the intro slides'),
      footerBgColor: TinyColor(Colors.blue).lighten().color,
      activeDotColor: Colors.white,
      footerRadius: 18.0,
//      indicatorType: IndicatorType.CIRCLE,
      slides: [
        IntroScreen(
          title: 'Search',
          imageAsset: 'assets/img/1.png',
          description: 'Quickly find all your messages',
          headerBgColor: Colors.white,
        ),
        IntroScreen(
          title: 'Focused Inbox',
          headerBgColor: Colors.white,
          imageAsset: 'assets/img/2.png',
          description: "We've put your most important, actionable emails here",
        ),
        IntroScreen(
          title: 'Social',
          headerBgColor: Colors.white,
          imageAsset: 'assets/img/3.png',
          description: "Keep talking with your mates",
        ),
      ],
    );

    return Scaffold(
      body: screens,
    );
  }
}

class NextPage extends StatefulWidget {
  @override
  _NextPageState createState() => _NextPageState();
}

class _NextPageState extends State<NextPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  nice_intro: ^0.1.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:nice_intro/nice_intro.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
75
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]
87
Learn more about scoring.

We analyzed this package on Jul 2, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform android

Because of import path [package:nice_intro/nice_intro.dart, package:nice_intro/page_indicator.dart, package:nice_intro/intro_screens.dart, package:google_fonts/google_fonts.dart, package:google_fonts/src/google_fonts_base.dart, package:path_provider/path_provider.dart, package:path_provider_linux/path_provider_linux.dart] that declares support for platforms: linux

Package does not support Flutter platform ios

Because of import path [package:nice_intro/nice_intro.dart, package:nice_intro/page_indicator.dart, package:nice_intro/intro_screens.dart, package:google_fonts/google_fonts.dart, package:google_fonts/src/google_fonts_base.dart, package:path_provider/path_provider.dart, package:path_provider_linux/path_provider_linux.dart] that declares support for platforms: linux

Package does not support Flutter platform macos

Because of import path [package:nice_intro/nice_intro.dart, package:nice_intro/page_indicator.dart, package:nice_intro/intro_screens.dart, package:google_fonts/google_fonts.dart, package:google_fonts/src/google_fonts_base.dart, package:path_provider/path_provider.dart, package:path_provider_linux/path_provider_linux.dart] that declares support for platforms: linux

Package does not support Flutter platform web

Because of import path [package:nice_intro/nice_intro.dart, package:nice_intro/page_indicator.dart, package:nice_intro/intro_screens.dart, package:google_fonts/google_fonts.dart, package:google_fonts/src/google_fonts_base.dart, package:path_provider/path_provider.dart] that declares support for platforms: android, ios, linux, macos

Package does not support Flutter platform windows

Because of import path [package:nice_intro/nice_intro.dart, package:nice_intro/page_indicator.dart, package:nice_intro/intro_screens.dart, package:google_fonts/google_fonts.dart, package:google_fonts/src/google_fonts_base.dart, package:path_provider/path_provider.dart] that declares support for platforms: android, ios, linux, macos

Package not compatible with SDK dart

because of import path [nice_intro] that is in a package requiring null.

Health suggestions

Fix lib/intro_screen.dart. (-0.50 points)

Analysis of lib/intro_screen.dart reported 1 hint:

line 4 col 7: This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: IntroScreen._pageIndex

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
flutter 0.0.0
google_fonts ^1.1.0 1.1.0
tinycolor ^1.0.2 1.0.2
Transitive dependencies
charcode 1.1.3
collection 1.14.12 1.14.13
convert 2.1.1
crypto 2.1.5
file 5.2.1
http 0.12.1
http_parser 3.1.4
intl 0.16.1
meta 1.1.8
path 1.7.0
path_provider 1.6.11
path_provider_linux 0.0.1+2
path_provider_macos 0.0.4+3
path_provider_platform_interface 1.0.2
pedantic 1.9.0 1.9.1
pigment 1.0.3
platform 2.2.1
plugin_platform_interface 1.0.2
process 3.0.13
sky_engine 0.0.99
source_span 1.7.0
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6 1.2.0
vector_math 2.0.8
xdg_directories 0.1.0
Dev dependencies
flutter_test