How to change status bar color in Flutter

Question

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

User · Answer

This is by far is the best way  it requires no extra plugins  Widget emptyAppBar      return PreferredSize        preferredSize  Size fromHeight 0 0          child  AppBar          backgroundColor  Color 0xFFf7f7f7           brightness  Brightness light                  and call it in your scaffold like this return Scaffold        appBar  emptyAppBar

User · Answer

Works for both iOS and Android import  package flutter services dart     override Widget build BuildContext context      SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle dark      return Scaffold

User · Answer

What you want is Themes  They re important for a lot more than the AppBar color   https   flutter io cookbook design themes

User · Answer

First of all you are import this line  import  package flutter services dart    Then You can use bellow this some line of code in main dart file SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle  systemNavigationBarColor  Colors amber     navigation bar color statusBarColor  Colors white     status bar color statusBarIconBrightness  Brightness dark     status bar icon color systemNavigationBarIconBrightness  Brightness dark     color of navigation controls      Note  If you follow above this steep  as a result you control all of screen  But if you control individual screen status bar color then you can try this     import  package flutter services dart    Widget build BuildContext context     SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle    statusBarColor  Colors transparent    systemNavigationBarColor  Colors transparent

User · Answer

It can be achieved in 2 steps   Set the status bar color to match to your page background using FlutterStatusbarcolor package Set the status bar buttons   battery  wifi etc   colors using the AppBar brightness property  If you have an AppBar     override   Widget build BuildContext context        FlutterStatusbarcolor setStatusBarColor Colors white       return Scaffold        appBar  AppBar          brightness  Brightness light             Other AppBar properties                body  Container               If you don t want to show the app bar in the page     override   Widget build BuildContext context        FlutterStatusbarcolor setStatusBarColor Colors white       return Scaffold        appBar  AppBar          brightness  Brightness light          elevation  0 0          toolbarHeight  0 0     Hide the AppBar                body  Container

User · Answer

For those who uses AppBar If you use AppBar then updating status bar color is as simple as this  Scaffold    appBar  AppBar         Use  Brightness light  for black status bar         or  Brightness dark  for white status bar        https   stackoverflow com a 58132007 1321917     brightness  Brightness light         body         To apply for all app bars  return MaterialApp    theme  Theme of context  copyWith      appBarTheme  Theme of context           appBarTheme          copyWith brightness  Brightness light               For those who don t use AppBar Wrap your content with AnnotatedRegion and set value to SystemUiOverlayStyle light or SystemUiOverlayStyle dark  return AnnotatedRegion lt SystemUiOverlayStyle gt        Use  SystemUiOverlayStyle light  for white status bar       or  SystemUiOverlayStyle dark  for black status bar      https   stackoverflow com a 58132007 1321917   value  SystemUiOverlayStyle light    child  Scaffold

User · Answer

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

User · Answer

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

User · Answer

I spent way to much time on this  When switching my theme from light to dark mode  I struggled  This package works  just add it to your build context  Works great for me on Android and iOs  https   pub dev packages statusbar     sharedPrefs darkTheme       StatusBar color Colors black        StatusBar color Colors white

User · Answer

Works totally fine in my app  import  package flutter statusbarcolor flutter statusbarcolor dart    void main     gt  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                   this package   UPD  Another solution  SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle    statusBarColor  Colors white

User · Answer

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

User · Answer

Change status bar color when you are not using AppBar  First Import this import  package flutter services dart    Now use below code to change status bar color in your application when you are not using the AppBar SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle dark copyWith       statusBarColor  AppColors statusBarColor    set Status bar color in Android devices              statusBarIconBrightness  Brightness dark    set Status bar icons color in Android devices             statusBarBrightness  Brightness dark    set Status bar icon color in iOS           To change the status bar color in iOS when you are using SafeArea  Scaffold    body  Container      color  Colors red     Set your status bar color here        child  SafeArea child  Container           Add your Widget here

User · Answer

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

User · Answer

This is everything you need to know  import  package flutter material dart   import  package flutter services dart    void main       SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle      systemNavigationBarColor  Colors amber     navigation bar color     statusBarColor  Colors white     status bar color     statusBarIconBrightness  Brightness dark     status bar icon color     systemNavigationBarIconBrightness  Brightness dark     color of navigation controls         runApp MyApp

User · Answer

return Scaffold        backgroundColor  STATUS BAR COLOR HERE        body  SafeArea          child  scaffoldBody

User · Answer

None of the existing solutions helped me  because I don t use AppBar and I don t want to make statements whenever the user switches the app theme  I needed a reactive way to switch between the light and dark modes and found that AppBar uses a widget called Semantics for setting the status bar color  Basically  this is how I do it  return Semantics    container  false      don t make it a new node in the hierarchy   child  AnnotatedRegion lt SystemUiOverlayStyle gt       value  SystemUiOverlayStyle light      or  dark     child  MyApp        your widget goes here           Semantics is imported from package flutter material dart  SystemUiOverlayStyle is imported from package flutter services dart

User · Answer

This worked for me   Import Service  import  package flutter services dart    Then add    override   Widget build BuildContext context         SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle        statusBarColor  Colors white        statusBarBrightness  Brightness dark              return MaterialApp home  Scaffold

User · Answer

Instead of the often suggested SystemChrome setSystemUIOverlayStyle   which is a system wide service and does not reset on a different route  you can use an AnnotatedRegion lt SystemUiOverlayStyle gt  which is a widget and only has effect for the widget that you wrap   AnnotatedRegion lt SystemUiOverlayStyle gt      value  SystemUiOverlayStyle        statusBarColor  Colors white         child  Scaffold

User · Answer

This one will also work  SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle dark   SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle light

User · Answer

I had issues with all mentioned answers  except with solution i did myself  Container width  MediaQuery of context  size width  height  MediaQuery of context  padding top  color  Colors green  For views  where is no appBar added i just use container with background which exact height matches status bar height  In this scenario each view can have different status color and i don t need to worry and think about some logic  that somehow wrong views has somehow wrong colors

User · Answer

Update  Recommended   On latest Flutter version  you should use  AppBar    backwardsCompatibility  false    systemOverlayStyle  SystemUiOverlayStyle statusBarColor  Colors orange       Only Android  more flexibility   import  package flutter services dart    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

User · Answer

Most of the answers are using SystemChrome which only works for Android  My solution is to combine both AnnotatedRegion and SafeArea into new Widget so it also works in iOS  And I can use it with or without AppBar  class ColoredStatusBar extends StatelessWidget     const ColoredStatusBar       Key key      this color      this child      this brightness   Brightness dark         super key  key      final Color color    final Widget child    final Brightness brightness      override   Widget build BuildContext context        final defaultColor   Colors blue      final androidIconBrightness           brightness    Brightness dark   Brightness light   Brightness dark      return AnnotatedRegion lt SystemUiOverlayStyle gt         value  SystemUiOverlayStyle          statusBarColor  color    defaultColor          statusBarIconBrightness  androidIconBrightness          statusBarBrightness  brightness                 child  Container          color  color    defaultColor          child  SafeArea            bottom  false            child  Container              child  child                                                 Usage  Place it to top of page s widget   override Widget build BuildContext context      return ColoredStatusBar      child     your child here

User · Answer

I solved it by change the whole background color like following  In the main screen  return Scaffold    backgroundColor  Colors black     body  SafeArea

User · Answer

override Widget build BuildContext context      return Theme      data  ThemeData brightness  Brightness dark       child  Scaffold

[dart] How to change status bar color in Flutter?

Examples related to dart

Examples related to flutter

Examples related to flutter-layout

Examples related to flutter-dependencies