iOS (Safari) 中的 Flutter Web 状态栏

Question

我尝试更改 safari 浏览器中的状态栏，我搜索了它，有很多关于它的问题，但没有一个解决我的问题。我尝试了change-status-bar-color和how-to-change-chrome-header-color。

这个蓝色区域位于 iPhone 的凹口周围，我想更改整个应用程序的颜色。

感谢您的关注。

Answer 1

您想要更改 的值theme-color。您看到的默认颜色是在您的web/manifest.json文件中定义的。

您还可以将其设置为白色，例如将浅色主题设置为白色，将深色主题设置为黑色，方法是将以下行添加到您的web/index.html：

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#000000">

您还可以通过dart:js将脚本添加到您的web/index.html：

<script>
  function setMetaThemeColor(color) {
      document.querySelector('meta[name="theme-color"]').setAttribute("content", color);
    }
</script>

然后通过以下方式调用它dart:js：

import 'package:flutter/material.dart';
import 'dart:js' as js;

extension ColorString on Color {
  String toHexString() {
    return '#${(value & 0xFFFFFF).toRadixString(16).padLeft(6, '0').toUpperCase()}';
  }
}

void setMetaThemeColor(Color color) {
  js.context.callMethod("setMetaThemeColor", [color.toHexString()]);
}