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.

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

Answer 2

Flutter master channel

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 ...;
   }
   

Flutter stable / dev channel

---

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: ...,
     );
   }
   

Answer 3

Please try to use the below code:

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