flutter_intro 0.0.1

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

example/lib/main.dart

import 'dart:async';
import 'dart:ui';

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Driver'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  OverlayEntry overlayEntry;
  double width;
  double height;
  Offset position;
  Intro intro;
  final GlobalKey key1 = GlobalKey();
  final GlobalKey key2 = GlobalKey();
  final GlobalKey key3 = GlobalKey();
  final GlobalKey key4 = GlobalKey();
  final GlobalKey key5 = GlobalKey();

  void updateWidget(GlobalKey globalKey) {
    RenderBox renderBox = globalKey.currentContext.findRenderObject();
    width = renderBox.size.width;
    height = renderBox.size.height;
    position = renderBox.localToGlobal(Offset.zero);
  }

  Widget widgetBuilder(StepWidgetParams stepWidgetParams) {
    return Stack(
      children: [
        Positioned(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '${stepWidgetParams.currentStepIndex + 1} / ${stepWidgetParams.stepCount}',
                style: TextStyle(color: Colors.white),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  if (stepWidgetParams.onPrev != null) ...[
                    RaisedButton(
                      onPressed: stepWidgetParams.onPrev,
                      child: Text('上一步'),
                    ),
                    SizedBox(
                      width: 16,
                    ),
                  ],
                  if (stepWidgetParams.onNext != null) ...[
                    RaisedButton(
                      onPressed: stepWidgetParams.onNext,
                      child: Text('下一步'),
                    ),
                    SizedBox(
                      width: 16,
                    ),
                  ],
                  if (stepWidgetParams.stepCount - 1 ==
                      stepWidgetParams.currentStepIndex)
                    RaisedButton(
                      onPressed: stepWidgetParams.onFinish,
                      child: Text('结束'),
                    ),
                ],
              ),
            ],
          ),
          left: stepWidgetParams.offset.dx -
              (stepWidgetParams.currentStepIndex == 0 ? 100 : 0),
          top: stepWidgetParams.offset.dy -
              100 +
              ((stepWidgetParams.currentStepIndex == 1 ||
                      stepWidgetParams.currentStepIndex == 2)
                  ? 340
                  : 0),
        ),
      ],
    );
  }

  @override
  void initState() {
    super.initState();
    intro = Intro(steps: [
      IntroStep(
        key: key1,
        widgetBuilder: widgetBuilder,
      ),
      IntroStep(
        key: key2,
        widgetBuilder: widgetBuilder,
      ),
      IntroStep(
        key: key3,
        widgetBuilder: widgetBuilder,
      ),
      IntroStep(
        key: key4,
        widgetBuilder: widgetBuilder,
      ),
      IntroStep(
        key: key5,
        widgetBuilder: widgetBuilder,
      ),
    ]);
    Timer(Duration(microseconds: 0), () {
      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(
                      key: key3,
                      fallbackWidth: 200,
                      fallbackHeight: 200,
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 16,
              ),
              Placeholder(
                key: key4,
                fallbackHeight: 200,
              ),
              SizedBox(
                height: 16,
              ),
              Row(
                children: [
                  Flexible(
                    child: Placeholder(
                      fallbackWidth: 200,
                      fallbackHeight: 200,
                    ),
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Flexible(
                    child: Placeholder(
                      fallbackWidth: 200,
                      fallbackHeight: 200,
                      key: key5,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        key: key1,
        child: Icon(
          Icons.play_arrow,
        ),
        onPressed: () {
          intro.start(context);
        },
      ),
    );
  }
}