Why showcaseview throws error on first try?

Question

Hey I am using ShowCaseView in my Flutterapp. When I first open my app, after registration there is no showcase, not even the icon which should be 'showcased' is shown. But when I am closing the app and opening it again it works just fine.

Thats the code referring to showcase:

class _HomeSearchPageState extends State<HomeSearchPage> {

  final keyOne = GlobalKey();


  void initState() {
    super.initState();

  WidgetsBinding.instance.addPostFrameCallback(
    (_) => ShowCaseWidget.of(context).startShowCase([
      keyOne,
    ]),
  );

}

And now the scaffold:

    return Scaffold(
    appBar: PreferredSize(
      preferredSize: Size.fromHeight(getTopBarSize()),
      child: AppBar(
        automaticallyImplyLeading: false,
        title: Text(
          'username',
          style: TextStyle(fontSize: 14),
        ),
        actions: <Widget>[
          Showcase(
            key: keyOne,
            description: 'test',
            child: IconButton(
                icon: Icon(Icons.search),
                onPressed: () {
                  showSearch(context: context, delegate: DataSearch())
                      .whenComplete(() => setName());
                }),
          ),
        ],
      ),
    ),)

I did exactly the same as in the Github example but still it throws this error the first time:

    ════════ Exception caught by widgets library ═══════════════════════════════════
The following NoSuchMethodError was thrown building IconTheme(color: Color(0xffffffff)):
The getter 'activeWidgetIds' was called on null.
Receiver: null
Tried calling: activeWidgetIds

    The relevant error-causing widget was
AppBar
lib\Views\HomeSearchPage.dart:182
When the exception was thrown, this was the stack
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1      ShowCaseWidget.activeTargetWidget
package:showcaseview/showcase_widget.dart:51
#2      _ShowcaseState.showOverlay
package:showcaseview/showcase.dart:171
#3      _ShowcaseState.didChangeDependencies
package:showcaseview/showcase.dart:164
#4      StatefulElement._firstBuild
package:flutter/…/widgets/framework.dart:4786

════════ Exception caught by rendering library ═════════════════════════════════
Each child must be laid out exactly once.
The relevant error-causing widget was
AppBar
lib\Views\HomeSearchPage.dart:182
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by scheduler library ═════════════════════════════════
Exception: Please provide ShowCaseView context



 ════════ Exception caught by widgets library ═══════════════════════════════════
'package:flutter/src/widgets/framework.dart': Failed assertion: line 6224 pos 12: '_children.contains(child)': is not true.
The relevant error-causing widget was
AppBar
lib\Views\HomeSearchPage.dart:182
════════════════════════════════════════════════════════════════════════════════

These errors are kind a looped, so the debug console shows them all the time. The only difference between the first app opening and the second one is: In the first one the user enters a registrationpage and after this he enters the page with the showcaseview. In the second the user enters directly the page with the showcaseview. How can this affect the showcase and more accurate why does this throw the errors?

Answer 1

Not sure if we share a similar issue but maybe my answer will help you somehow :). The issue occurs when I navigate to the page where I have Showcase widget, but it does not occur when I navigate "back" to the page from the other page.

Maybe you can check this page "This error is thrown if you haven't wrapped your widget with ShowCaseWidget. This is not the problem with the package itself."

Thus, I tried raising the level of the ShowCaseWidget in the main.dart and the issue was solved.

void main() {
  // runApp(MyApp());
  runApp(
    ShowCaseWidget(
      autoPlay: false,
      autoPlayDelay: Duration(seconds: 8),
      autoPlayLockEnable: false,
      builder: Builder(
        builder: (context) => MyApp(),
      ),
      onStart: (index, key) {
        print('onStart: $index, $key');
      },
      onComplete: (index, key) {
        print('onComplete: $index, $key');
      },
    ),
  );
}

So far the app still works well. I will report again here in case any issues occur.