How to change status bar color in Flutter?

问题

I am trying to change the status bar color to white. I found this pub on flutter. I tried to use the example code on my dart files.

回答1:

Works totally fine in my app

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return MaterialApp(
      title: app_title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: home_title),
    );
  }
}

UPD: Another solution

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

回答2:

Only Android (more flexibility):

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, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
  ));
}

---

Both iOS and Android:

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

回答3:

For those who uses AppBar

If you use AppBar then updating status bar color is as simple as this:

Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(
    // Use Brightness.light for dark status bar 
    // or Brightness.dark for light status bar
    brightness: Brightness.light 
  ),
  body: ...
)

回答4:

I can't comment directly in the thread since I don't have the requisite reputation yet, but the author asked the following:

the only issue is that the background is white but the clock, wireless and other text and icons are also in white .. I am not sure why!!

For anyone else who comes to this thread, here's what worked for me. The text color of the status bar is decided by the Brightness constant in flutter/material.dart. To change this, adjust the SystemChrome solution like so to configure the text:

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.red,
      statusBarBrightness: Brightness.dark,
    ));

Your possible values for Brightness are Brightness.dark and Brightness.light.

Documentation: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html

回答5:

on the main.dart file import service like follow

  import 'package:flutter/services.dart';

and inside build method just add this line before return

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.orange
)); 

Like this:

@override
 Widget build(BuildContext context) {
   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: CustomColors.appbarcolor
    ));
    return MaterialApp(
    home: MySplash(),
    theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: CustomColors.appbarcolor,
    ),
  );
 }

回答6:

try this:

return MaterialApp(
    ...
    theme: ThemeData(
        primarySwatch: Colors.deepPurple
    ),
    ...
);

回答7:

to Make it Like your App Bar Color

import 'package:flutter/material.dart';

 Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
  ));
 }

回答8:

I think this will help you:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white, // navigation bar color
        statusBarColor: Colors.white, // status bar color
        statusBarIconBrightness: Brightness.dark, // status bar icons' color
        systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
    ));

回答9:

What you want is Themes. They're important for a lot more than the AppBar color.

https://flutter.io/cookbook/design/themes/

来源：https://stackoverflow.com/questions/52489458/how-to-change-status-bar-color-in-flutter