`
iaiai
  • 浏览: 2203669 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flutter更改状态栏颜色

 
阅读更多
在Flutter中,例如iOS的状态栏中的时间、网络信号等字体的颜色修改有以下两个方式:
在 system_chrome.dart文件中有两段代码,用来更改不同的状态栏字体颜色。

介绍

1.字体颜色白色
/// System overlays should be drawn with a light color. Intended for
  /// applications with a dark background.
  static const SystemUiOverlayStyle light = SystemUiOverlayStyle(
    systemNavigationBarColor: Color(0xFF000000),
    systemNavigationBarDividerColor: null,
    statusBarColor: null,
    systemNavigationBarIconBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.light,
    statusBarBrightness: Brightness.dark,
  );


2. 字体颜色黑色
/// System overlays should be drawn with a dark color. Intended for
  /// applications with a light background.
  static const SystemUiOverlayStyle dark = SystemUiOverlayStyle(
    systemNavigationBarColor: Color(0xFF000000),
    systemNavigationBarDividerColor: null,
    statusBarColor: null,
    systemNavigationBarIconBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.light,
  );


使用

白色
void main() {
  runApp(MyApp());
  //白色
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Container(),
      ),
    );
  }
}



黑色
void main() {
  runApp(MyApp());
  //黑色
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Container(),
      ),
    );
  }
}


  • 大小: 77.5 KB
  • 大小: 70.1 KB
分享到:
评论

相关推荐

    状态栏管理,状态栏管理

    对于某些特殊情况,比如需要在用户滚动时动态改变状态栏颜色,可以使用 `NotificationListener` 和 `SliverAppBar` 结合。监听 `ScrollNotification`,在用户滚动时调整状态栏颜色。 6. **Android 插件(Platform ...

    Flutter实现底部导航栏效果

    接下来,我们需要定义主页面的状态和底部导航栏的内容。我们可以使用BottomNavigationBar widget来实现底部导航栏的效果。 ```dart class _MyHomePageState extends State<MyHomePage> { PageController ...

    沉浸式状态栏的实现

    在Activity的`onCreate()`方法中,通过Java代码动态修改状态栏颜色。这通常涉及到对API版本的判断,因为不同Android版本的处理方式略有差异。对于API 21及以上版本,可以使用`getWindow().setStatusBarColor()`方法...

    Flutter 常用系列demo代码

    10. **热重载**:Flutter支持热重载功能,允许开发者快速预览代码更改,极大地提高了开发效率。 通过这些示例代码,开发者不仅可以学习到Flutter的基本语法和组件用法,还可以了解到Flutter的响应式编程模型和声明...

    flutter_web_app:内置于 Flutter 的 Easy WebApp Wrapper。 适用于 iOS 和 Android

    flutter_web_app : git : https://github.com/venosyd/flutter_web_app.git ... 在你的 lib/main.dart 中准确地输入: (OBS:更改状态栏颜色和 URL) library myweb.app;import 'package:flutter/mat

    沉浸式状态栏头部拉伸一键置顶.rar

    同时,需要处理状态栏颜色,可以使用`StatusBarColor`或者在`AndroidManifest.xml`中设置`android:windowTranslucentStatus`为`true`。 2. **头部拉伸**:通常通过监听滚动事件,动态调整顶部布局的高度或者透明度...

    Programming Flutter.pdf

    Flutter 社区提供了一些成熟的状态管理解决方案,如 Provider 和 Riverpod。 - **性能优化**:通过对代码和渲染树的优化,可以显著提升应用的性能。 - **国际化与本地化**:为了支持多语言和地区,Flutter 提供了...

    在状态栏中加入进度条.rar

    10. **跨平台实现**:如果你的项目同时支持Android和iOS,可以考虑使用React Native或Flutter等跨平台框架,它们提供了一致的API来处理状态栏和进度条的显示。 理解并掌握这些知识点,开发者就能有效地在状态栏中...

    flutter知识点介绍,特性介绍,发展历程介绍文档

    当开发者在编辑器中保存代码更改后,Flutter会自动将这些更改推送到正在运行的应用实例中,而无需重启整个应用。这意味着开发者可以立即看到更改后的效果,极大地提高了迭代速度和调试效率。热重载不仅适用于界面...

    Flutter实战1

    - 快速开发周期:支持热重载(Hot Reload),可在几秒钟内查看代码更改的效果。 #### 三、搭建Flutter开发环境 1. **安装步骤**: - 下载并安装Flutter SDK。 - 配置环境变量。 - 安装IDE(如Android Studio或...

    flutter-calculator:一个带有抖动的简单计算器

    颤振计算器一个新的Flutter项目。入门该项目是Flutter应用程序的...去做[]添加暗模式[ ]将状态栏颜色更改为原色[ ]将导航栏颜色更改为原色[]切换rtl和ltr视图[]可定制的原色[ ]振动以获得更好的用户体验[ ]删除所有图标

    彩色进度条在状态栏显示

    在IT领域,尤其是在软件开发和用户界面设计中,"彩色进度条在状态栏显示"是一种增强用户体验的重要技术。状态栏通常位于应用界面的顶部或底部,用于显示关键信息,如通知、状态更新和操作进度。彩色进度条可以直观地...

    Flutter以两种方式实现App主题切换的代码

    例如,我们可以通过更改`primaryColor`来改变应用的主要颜色,如状态栏的颜色。然后,通过`Theme.of(context)`可以从当前的`BuildContext`获取`ThemeData`,将其应用于其他组件,以确保它们跟随主题变化。 ### ...

    Flutter实现底部菜单导航

    在本文中,我们将深入探讨如何使用Flutter框架实现底部菜单导航,这是移动应用中常见的功能,允许用户通过底部的图标按钮轻松地在多个界面之间切换。首先,我们需要理解底部菜单导航的基本构成。 一、底部菜单导航...

    flutter-portolio:我使用Dart和Flutter SDK构建的应用程序的集合

    1. **热重载**:Flutter支持快速的热重载功能,允许开发者在运行时即时修改代码并查看效果,极大地提高了开发效率。 2. **单一代码库**:使用Flutter,你可以用同一份代码库开发iOS和Android应用,减少重复工作。 3....

    底部导航栏中间圆形按钮凸起效果demo

    在这里,我们可以将底部导航栏的每个按钮视为一个`RadioButton`,通过`RadioGroup`的选中状态改变,控制中间按钮的凸起效果。 3. **`ImageView`**:`ImageView`用于显示图像资源,如PNG、JPEG等。在底部导航栏中,...

    GSYFlutterDemoWeb

    配置好Flutter开发环境(目前的Flutter SDK版本v1.7.8以上版本)已有例子控制器实例圆角例子滑动监听示例滑动到指定位置示例滑动到指定位置2例子转换例子文本行间距示例多种拖放刷新示例绝对定位例子气泡提示框示例...

    Scrollable的使用与改装

    这段代码使用`SystemChrome.setSystemUIOverlayStyle`方法设置了系统界面的覆盖样式,将状态栏颜色更改为蓝色。 在个人主页页面中,`Scrollable`组件可能需要与其它组件结合,如`AppBar`、`TabBarView`等,以实现更...

Global site tag (gtag.js) - Google Analytics