A better way for new feature introduction and step-by-step users guide

flutter_intro

a better way for new feature introduction and step-by-step users guide for your flutter project.

usage

to use this package, add flutter_intro as a dependency in your pubspec.yaml file.

init

import 'package:flutter_intro/flutter_intro.dart';

intro intro = intro(
  /// the total number of guide pages, must be passed
  stepcount: 4,

  /// the padding of the highlighted area and the widget
  padding: edgeinsets.all(8),

  /// border radius of the highlighted area
  borderradius: borderradius.all(radius.circular(4)),

  /// use the default usedefaulttheme provided by the library to quickly build a guide page
  /// need to customize the style and content of the guide page, implement the widgetbuilder method yourself
  widgetbuilder: stepwidgetbuilder.usedefaulttheme(
    /// prompt text
    texts: [
      'hello, i'm flutter intro.',
      'i can help you quickly implement the step by step guide in the flutter project.',
      'my usage is also very simple, you can quickly learn and use it through example and api documentation.',
      'in order to quickly implement the guidance, i also provide a set of out-of-the-box themes, i wish you all a happy use, goodbye!',
    ],
    /// button label
    btnlabel: 'i know',
    /// whether to display the current step after the button
    showsteplabel: true,
  ),
);

bind globalkey to widgets that need to be guided

the intro object in the first step contains the keys property, and keys is a globalkey array of length stepcount. just bind the globalkey in the array to the corresponding component.

placeholder(
  /// the first guide page is the first item in the binding keys
  key: intro.keys[0]
)

run

that’s it!

intro.start(context);

custom widgetbuilder method

if you need to completely customize the style and content of the guide page, you need to implement the widgetbuilder method yourself.

final widget function(stepwidgetparams params) widgetbuilder;

this method will be called internally by flutter_intro when the intro page appears,
and will pass some data on the current page in the form of parameters stepwidgetparams,
and finally render the component returned by this method on the screen.

class stepwidgetparams {
  /// return to the previous guide page method, or null if there is none
  final voidcallback onprev;

  /// enter the next guide page method, or null if there is no
  final voidcallback onnext;

  /// end all guide page methods
  final voidcallback onfinish;

  /// which guide page is currently displayed, starting from 0
  final int currentstepindex;

  /// total number of guide pages
  final int stepcount;

  /// the width and height of the screen
  final size screensize;

  /// the width and height of the highlighted component
  final size size;

  /// the coordinates of the upper left corner of the highlighted component
  final offset offset;
}

stepwidgetparams provides all the parameters needed to generate the guide page.
the theme provided by default is also based on this parameter to generate the guide page.

q&a

q1. what if the highlighted area is not displayed completely?

a1. that’s because intro provides 8px padding by default.

we can change it by setting the value of padding.

intro = intro(
  ...,
  /// set it to zero
  padding: edgeinsets.zero,
);

q2. can i set different configurations for each step?

a2. above version 0.4.x, you can set single or multiple step settings(padding & borderradius) through setstepconfig and setstepsconfig.

intro.setstepconfig(
  1,
  padding: edgeinsets.symmetric(
    vertical: -5,
    horizontal: -8,
  ),
);
intro.setstepsconfig(
  [0, 1],
  borderradius: borderradius.all(
    radius.circular(
      16,
    ),
  ),
);

q3. can i make the highlight area smaller?

a3. you can do it by setting padding to a negative number.

intro.setstepconfig(
  1,
  padding: edgeinsets.symmetric(
    vertical: -10,
    horizontal: -8,
  ),
);

example

class _myhomepagestate extends state<myhomepage> {
  intro intro;

  _myhomepagestate() {
    /// init intro
    intro = intro(
      stepcount: 4,

      /// use defaulttheme, or you can implement widgetbuilder function yourself
      widgetbuilder: stepwidgetbuilder.usedefaulttheme(
        texts: [
          'hello, i'm flutter intro.',
          'i can help you quickly implement the step by step guide in the flutter project.',
          'my usage is also very simple, you can quickly learn and use it through example and api documentation.',
          'in order to quickly implement the guidance, i also provide a set of out-of-the-box themes, i wish you all a happy use, goodbye!',
        ],
        btnlabel: 'i know',
        showsteplabel: true,
      ),
    );
  }

  @override
  void initstate() {
    super.initstate();
    timer(duration(microseconds: 0), () {
      /// start the intro
      intro.start(context);
    });
  }

  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: text(widget.title),
      ),
      body: sizedbox.expand(
        child: container(
          padding: edgeinsets.all(16),
          child: column(
            crossaxisalignment: crossaxisalignment.start,
            children: [
              sizedbox(
                width: 100,
                child: placeholder(
                  /// 2nd guide
                  key: intro.keys[1],
                  fallbackheight: 100,
                ),
              ),
              sizedbox(
                height: 16,
              ),
              placeholder(
                /// 3rd guide
                key: intro.keys[2],
                fallbackheight: 100,
              ),
              sizedbox(
                height: 16,
              ),
              row(
                mainaxisalignment: mainaxisalignment.end,
                children: [
                  sizedbox(
                    width: 100,
                    child: placeholder(
                      /// 4th guide
                      key: intro.keys[3],
                      fallbackheight: 300,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      floatingactionbutton: floatingactionbutton(
        /// 1st guide
        key: intro.keys[0],
        child: icon(
          icons.play_arrow,
        ),
        onpressed: () {
          intro.start(context);
        },
      ),
    );
  }
}