flutter app 状态栏

码友说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'),
  ),
);````
相关推荐
晚霞的不甘2 小时前
深度解析:Flutter 与 OpenHarmony 融合架构下的跨平台渲染机制与系统级集成
flutter·架构
kirk_wang2 小时前
Flutter图片库CachedNetworkImage鸿蒙适配:从原理到实践
flutter·移动开发·跨平台·arkts·鸿蒙
松☆2 小时前
Flutter 与 OpenHarmony 数据持久化协同方案:从 Shared Preferences 到分布式数据管理
分布式·flutter
松☆2 小时前
OpenHarmony + Flutter 离线能力构建指南:打造无网可用的高可靠政务/工业应用
flutter·政务
松☆2 小时前
OpenHarmony + Flutter 多语言与国际化(i18n)深度适配指南:一套代码支持中英俄等 10+ 语种
android·javascript·flutter
晚霞的不甘2 小时前
Flutter 与开源鸿蒙(OpenHarmony)性能调优与生产部署实战:从启动加速到线上监控的全链路优化
flutter·开源·harmonyos
AskHarries3 小时前
Flutter + Supabase 接入 Google 登录
flutter
晚霞的不甘3 小时前
架构演进与生态共建:构建面向 OpenHarmony 的 Flutter 原生开发范式
flutter·架构
Ya-Jun3 小时前
架构设计模式:依赖注入最佳实践
flutter