The following _Exception was thrown building CustomShowCaseWidget: Exception: Please provide ShowCaseView context

Question

I have looked at all the answers on Stack Overflow but couldn't resolve my problem.

The scenario is as follows: I am using showcaseview on the BottomNavigationBar at the Menu Tab. When a user logs in for the first time as an agency or freelancer, I show them a ShowCaseWidget on the Menu tab that says "First, complete your profile". It works fine for them, but when a visitor goes to the home page where the BottomNavigationBar, I see an error at the Menu tab that says:

The following _Exception was thrown building CustomShowCaseWidget: Exception: Please provide ShowCaseView context

How can I get rid of this error?

Here is my BottomNavigationBar. Note that I am using persistent_bottom_nav_bar_v2

class BottomNav extends StatefulWidget {
  static const preferencesIsFirstLaunchString = "PREFERENCES_IS_FIRST_LAUNCH_STRING";

  const BottomNav({Key? key}) : super(key: key);

  @override
  State<BottomNav> createState() => _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  final keyOne = GlobalKey();

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Future.delayed(
          Duration.zero,
          () => _isFirstLaunch().then((result) {
                if (result) {
                  ShowCaseWidget.of(context).startShowCase([keyOne]);
                }
              }));
    });
    super.initState();
  }

  final PersistentTabController _controller = PersistentTabController(initialIndex: 0);

  //Screens for each nav items.
  List<Widget> _navScreens() {
    return [
      const HomeScreen(),
      Get.put(AppController()).loginResponse != null ? const FavouriteScreen() : const ChooseAuth(),
      Get.put(AppController()).loginResponse != null ? ShowCaseWidget(builder: Builder(builder: (_) => const UserProfile())) : const ChooseAuth()
    ];
  }

  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
          icon: Image.asset("assets/images/home.png"),
          title: "Home"),
      PersistentBottomNavBarItem(
          icon: Image.asset("assets/images/fav.png" ),
          title: "Favourite" ),

//Here the error show on this tab



PersistentBottomNavBarItem(
          icon: ShowCaseWidget(
            builder: Builder(builder: (_) {
              return CustomShowCaseWidget(
                globalKey: keyOne,
                description: "First Complete your Profile",
                child: Image.asset(
                  "assets/images/menu.png"),
              );
            }),
          ),
          title: (LanguageStringKeys.instance.menu.tr),
        ];
      }

  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
      context,
      screens: _navScreens(),
      controller: _controller,
      items: _navBarsItems(),
    );
  }

  Future<bool> _isFirstLaunch() async {
    final sharedPreferences = await SharedPreferences.getInstance();
    bool isFirstLaunch = sharedPreferences.getBool(BottomNav.preferencesIsFirstLaunchString) ?? true;

    if (isFirstLaunch) {
      sharedPreferences.setBool(BottomNav.preferencesIsFirstLaunchString, false);
    }

    return isFirstLaunch;
  }
}

Also here is my CustomShowCaseWidget class :

class CustomShowCaseWidget extends StatelessWidget {
  final Widget child;
  final String description;
  final GlobalKey globalKey;

  const CustomShowCaseWidget({
    Key? key,
    required this.child,
    required this.description,
    required this.globalKey,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Showcase(
      key: globalKey,
      description: description,
      child: child,
    );
  }
}