Flutter (Showcase View Package): "Please provide ShowCaseView context"

Question

I am trying to use the showcaseview package to showcase feature of the app to my users. The app will be using a side navigation drawer to control the navigation of the app.

However it seems that I am not able to provide the showcase widget with context as I am getting the exception "Please provide ShowcaseView context" when navigating to a page that has a showcase widget.

I have tried many things but all does not work and I think I am doing something wrong that I cannot see.

For now I have managed to get it working by removing the ShowcaseWidget from within main.dart and wrapping each scaffold of each page with the ShowcaseWidget.

I have also tried to wrap the MaterialApp within the ShowcaseWidget in main.dart, this also works.

But i feel these ways are the incorrect way of doing it. Is this correct?

What might I be doing wrong. Here is my code:

main.dart

void main() {
  runApp(
    MaterialApp(
      home: ShowCaseWidget(
        builder: Builder(
          builder: (context) => const FirstPage(),
        ),
      ),
    ),
  );
}

first_page.dart

class FirstPage extends StatefulWidget {
  const FirstPage({super.key});

  @override
  State<FirstPage> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  final globalKeyOne = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const SideNavigation(),
      appBar: AppBar(
        title: const Text("Example"),
      ),
      body: Center(
        child: Showcase(
          key: globalKeyOne,
          description: "Test",
          child: const Text("First page"),
        ),
      ),
    );
  }
}

second_page.dart

class SecondPage extends StatefulWidget {
  const SecondPage({super.key});

  @override
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const SideNavigation(),
      appBar: AppBar(
        title: const Text("Example"),
      ),
      body: const Center(
        child: Text("Second page"),
      ),
    );
  }
}

side_navigation.dart

class SideNavigation extends StatelessWidget {
  const SideNavigation({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          ListTile(
            title: const Text('First page'),
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const FirstPage(),
                ),
              );
            },
          ),
          ListTile(
            title: const Text('Second page'),
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const SecondPage(),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

Thank you, really appreciate your time looking into my issue.