目前看example中是在state的构造函数中初始化的。

intro肯定是要在build函数之前 ， 因为build函数中会调用intro.keys[] 来设置key ， 而因为intro中要设置UI，很有可能使用context，而过早初始化又获取不到context。

还有一个问题是，我在调用intro.start(context)的时候 ， 确认了context和intro都不为空， 但是报错：Null check operator used on a null value（通过catch intro.start(context) 获取到的信息）

Hi,

Thanks for an amazing package! I think I did everything like in the example, but the widget that is supposed to be highlighted is darker than it should be for some reason. The colors that should be there are much lighter.

Maybe you can suggest what is causing this? I am not experienced with color blending at all.

你好， 这个插件真心不错，感谢！

我使用的时候遇到了一些问题: 我引导的步骤是分多个Intro，当符合Intro触发条件后再显示该条件下的Intro。 所以就可能导致一个Intro还没引导完，另一个Intro就start了，这时就会覆盖到没完成的Intro上面，导致错乱

现在的demo上，没找到结束监听，没办法知道上一个Intro是否处理完再处理下一个。能否添加一个队列或者一个结束的监听回调呢？

谢谢

Hi, thank you for the great package. I was trying it out to review it on my Youtube channel, however, when I added the intro keys to Appbar buttons (leading and drawer) the messages and buttons were clipped. Here I have attached the screenshots.

我这里需求是动态得 获取gloablkey,所以在网络请求之后获取到更新得位置，而且是加载tab上，导致传入全局得context，就是加载到区别的页面上，线上会报 Null check operator used on a null value 问题，还有个问题是出现了关闭不掉

 _lastScreenSize = MediaQuery.of(context).size;

Hi, first of all I would like to thank for this super awesome package!

Right now I'm stuck debugging this error _CastError (Null check operator used on a null value) to start the intro. After digging in, I found that it failed to get the currentContext from the global keys when trying to _getWidgetInfo. May I know what are the possibilities that might cause this issue?

I'm having this problem when I want to auto start the intro. There's no problem if I manually start it.

First I would like to thank you for this awesome package. It makes creating intros for an app very easy.

I have tried to make an intro for a webapp too. It seems that there is no dark background, so the white text is impossible to read and the "continue" button is nearly impossible to tap.

I'm using the version 0.5.1 of Flutter_intro and Flutter 1.23.0 in Beta channel.

I have a workaround, by just wrapping the widgetbuilder into a container:

final Intro roomsPageIntro = Intro(
    stepCount: 6,
    padding: EdgeInsets.all(8),
    borderRadius: BorderRadius.all(Radius.circular(4)),
    widgetBuilder: (step) => Container(
      color: kIsWeb ? Colors.black.withOpacity(0.5) : Colors.transparent,   // Workaround for web
      child: StepWidgetBuilder.useDefaultTheme(
        texts: [
          'Mit dieser Leiste bewegen Sie sich durch die Themen der App.',
          'Hier wählen Sie Unterkategorien zum Thema aus.',
          'Mit diesem Button fügen Sie neue Inhalte hinzu wie: Neue Chats mit Kollegen, neue Patienten, Anfragen, Todos, etc.',
          'Hier finden Sie alle Personen und Gruppen, mit denen Sie persönliche Chats haben.',
          'Hier finden Sie alle Patienten-zentrierten Chats.',
          'Hier finden Sie (bald) Zusatzangebote, wie Chat-Bots oder KI-Analysen.',
        ],
        btnLabel: 'Weiter',
        showStepLabel: true,
      )(step),
    ),
  );

Thank you for this awesome library.

When I use combine this library with gen_l10n, a first step message does not disappear. There are any way to set messages from context?

Code

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _startTutorial();
  }

  void _startTutorial() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    if (pref.getBool("showTutorial") ?? true == false) return;

    intro = Intro(
      stepCount: 6,
      maskClosable: true,
      widgetBuilder: StepWidgetBuilder.useDefaultTheme(
        texts: [
          AppLocalizations.of(context)!.tutorialSelectMusic,
          AppLocalizations.of(context)!.tutorialSetPointA,
          AppLocalizations.of(context)!.tutorialSetPointB,
          AppLocalizations.of(context)!.tutorialRepeatOn,
          AppLocalizations.of(context)!.tutorialSlide,
          AppLocalizations.of(context)!.tutorialAD,
        ],
        buttonTextBuilder: (currPage, totalPage) {
          return currPage < totalPage - 1
              ? AppLocalizations.of(context)!.tutorialButtonNext
              : AppLocalizations.of(context)!.tutorialButtonFinish;
        },
      ),
    );

    Timer(
      const Duration(
        milliseconds: 500,
      ),
      () {
        intro.start(context);
      },
    );
    pref.setBool("showTutorial", false);
  }

pubspec.yaml

dependencies:
  flutter_intro: ^2.3.1

Screenshots

1st step.

2nd step. but 1st step message does not disappeared.

3rd step. 2nd step message disappeared, and 1st step message does not disappeared.

First of all thank you for the awesome package. I have a small default feature request, it would be nice to have Skip/Close button in StepWidgetBuilder.useDefaultTheme, as most of the use cases will need a Skip button, which is better than creating a custom widgetBuilder for most of the users. It should have these options:

• StepWidgetBuilder.useDefaultTheme should have a parameter showSkip or showFinish
• skipButtonTextBuilder to customize it's text
• If it is the last index this should not be shown
• Should have optional parameters to pass text style and button style e.g. skipButtonTextStyle, skipButtonStyle

Same thing can be done for a Previous button, so that out-of-the-box the library provides easy customizations

it would be very interesting to be able to stylize the texts and buttons of the introduction to maintain the real identity of the application.

Loving this package 😍

Hi,

Great library. Could you add a VoidCallback for when a user taps on the highlighted UI element? Tapping to dismiss is OK but I want to let the user get through onboarding by actually tapping the buttons! Maybe another easier way would be to make the 'finish' callback available from the library.

@hellohejinyu please create a migration document from v2 to 3, the example and readme are not very intuitive. Secondly enable issue creation on the new repository, currently it is disabled:

demo 链接位于 https://guest-card-testing.web.app/ 为了易于辨识，我将背景颜色改成了绿色。 这个问题会影响到在移动端 Safari 上运行时的显示效果。

为了复现该问题，编译时采用 flutter build web --web-renderer html 命令，且在 web/index.html 的 head 中加入以下代码：

  <script type="text/javascript">
    // 强制使用 html 引擎渲染
    window.flutterWebRenderer = "html";
  </script>

以下是示例代码：

// main.dart
import 'dart:async';

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: 'Demo',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {

  MyHomePage({
    Key? navKey,
    required this.title,
  }) : super(key: navKey);

  late final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late Intro intro;
  late BuildContext globalContext;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 1), () {
      intro.start(globalContext);
    });
  }

  _MyHomePageState() {
    /// init Intro
    intro = Intro(
      stepCount: 4,
      maskClosable: true,
      onHighlightWidgetTap: (introStatus) {
        print(introStatus);
      },

      /// use defaultTheme
      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!',
        ],
        buttonTextBuilder: (currPage, totalPage) {
          return currPage < totalPage - 1 ? 'Next' : 'Finish';
        },
      ),
    );
  }

  Widget build(BuildContext context) {
    globalContext = context;
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        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: 100,
                    ),
                  ),
                ],
              ),
              ElevatedButton(
                  key: intro.keys[0],
                  onPressed: () {
                    intro.start(context);
                  },
                  child: Text("Press me"))
            ],
          ),
        ),
      ),
    );
  }
}

first of all, great plugin.

just having an issue with a form which extents past the current view, the highlighted box is out of view with no option to scroll and just shows the back overlay.

my current fix is having a custom call-back in useAdvancedTheme which will scroll to the key before running 'onNext' but could be a good feature.

current solution

inside Intro instance

onTap: params.currentStepIndex == (params.stepCount - 1)
        ? () => {params.onFinish(), finishCallback()}
         : () async => {
              await nextCallback(params.currentStepIndex + 1),
              params.onNext(),
},

creating the intro instance with a function

intro = createIntro(nextCallback: (index) async {
      print('next callback');
      await Scrollable.ensureVisible(intro.keys[index].currentContext,
          duration: Duration(seconds: 1));
    }, finishCallback: () {
      print('finish callback');
      Scrollable.ensureVisible(context);
});