flutter_intro 0.1.0

A better way for new feature introduction and step-by-step users guide for your Flutter project.

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.

Example

class _MyHomePageState extends State<MyHomePage> {
  Intro intro;

  _MyHomePageState() {
    /// init Intro
    intro = Intro(
      stepCount: 4,
      widgetBuilder: widgetBuilder,
    );
  }

  /// use stepWidgetParams get Intro current status
  /// and control the stepWidget position
  Widget widgetBuilder(StepWidgetParams stepWidgetParams) {
    int currentStepIndex = stepWidgetParams.currentStepIndex;
    int stepCount = stepWidgetParams.stepCount;
    Offset offset = stepWidgetParams.offset;
    double height = stepWidgetParams.height;
    double width = stepWidgetParams.width;
    return Stack(
      children: [
        Positioned(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '${currentStepIndex + 1} / $stepCount',
                style: TextStyle(color: Colors.white),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  if (stepWidgetParams.onPrev != null) ...[
                    RaisedButton(
                      onPressed: stepWidgetParams.onPrev,
                      child: Text('Prev'),
                    ),
                    SizedBox(
                      width: 16,
                    ),
                  ],
                  if (stepWidgetParams.onNext != null) ...[
                    RaisedButton(
                      onPressed: stepWidgetParams.onNext,
                      child: Text('Next'),
                    ),
                    SizedBox(
                      width: 16,
                    ),
                  ],
                  if (stepCount - 1 == currentStepIndex)
                    RaisedButton(
                      onPressed: stepWidgetParams.onFinish,
                      child: Text('Finish'),
                    ),
                ],
              ),
            ],
          ),
          left: offset.dx -
              (currentStepIndex == 0 ? 140 : 0) +
              ((currentStepIndex == 1 || currentStepIndex == 3)
                  ? width + 16
                  : 0),
          top: offset.dy +
              (currentStepIndex == 2 ? height + 16 : 0) -
              (currentStepIndex == 0 ? height : 0),
        ),
      ],
    );
  }

  @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,
              ),
              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);
        },
      ),
    );
  }
}