I try to change the status bar in the safari browser, I search it and it was a lot's question about it but none of them fixed my issue. I tried change-status-bar-color and how-to-change-chrome-header-color.
This blue area is around iPhone's notches, and I want to change the color in the whole app.
thanks for your attention.
You want to change the value for theme-color. The default color you're seeing is defined in your web/manifest.json file.
You could also set it, for example to white for your light-theme and to black for your dark-theme, by adding following lines to your 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">
You could also change it dynamically via dart:js by adding a script to your web/index.html:
<script>
function setMetaThemeColor(color) {
document.querySelector('meta[name="theme-color"]').setAttribute("content", color);
}
</script>
Then call it via 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()]);
}
Please try to use the below code:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.red,
));