flutter开发android，如何适配底部栏样式？

flutter开发android应用，经常会遇到底部会有小横条按钮，背景还是黑色，看着很别扭，应该如何适配呢？

经过一番搜索，我发现有两种方式可以实现，主要是修改底部栏的颜色来适配，还没找到像顶部栏一样的浮动在上面的方案。

第一种方法：修改 Android 的 styles.xml 文件

你可以直接在 Android 项目的 styles.xml 文件中设置导航栏的颜色。

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

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

<resources>
    <!-- Base application theme -->
    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here -->
        <item name="android:navigationBarColor">@android:color/black</item>
    </style>
</resources>

注意：经过验证，我发现在虚拟机上可以实现，但是我的oppo真机上面，底部栏还是黑色的，可能有兼容问题

第二种方法，也是我使用的方法，在 Flutter 中通过代码动态设置

如果你想在 Flutter 中通过代码动态修改导航栏颜色，可以使用 SystemChrome：

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

void main() {
  runApp(MyApp());
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.white, // 设置导航栏颜色
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Navigation Bar Color')),
        body: Center(child: Text('Hello World')),
      ),
    );
  }
}

由于我的底部导航按钮都是白色背景，所以我将底部栏也设置成白色，经过验证，虚拟机和oppo真机都正常。