如何调整Android原生按钮背景色以匹配Flutter BottomNavigationBar背景？

要让Android原生虚拟导航栏的背景色和Flutter的BottomNavigationBar保持一致，消除两者之间的视觉分割，可按以下方案实现：

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class HomeScreen extends HookConsumerWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 定义BottomNavigationBar的背景色，可直接指定固定色或使用主题色
    final bottomNavBgColor = Theme.of(context).bottomAppBarColor;
    // 根据背景色明暗自动适配导航栏图标亮度，保证可读性
    final navIconBrightness = bottomNavBgColor.computeLuminance() > 0.5 
        ? Brightness.dark 
        : Brightness.light;

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        // 让系统导航栏背景色与BottomNavigationBar完全一致
        systemNavigationBarColor: bottomNavBgColor,
        // 设置导航栏图标亮度
        systemNavigationBarIconBrightness: navIconBrightness,
        // 隐藏系统导航栏与BottomNavigationBar之间的分割线
        systemNavigationBarDividerColor: Colors.transparent,
      ),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.transparent,
        ),
        body: const Center(
          child: Text('Home'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          // 显式指定背景色，确保和系统导航栏统一
          backgroundColor: bottomNavBgColor,
          elevation: 0,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(
                Icons.home_filled,
                size: 40,
              ),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.home_filled,
                size: 40,
              ),
              label: '',
            ),
          ],
        ),
      ),
    );
  }
}

关键细节说明 #

• 统一背景色：通过systemNavigationBarColor将系统导航栏背景色与BottomNavigationBar绑定，既可以使用主题自带的bottomAppBarColor，也可以直接指定固定颜色（比如Colors.black）实现深色效果。
• 图标自动适配：利用computeLuminance()判断背景色明暗，自动切换导航栏图标亮度，避免图标与背景色混淆。
• 消除视觉分割：设置systemNavigationBarDividerColor: Colors.transparent隐藏系统默认的导航栏分割线，完全贴合Google Play的视觉风格。
• Widget树集成：使用AnnotatedRegion替代直接调用SystemChrome，能更好地适配页面切换场景，避免样式冲突。

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