How to fix this minor color glitch when toggling dark mode in Flutter?

Here’s the video first:
https://youtube.com/shorts/7hzPLolOjIY?feature=share

As you see in the video, border under the AppBar and on top of the BottomNavigationBar changes weirdly. I’ve used slow animations for the video and seems like it hits black or white before changing between those two colors.

Code that I’m using:

return Container(
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: context.read<ThemeNotifier>().getDarkmode()
            ? const Color(0xFF404040)
            : const Color(0xFFECEEF1),
      ),
    ),
  ),
  child: BottomNavigationBar(
    elevation: 0,
    currentIndex: index,
    onTap: onTap,

And code for the AppBar.

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  const CustomAppBar({super.key, this.title, this.showActions = false});

  final String? title;
  final bool showActions;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      leading: Navigator.of(context).canPop()
          ? IconButton(
              onPressed: () {
                Navigator.pop(context);
              },
              icon: SvgPicture.asset(
                Iconography.arrowLeft,
                color: Theme.of(context).colorScheme.onBackground,
                height: Iconography.m,
                width: Iconography.m,
              ),
            )
          : null,
      elevation: 0,
      centerTitle: true,
      title: title == null
          ? SvgPicture.asset(
              Theme.of(context).isDark ? Logo.dark : Logo.light,
              height: 30,
              width: 30,
            )
          : Text(
              title!,
              style: Theme.of(context).textTheme.titleLarge,
            ),
      actions: showActions
          ? [
              IconButton(
                onPressed: null,
                icon: SvgPicture.asset(
                  Iconography.calendar,
                  color: Theme.of(context).colorScheme.onBackground,
                ),
              ),
              IconButton(
                onPressed: null,
                icon: SvgPicture.asset(
                  Iconography.search,
                  color: Theme.of(context).colorScheme.onBackground,
                ),
              ),
            ]
          : null,
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(44);
}

build method of App widget.

 @override
  Widget build(BuildContext context) {
    final themeNotifier = Provider.of<ThemeNotifier>(context);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      useInheritedMediaQuery: true,
      builder: DevicePreview.appBuilder,
      locale: DevicePreview.locale(context),
      themeMode: themeNotifier.getDarkmode() ? ThemeMode.dark : ThemeMode.light,
      theme: Platform.isIOS
          ? Config.getFlavor().lightTheme.copyWith(
                splashFactory: NoSplash.splashFactory,
                highlightColor: Colors.transparent,
                splashColor: Colors.transparent,
              )
          : Config.getFlavor().lightTheme,
      darkTheme: Platform.isIOS
          ? Config.getFlavor().darkTheme?.copyWith(
                splashFactory: NoSplash.splashFactory,
                highlightColor: Colors.transparent,
                splashColor: Colors.transparent,
              )
          : Config.getFlavor().darkTheme,
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: const CounterPage(),
    );
  }

Update:

I realized maybe toggling colors like that causes that sharp switch and give colors from theme instead. But still no luck.

 return AppBar(
      shape: Border(
        bottom: BorderSide(
          color: Theme.of(context).colorScheme.tertiary,
        ),
      ),