Flutter实现沉浸式状态栏-flutter原生支持(原生效果支持IOS和安卓)

做~自己de王妃 提交于 2020-01-17 00:48:41

我不喜欢废话 先上图 (都是真机测试)

  • 安卓的

  • ios的(用ipad演示的)

    实现方式

    ### 我们只需要在生命周期 initState()或者其他的钩子中调用下面的 方法即可
/// 状态栏样式 沉浸式状态栏
  _statusBar([String color]) {
    // 白色沉浸式状态栏颜色  白色文字
    SystemUiOverlayStyle light = SystemUiOverlayStyle(
      systemNavigationBarColor: Color(0xFF000000),
      systemNavigationBarDividerColor: null,
      /// 注意安卓要想实现沉浸式的状态栏 需要底部设置透明色
      statusBarColor: Colors.transparent,
      systemNavigationBarIconBrightness: Brightness.light,
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.dark,
    );

 // 黑色沉浸式状态栏颜色 黑色文字
    SystemUiOverlayStyle dark = SystemUiOverlayStyle(
      systemNavigationBarColor: Color(0xFF000000),
      systemNavigationBarDividerColor: null,
      /// 注意安卓要想实现沉浸式的状态栏 需要底部设置透明色
      statusBarColor: Colors.transparent,
      systemNavigationBarIconBrightness: Brightness.light,
      statusBarIconBrightness: Brightness.dark,
      statusBarBrightness: Brightness.light,
    );
// 这个地方你可以去掉三目运算符 直接调用你想要的 效果即可
    "while" == color?.trim()
        ? SystemChrome.setSystemUIOverlayStyle(light)
        : SystemChrome.setSystemUIOverlayStyle(dark);
  }

ps :这个其实是 依赖余Flutter给我提供的一个 实现类 import 'package:flutter/services.dart';

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!