Flutter web status bar in iOS (Safari)

Question

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.

Waxler

Answer 1

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()]);
}

Antiicer

should 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 – Acme

Thanks this works. Any idea if it is possible to put this on Dart code instead? – Hemelytron

Answer 2

Flutter 3.13.0

Status bar color can be changed based on SystemUiOverlayStyle.

Check out Proposal for more information: https://github.com/flutter/flutter/issues/123365

Check out Pull Request for more information: https://github.com/flutter/engine/pull/40599

---

1. Using AppBar widget:

   Scaffold(
     appBar: AppBar(
       systemOverlayStyle: const SystemUiOverlayStyle(statusBarColor: Colors.red),
     ),
   )
   

---

2. Using AnnotatedRegion:

   @override
   Widget build(BuildContext context) {
     return AnnotatedRegion<SystemUiOverlayStyle>(
       value: const SystemUiOverlayStyle(statusBarColor: Colors.red),
       child: ...,
     );
   }
   

---

3. Call SystemChrome.setSystemUIOverlayStyle from your code:

   SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarColor: Colors.red));
   

---

4. Call SystemChrome.setSystemUIOverlayStyle inside build method:

   @override
   Widget build(BuildContext context) {
     SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarColor: Colors.red));
   
     return ...;
   }
   

Below Flutter 3.13.0

---

1. Using MaterialApp.color property:

   @override
   Widget build(BuildContext context) {
     return const MaterialApp(
       color: Colors.red,
       home: ...,
     );
   }
   

---

2. Using MaterialApp.theme.primaryColor property:

   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       theme: ThemeData.light().copyWith(primaryColor: Colors.red),
       home: ...,
     );
   }
   

Galle

Answer 3

Please try to use the below code:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.red,
));

Exasperate

Thanks for your response, I checked it before and it's not working. it worked in the android browser but not in Safari. – Waxler

can you make me understand the safari aspect very well? i try that code on ios n is working – Exasperate