System Navigation Bar color not changing with SystemUI overlay style: Flutter

Question

I am working on an android app using Flutter. I want to customize the theme of my app and change the color of the System Navigation Bar (Navigation buttons bar). For this, I am using the theme-

  appBarTheme: AppBarTheme(
    titleTextStyle: TextStyle(
      color: appBarItemColor,
      fontWeight: FontWeight.w900,
      fontSize: 20.sp,
    ),
    iconTheme: const IconThemeData(
      color: appBarItemColor,
    ),
    color: appBarColor,
    elevation: 0,
    systemOverlayStyle: const SystemUiOverlayStyle(
      statusBarColor: appBarColor,
      statusBarIconBrightness: Brightness.light,
      systemStatusBarContrastEnforced: true,
      systemNavigationBarColor: Colors.white,
      systemNavigationBarIconBrightness: Brightness.dark,
      systemNavigationBarDividerColor: appBarColor,
    ),
  ),

as part of the theme data (lightThemeData)-

 return GetMaterialApp(
            debugShowCheckedModeBanner: false,
            theme: lightThemeData,
            darkTheme: lightThemeData,
            home: (isLoggedIn == false) ? const LoginPage() : const HomePage(),
          );
        }),

The problem is that the color of the bottom navigation bar is not changing. It is appearing black with white buttons. I am not able to figure out what the issue is here. Please help! I checked this-https://stackoverflow.com/questions/62944706/flutter-navigation-bar-not-change-with-theme
But I want to change color globally and not only on one screen.