Flutter切换暗黑模式时边框颜色异常问题的解决方法

AppBar下方和BottomNavigationBar顶部的边框在切换暗黑模式时出现异常变色。放慢动画后可见，颜色在切换过程中会先变为黑色或白色，再过渡到目标颜色。

相关代码 #

BottomNavigationBar 外层容器代码 #

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,

CustomAppBar 实现代码 #

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);
}

根App组件的build方法 #

@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(),
  );
}

已尝试的修复方案 #

最初认为直接通过ThemeNotifier判断模式切换颜色会导致过渡生硬，于是改为从主题的colorScheme中获取颜色，但问题仍然存在：

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

内容的提问来源于stack exchange，提问作者mirkancal