Proper use of Flutter globalKey getting null value on currentState

Question

I am following along a youtube video to use the plugin CurvedNavigationBar here: https://www.youtube.com/watch?v=TX2x41h47fE In the video around 3:30 time in video he shows how to use globalkey to dynamically change the tab and page. The problem I am having is that hes doing this all from one file. I am trying to get this to work from a different file and maybe I'm misunderstanding as any other tutorials or learning articles about globalkeys are all done using a single file example. I'm obvioulsy confused about the proper usage of it as the term global makes me think I can use this in other widgets.

In my home_screen.dart file I have the curved nav bar setup like so..

final GlobalKey<CurvedNavigationBarState> navigationKey = GlobalKey<CurvedNavigationBarState>();

bottomNavigationBar: Theme(
          data: Theme.of(context).copyWith(
            iconTheme: const IconThemeData(color: kPrimaryColor),
          ),
          child: CurvedNavigationBar(
            key: navigationKey,
            animationDuration: const Duration(milliseconds: 300),
            animationCurve: Curves.easeInOut,
            color: kSecondaryColor,
            backgroundColor: Colors.transparent,
            items: items,
            height: 60.h,
            index: selectedIndex,
            onTap: (selectedIndex) => setState(() => this.selectedIndex = selectedIndex),
          ),

and in a different widget in a different file I have a few buttons. Like the guy in the youtube video I try to use this key to access the method to setPage but it says undefined like so..

onPressed: () {
          final navigationState = navigationKey.currentState!;
          navigationState.setPage(1);
        },

At first I was getting the error that navigationKey was undefined. So I added another declaration at the top of the 2nd file like so...

final GlobalKey<CurvedNavigationBarState> navigationKey = GlobalKey<CurvedNavigationBarState>();

When I declare this globalkey in the second file when I click the button I get this log error...

I/flutter (26457): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
I/flutter (26457): The following _CastError was thrown while handling a gesture:
I/flutter (26457): Null check operator used on a null value
I/flutter (26457): 
I/flutter (26457): When the exception was thrown, this was the stack:
I/flutter (26457): #0      NumbersWidget.buildButton.<anonymous closure> (package:vext/screens/profilepageviews/Widgets/numbers_widget.dart:73:67)
I/flutter (26457): #1      _InkResponseState.handleTap (package:flutter/src/material/ink_well.dart:1077:21)

I guess I'm wondering if I'm using this wrong or if it cant be used outside the initial file... Any insight would be most appreciated.

Proper use of Flutter globalKey getting null value on currentState

0 Answers0