flutter_intro 0.0.3

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

import 'package:flutter/material.dart';
import 'package:flutter_intro/flutter_intro.dart';

class _MyHomePageState extends State<MyHomePage> {
  Intro intro;
  final GlobalKey key1 = GlobalKey();
  final GlobalKey key2 = GlobalKey();

  /// use stepWidgetParams get Intro current status
  /// and control the stepWidget position
  Widget widgetBuilder(StepWidgetParams stepWidgetParams) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            '${stepWidgetParams.currentStepIndex + 1} / ${stepWidgetParams.stepCount}',
            style: TextStyle(color: Colors.white),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                onPressed: stepWidgetParams.onPrev,
                child: Text('Prev'),
              ),
              RaisedButton(
                onPressed: stepWidgetParams.onNext,
                child: Text('Next'),
              ),
              RaisedButton(
                onPressed: stepWidgetParams.onFinish,
                child: Text('Finish'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();

    /// init Intro
    intro = Intro(steps: [
      IntroStep(
        key: key1,
        widgetBuilder: widgetBuilder,
      ),
      IntroStep(
        key: key2,
        widgetBuilder: widgetBuilder,
      ),
    ]);

    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(
            children: [
              Row(
                children: [
                  Flexible(
                    child: Placeholder(
                      key: key2,
                      fallbackWidth: 200,
                      fallbackHeight: 200,
                    ),
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Flexible(
                    child: Placeholder(
                      fallbackWidth: 200,
                      fallbackHeight: 200,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        key: key1,
        child: Icon(
          Icons.play_arrow,
        ),
        onPressed: () {
          intro.start(context);
        },
      ),
    );
  }
}