CODEWITHSUNDEEP
flutterflutter-layouticonsflutter-dependencies
Deogratius Mabima
Deogratius Mabima

Reputation: 428

How to set status bar icon color in Flutter?

I'm working on the flutter project, I want to give the white colour to the status-bar icon. so I used the following line of code, and it gave me the result on a splash screen

FLUTTER CODE:

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
  systemNavigationBarColor:  Color(0xffdedede),
  systemNavigationBarIconBrightness: Brightness.dark,
  systemNavigationBarDividerColor: null,
  statusBarColor: Color(0xffbf0000),
  statusBarIconBrightness: Brightness.light,
  statusBarBrightness: Brightness.dark,
  ));

BUT: when the app navigates to the home screen, the status-bar icon colour change back to black, I don't know what is missing from that line's code. So I'm stuck on that

Upvotes: 0

Views: 1681

Answers (2)

Looping Boy
Looping Boy

Reputation: 94

If you just want to put it for the whole app, you can put it in your top level main() function like this :

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarBrightness: Brightness.light,
      statusBarIconBrightness: Brightness.light
  ));
  runApp(const MyApp());
}

It's possible to make it change during the runtime.

This code has been tested with iOS 15.2, Flutter 3.10.6

Upvotes: 0

dangngocduc
dangngocduc

Reputation: 1814

Colour of status-bar icon is depend on color of appbar. You can try edit systemOverlayStyle of AppBar on Home Screen ?

https://api.flutter.dev/flutter/material/AppBar/systemOverlayStyle.html

Upvotes: 2

Related Questions