flutter app 状态栏

倔强_build2025-12-03 11:19

码友说flutter Android app底部会有一个状态栏，在手势导航控制器底部，会让app非常的不好看，尤其是删评页面。看展示：

一、原始页面

这是新建项目没有任何代码改动。

二、修改后页面

此时底部控制器跟随背景色，要点说明：

csharp 复制代码

void main() {
  // 在执行异步操作前需要初始化-----底层引擎连接
  WidgetsFlutterBinding.ensureInitialized();
  // 底部手势控制器-----底部状态栏
  /**
   * 状态栏颜色
   * SystemUiMode.immersive：沉浸模式，隐藏系统 UI
   * SystemUiMode.immersiveSticky：粘性沉浸模式
   * SystemUiMode.edgeToEdge：内容延伸至边缘但保留系统 UI 可见性
   */
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(const MyApp());
}

此状态下若想修改底部控制器颜色可通过：

return 复制代码

  value: const SystemUiOverlayStyle(
    // 底部状态栏颜色
    systemNavigationBarColor: Colors.transparent,
  ),
  child: MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  ),
);````