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

---

Answer 2

I tried the method SystemChrome.setSystemUIOverlayStyle(), as far as I tested (Flutter SDK v1.9.1+hotfix.2, running on iOS 12.1) it works perfect for Android. But for iOS, e.g. if your first screen FirstScreen() doesn't have an AppBar, but the second SecondScreen() does, then at launch the method does set the color in FirstScreen(). However, after navigating back to FirstScreen() from SecondScreen(), the status bar color becomes transparent.

I come up with a hacky workaround by setting an AppBar() with zero height, then status bar's color gets changed by the AppBar, but the AppBar itself is not visible. Hope it would be useful to someone.

// FirstScreen that doesn't need an AppBar
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: AppBar( // Here we create one to set status bar color
          backgroundColor: Colors.black, // Set any color of status bar you want; or it defaults to your theme's primary color
        )
      )
  );
}

// SecondScreen that does have an AppBar
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar()
  }
}

Here is the screenshot of FirstScreen in iPhone Xs Max iOS 12.1:

Answer 3

I'm quite new to StackOverflow & I've never used Flutter however I have found this package that seems to make things relatively easy.

Method 1: Using the package

Once this is imported all you need to do is add this code fragment:

try {
await FlutterStatusbarcolor.setStatusBarColor(Colors.black);
} on PlatformException catch (e) {
print(e);
}

Replacing the parameter for the setStatusBarColor() should give you the desired result, a full list of colours can be found here.

Method 2: Using default functions

If this doesn't work / you don't want to add extra packages or libraries then perhaps this StackOverflow answer may help.

It involves using a similar function to the above method: getWindow().setStatusBarColor() or getActivity().getWindow().setStatusBarColor()

Replacing the parameter with the desired hex code from the same list as earlier may also result in a solution.

Hope it works/helps!

Answer 4

Please read this flutter package. To set status bar text as black, you can set FlutterStatusbarcolor.setStatusBarWhiteForeground(false). you need to have this line of code in didChangeAppLifecycleState method with resume state so that when you go to other application and come back, the status bar text color are set to your initial setup.

Also, you need to set the your AppBar's TextTheme. like following.

Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarWhiteForeground(false);
return MaterialApp(
    title:// title goes here
    theme:// your theme goes here
    home:   Scaffold(
      appBar: AppBar(
                      backgroundColor: Colors.white,
                      title: _loadAppBarTitle(),
                      textTheme: Theme.of(context).textTheme),
      body: //body's goes here
  );
);

Hopefully, this one can help somebody who has the similar problem with me.

Answer 5

If you don't want AppBar at all, then you can just call setSystemUIOverlayStyle in the main function:

void main() async {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

  runApp(new MaterialApp(
    home: new Scaffold(),
  ));
}

It's more tricky if you have an app bar in one scaffold, and none in another. In that case I had to call setSystemUIOverlayStyle after pushing new route with a scaffold that does not have an appbar:

@override
Widget build(BuildContext context) {
  final page = ModalRoute.of(context);
  page.didPush().then((x) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  });

  return new Scaffold();
}

Answer 6

i have achieved that way

  @override
void initState() {
  super.initState();
  // Transparent status bar
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent,));
}

you can also see different properties after comma

SystemUiOverlayStyle(statusBarColor: Colors.transparent,)

just use combination of ctrl + space after comma and you will get what you can use.