CODEWITHSUNDEEP
dartflutter
sgon00
sgon00

Reputation: 5757

How to make device top panel (status bar) have the same background color as AppBar in flutter?

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.

Upvotes: 4

Views: 3350

Answers (2)

Ishank Sharma
Ishank Sharma

Reputation: 99

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
    ));

//....
}

Upvotes: 3

Collin Jackson
Collin Jackson

Reputation: 116708

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

Upvotes: 18

Related Questions