CODEWITHSUNDEEP
iosflutter
Lucas Buchalla Sesti
Lucas Buchalla Sesti

Reputation: 488

How can i change status text bar color

I'm trying put the status bar text color in Brightness Light, with CupertinoNavigationBar

I already tried put in the main the SystemUiOverlayStyle with statusBarColor and the brightness, but not works That text in status bar need be white

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.white,
    statusBarColor: Colors.white,
    statusBarBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.light
  ));
  runApp(MyApp());
}

I'm trying create the appbar for ios and android, but i want put the status bar text color Light, i put a condition which is if is ios i create the CupertinoNavigationBar() and if is android i put the normal AppBar(), if is just the AppBar with brightness, he works fine, but with CupertinoNavigationBar(), no

Upvotes: 2

Views: 5005

Answers (3)

Hugo Passos
Hugo Passos

Reputation: 8427

Update

Now CupertinoNavigationBar also has a brightness property.

Old answer

It's not possible to do that.

CupertinoNavigationBar uses the method _wrapWithBackground() to define whether the status bar is going to be light or dark, so the setting you made with SystemChrome.setSystemUIOverlayStyle() is never going to be considered.

A typical solution would be creating your own navigation bar extending CupertinoNavigationBar, but this is not easy to do in such situation, since CupertinoNavigationBar has a private State and calls other private classes and methods.

In fact, CupertinoNavigationBar is poorly designed if you compare to AppBar, which considers three attributes to define its brightness:

  1. brightness argument that can be passed through the constructor;
  2. ThemeData.AppBarTheme.brightness;
  3. ThemeData.primaryColorBrightness.

Notice that there's an attribute to specify the brightness of Cupertino Widgets, which is CupertinoThemeData.brightness, but it is (oddly) not considered inside _wrapWithBackground().

There's an issue about this already. You should wait for Flutter team response, but until then you can use this workaround.

Upvotes: 5

Lucas Paz
Lucas Paz

Reputation: 815

https://github.com/flutter/flutter/issues/41067#issuecomment-571689955 (iOS Dark Mode and Android)

Add line in Info.plist

<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

And change status bar 👍 

import 'package:flutter/services.dart';
/// ...
SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(statusBarBrightness: Brightness.light) // Or Brightness.dark
);

Upvotes: 2

digitaljoni
digitaljoni

Reputation: 1397

Try setting the brightness to dark. In the AppBar, if I set the Brightness to light, it will make the status bar text to black.

statusBarBrightness: Brightness.dark,

Upvotes: 2

Related Questions