Flutter 底部（手势条）和顶部导航栏沉浸适配多主题

Flutter 底部（手势条）和顶部导航栏沉浸适配多主题

关于Flutter底部（手势条）适配看了很多教程都没有成功，网络上的教程大概主要的一下两种大家可以试一下：

1. 在main入口配置

   void main() {
    runApp(const MyApp());
    if (Platform.isAndroid) {
      SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        systemNavigationBarColor: Color.fromARGB(255, 242, 247, 251),
      );
      SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    }
   }
   

2. 修改 Android 的 styles.xml 文件

   • 路径：android/app/src/main/res/values/styles.xml

            在该文件中，添加以下内容：

   <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
   <item name="android:navigationBarColor">@android:color/black</item> </style> 

那么手机底部（手势条）到底该怎么适配呢

1. 配置全局主题颜色

   这种方式我感觉是和在main入口里面的配置是一样的，但是在main入口配置不知道什么原因不起作用。

   //亮色主题
   ThemeData lightMode = ThemeData(
    useMaterial3: true,
    appBarTheme: const AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent, // 去除状态栏遮罩
        statusBarIconBrightness: Brightness.dark, // 状态栏图标字体颜色
        systemNavigationBarColor: Color.fromARGB(255, 242, 247, 251), // 底部导航栏颜色
      ),
    ),
   );
   

   //暗色主题
   ThemeData darkMode = ThemeData(
    useMaterial3: true,
    appBarTheme: const AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarColor: Color(0xFF121012), 
      ),
    ),
   );
   

   在MaterialApp中使用

    return MaterialApp(
        title: 'Flutter Demo',
        theme: lightMode,
        darkTheme:  darkMode,
        //darkTheme: darkMode,
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      );
   

   最终效果如下：

2.在appBar里面单独配置

      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarIconBrightness: Brightness.dark,
          systemNavigationBarColor: Color.fromARGB(255, 242, 247, 251),
        ),
      ),

这两个属性设置的是最顶部手机状态栏的颜色。

文章写的不好的地方请大家指正！！！！