4

How to make device top panel (status bar) have the same background color as AppBar in flutter? The color of the device top panel is always darker than the AppBar backgroundColor. Thanks a lot.

sgon00
  • 4,879
  • 1
  • 43
  • 59

2 Answers2

18

On iOS, this is already true.

On Android, add the following to onCreate in MainActivity.java, after the call to super.onCreate(savedInstanceState);.

getWindow().setStatusBarColor(0x00000000);

This will override the default status bar color of 0x40000000, which is set in the onCreate method of FlutterActivityDelegate.

enter image description here

Collin Jackson
  • 110,240
  • 31
  • 221
  • 152
  • 1
    Thank you very much for the quick reply. It works. ^_^ – sgon00 Aug 31 '17 at 10:32
  • 1
    any way to change the icons color? My appbar is white – Ian Jun 09 '18 at 17:42
  • This used to work, but now my file looks like this in Kotlin. How do I get the transparent bar? `import androidx.annotation.NonNull; import io.flutter.embedding.android.FlutterActivity import io.flutter.embedding.engine.FlutterEngine import io.flutter.plugins.GeneratedPluginRegistrant import android.os.Build import android.view.ViewTreeObserver import android.view.WindowManager class MainActivity: FlutterActivity() { override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) { GeneratedPluginRegistrant.registerWith(flutterEngine); } }` – CodeMemory Nov 24 '19 at 04:00
3

Here is a flutter specific solution. In the build method, you can use the flutter service package.

import 'package:flutter/services.dart';
Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, //top bar color
      statusBarIconBrightness: Brightness.dark, //top bar icons
      systemNavigationBarColor: Colors.white, //bottom bar color
      systemNavigationBarIconBrightness: Brightness.dark, //bottom bar icons
    ));

//....
}
Ishank Sharma
  • 79
  • 1
  • 7