Flutter web status bar in iOS (Safari)
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()]);
}
Ali Azimoshan
I'm Ali, I’ve spent the past 3+ years working across various areas of software development, mobile development, front-end/back-end. besides, I am well known for reliability and punctuality in national and international. I am passionate about everything related to coding. Nowadays I'm interested in mobile development (Flutter and dart), backend development (node.js), frontend development (React, tailwind). When I'm not chained to my laptop, you'll find me in Gym, Cafe, or walking in the park.
Updated on January 03, 2023Comments
-
Ali Azimoshan over 1 year
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.
-
Ali Azimoshan about 2 yearsThanks for your response, I checked it before and it's not working. it worked in the android browser but not in Safari.
-
Gbenga B Ayannuga about 2 yearscan you make me understand the safari aspect very well? i try that code on ios n is working
-
nicover about 2 yearsshould be accepted. manifest.json didn't work for me (don't know why) but index.html config worked perfectly. Don't forget to clear safari cache or use private navigation to see changes quickly