How to change Status Bar and App Bar color in Flutter?

Question

I\'m trying to change the color of system status bar to black. The configuration seems to be overridden by the AppBar class. I can achieve what I want by assigning theme: to

Answer 1

Both iOS and Android:

appBar: AppBar(
  backgroundColor: Colors.red, // status bar and navigation bar color
  brightness: Brightness.light, // status bar brightness
)

---

Only for Android (More flexibility)

You can use SystemChrome class to change Status bar and Navigation bar color. First import

import 'package:flutter/services.dart';

After this, you need to add following lines (better place to put these lines is in your main() method)

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue,
    statusBarColor: Colors.pink,
  ));
}

---