Flutter - How to set status bar color when AppBar not present

Question

How to set status bar color when AppBar not present.

I have tried this but not working.

Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return new Scaffold(
        body: new Container(
        color: UniQueryColors.colorBackground,
        child: new ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
    );
}

Output look like this:

how did you managed the space of the statusbar, preventing the content from overlapping? — Hannes Tiltmann, Jul 10 '18 at 15:47
I don't quit get where you add that extra padding/margin that your blue container doesn't overlap — Hannes Tiltmann, Jul 11 '18 at 15:27
@Hannes.T For Android, it's by default. For iOS, I think you might have to check for `MediaQuery.of(context).padding.top`. — Giraldi, Nov 07 '18 at 14:25

Hannes Tiltmann · Accepted Answer · 2019-12-31T13:13:22.957

136

First, import services package:

import 'package:flutter/services.dart';

Next, simply put this in the build function of your App:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.blue, //or set color with: Color(0xFF0000FF)
));

Additionally, you can set useful properties like: statusBarIconBrightness, systemNavigationBarColor or systemNavigationBarDividerColor

If you prefer a more flutter/widget way of doing the same thing, consider using the AnnotatedRegion<SystemUiOverlayStyle> widget.

The value: property can be set to a SystemUiOverlayStyle() object containing the same properties as shown above.

For more infos, head over to the API Docs

edited Dec 31 '19 at 13:13

answered Jul 10 '18 at 15:46

Hannes Tiltmann

2,296
1
12
20

1

Add import statement: `import 'package:flutter/services.dart';` – andras May 04 '19 at 07:21
9

This doesn't work well with navigation, or in some situation doesn't seem to work at all. I've add better results with `Jordy Sinke`'s answer, which also feels more fluttery. – Gyome Oct 10 '19 at 15:24
1

Someone mentioned this only works for android and not ios. T/F ? – M A F Jan 26 '21 at 00:32
Does this work programatically? like when I/the user switch the theme between light and dark mode? Some of these options I noticed only works on rebuilds. – Wesley Barnes Feb 13 '21 at 18:15
statusBarColor is only honored in Android version M and greater, no iOS. – lomza Sep 13 '21 at 08:14
Use annotatedregion, this solution is better because it manages automatically – Dennis Barzanoff Sep 17 '21 at 14:04

score 96 · Answer 2 · edited May 18 '20 at 06:39

96

If you take a look at the source code of AppBar, you can see they use an AnnotatedRegion widget. AnnotedRegion widget gives you more control on System overlay style. This is a more fluttery way to configure the system styles when an app bar is not used.

From my understanding, this widget automatically sets the statusbar/navigationbar color when the widget wrapped in it gets overlaid by the statusbar/navigationbar.

You can wrap your widget like this:

import 'package:flutter/services.dart';

...    

Widget build(BuildContext context) {
   return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
         value: SystemUiOverlayStyle.light,                
         child: ...,
      ),
   );
}

For more information about AnnotatedRegion widget head over to the API Docs

edited May 18 '20 at 06:39

Jay Tillu

1,348
5
23
40

answered Feb 08 '19 at 13:10

Jordy

1,036
8
9

7

this should be the accepted answer because it aligns with how the framework handles it – L93 May 23 '19 at 10:47
5

Agreed - it also handles page transitions back, if the previous page used a different value – MichaelM Jul 01 '19 at 01:15
Also, if I have an App with Dark/Light Theme, I use this code in value: **(Theme.of(context).brightness == Brightness.dark) ? SystemUiOverlayStyle.light : SystemUiOverlayStyle.dark** – Hector Aguero Sep 23 '19 at 14:24
6

Replace this to change the status bar color `value: SystemUiOverlayStyle.light.copyWith( statusBarColor: Theme.of(context).primaryColor, )` – Juan Cruz Soler Nov 24 '19 at 19:33
app seems more lagging with this method – redochka May 03 '20 at 18:07
this is should be selected as top answer. – Hitesh Kumar Saini Feb 07 '21 at 11:25

score 15 · Answer 3 · answered Mar 21 '19 at 19:06

As the solution is already mentioned, I am implementing it in a different approach. The approach followed is removing AppBar and changing the color of the status bar using Container widget.

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Test',
      home: Scaffold(
        primary: true,
        appBar: EmptyAppBar(),
        body: MyScaffold(),
      ),
    ),
  );
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        'Test',
      ),
    );
  }
}

class EmptyAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
    );
  }

  @override
  Size get preferredSize => Size(0.0, 0.0);
}

Here I am using EmptyAppBar class for removing the AppBar which is by default present in Scaffold
In EmptyAppBar class we can choose the required color in the container widget.
After that, you have your own custom MyScaffold class for creating your widgets. In my code, I've created a text.

Reference: GitHub Issue

I found this to be the best solution for an app that combines screens with and without an `AppBar`. The `SystemUiOverlayStyle` approach overrides the `AppBar` settings and does not reset when leaving the screen. — rlat, Aug 12 '20 at 19:53

score 7 · Answer 4 · answered May 24 '18 at 06:28

7

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

getWindow().setStatusBarColor(0x00000000);

or you can use the the flutter_statusbarcolor plugin

   changeStatusColor(Color color) async {
    try {
      await FlutterStatusbarcolor.setStatusBarColor(color);
    } on PlatformException catch (e) {
      print(e);
    }
  }

Sample project

answered May 24 '18 at 06:28

Shyju M

9,387
4
43
48

Thank you for your suggestions. I will check them. – Rafiqul Hasan May 24 '18 at 06:37

score 7 · Answer 5 · answered Aug 24 '18 at 05:17

While searching for SystemChrome I found this: https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html

Right above the sample code is a paragraph about AppBar.brightness.

You should should be able to add an AppBar like this:

Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return new Scaffold(
        appBar: new AppBar(
            title: new Text('Nice title!'),
            brightness: Brightness.light,
        ),
        body: new Container(
        color: UniQueryColors.colorBackground,
        child: new ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
    );
}

Heres info about the Brightness

zhancheng · Answer 6 · 2019-04-01T11:06:55.153

7

you should solve this question in two ways:

you did not set appBar then you just write in this way:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.black, 
));

or

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
  statusBarColor: Colors.white, 
));

you always set appBar so you should set appBar but not upon code:

Scaffold(
  appBar: AppBar(
    brightness: Brightness.light,
  )
)

or

Scaffold(
  appBar: AppBar(
    brightness: Brightness.dark,
  )
)

edited Apr 01 '19 at 11:06

answered Apr 01 '19 at 11:00

zhancheng

79
1
3

Thanks ... In my case it worked when I use SystemUiOverlayStyle.dark with statusBarColor: Colors.white – Sabeer Jul 31 '20 at 04:47
Thank you sir. `brightness: Brightness.dark` works. – axunic Oct 15 '20 at 10:49
1

Well explained, saved a lot of time. – Kanwarpreet Singh Dec 18 '20 at 06:56

score 5 · Answer 7 · answered May 29 '20 at 03:59

I tried many methods but they didn’t work. And i found another method, use safeArea ,AnnotatedRegion and Scaffold

AnnotatedRegion(
  // status icon and text color, dark:black  light:white
  value: SystemUiOverlayStyle.dark,
  child: Scaffold(
     // statusbar color
     backgroundColor: Colors.white,
     body : SafeArea(****)
  )
}

The code implements the white status bar and black text

score 4 · Answer 8 · answered May 24 '18 at 06:01

The status bar colour is rendered by the Android system. Whether that can be set from Flutter or not is up for debate: How to make Android status bar light in Flutter

What you can do however, is change the status bar colour in the Android specific code by editing the theme: How to change the status bar color in android

For iOS you'll have to see their documentation - I'm not familiar with the platform.

There are in fact two Dart libraries, one for setting the light/dark theme of the statusbar and the other for setting the colour. I haven't used either, but clearly someone else has had the same issue you're facing and ended up developing their own package.

Thank you for your suggestions. I will check them. – Rafiqul Hasan May 24 '18 at 06:38 — Rafiqul Hasan, May 24 '18 at 06:38

CopsOnRoad · Answer 9 · 2021-11-29T17:30:22.777

4

Use

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

or

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

edited Nov 29 '21 at 17:30

answered May 08 '19 at 07:09

CopsOnRoad

237,138
77
654
440

what exactly does `backwardsCompatibility` do? – Stuck Mar 31 '21 at 02:32
1

@Stuck `backwardsCompatibility` will be removed in future and its default value will be set to `false` which I just did. Setting it `true` doesn't allow `systemOverlayStyle` property to work. – CopsOnRoad Mar 31 '21 at 07:05
I found the description: https://api.flutter.dev/flutter/material/AppBar/backwardsCompatibility.html – Stuck Mar 31 '21 at 09:10
outdated backward comp. – petras J Nov 29 '21 at 12:49
@petrasJ Yes, it was going to be deprecated as I've mentioned in the comment before. – CopsOnRoad Nov 29 '21 at 17:30

Liar · Answer 10 · 2020-11-23T12:19:52.243

4

If you dont want to use app bar, then

appBar: AppBar(
      elevation: 0,
      backgroundColor: Colors.white, # status bar color
      toolbarHeight: 0,
      brightness: Brightness.light # or Brightness.dark

edited Nov 23 '20 at 12:19

answered Nov 23 '20 at 12:08

Liar

1,235
1
9
19

score 3 · Answer 11 · edited Sep 13 '18 at 00:51

Widget build(BuildContext context) {

    return new Scaffold(
        body: new Container(
            color: UniQueryColors.colorBackground,

    /* Wrapping ListView.builder with MediaQuery.removePadding() removes the default padding of the ListView.builder() and the status bar takes the color of the app background */

        child: MediaQuery.removePadding(
         removeTop: true,
         context: context,
        child: ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
      ),
    );
}

score 3 · Answer 12 · answered Aug 17 '20 at 19:03

Use the following in your main function to change the status bar color for all the views/screens. This will work even without an app bar.

WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
  statusBarIconBrightness: Brightness.dark, // this will change the brightness of the icons
  statusBarColor: Colors.white, // or any color you want
));

score 3 · Answer 13 · answered Nov 10 '22 at 11:55

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: const SystemUiOverlayStyle(
      statusBarColor: Colors.green, // Color of you choice
      statusBarIconBrightness: Brightness.light,
    ),
    child: Scaffold(
      body: SafeArea(child: Text("Center Text")),
    ),
  );
}

score 2 · Answer 14 · answered Apr 05 '19 at 01:26

Use EmptyAppBar, with some code for restoring color as in AppBar.

class EmptyAppBar  extends StatelessWidget implements PreferredSizeWidget {
  static const double _defaultElevation = 4.0;
  @override
  Widget build(BuildContext context) {
    final ThemeData themeData = Theme.of(context);
    final AppBarTheme appBarTheme = AppBarTheme.of(context);
    final Brightness brightness = appBarTheme.brightness
        ?? themeData.primaryColorBrightness;
    final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
        ? SystemUiOverlayStyle.light
        : SystemUiOverlayStyle.dark;

    return Semantics(
      container: true,
      child: AnnotatedRegion<SystemUiOverlayStyle>(
        value: overlayStyle,
        child: Material(
          color: appBarTheme.color
              ?? themeData.primaryColor,
          elevation: appBarTheme.elevation
              ?? _defaultElevation,
          child: Semantics(
            explicitChildNodes: true,
            child: Container(),
          ),
        ),
      ),
    );
  }
  @override
  Size get preferredSize => Size(0.0,0.0);
}

score 1 · Answer 15 · answered Jan 28 '20 at 16:48

1

this best status bar like default material design theme without AppBar()

 Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Theme.of(context).accentColor)

answered Jan 28 '20 at 16:48

Kiax

679
6
9

1

This is just perfect answer and helped me a lot. Each view can have different statusbar colors and we don't need to worry why some specific view uses color, while it isn't needed. – Andris Jul 20 '20 at 13:43

score 1 · Answer 16 · answered Nov 03 '22 at 13:32

If you are implementing dark and light theme, it can be tricky and you don't want the app bar, here is a work around i implemented

appBar: AppBar(
        toolbarHeight: 0.0,
        elevation: 0.0,
      ),

Implement an empty appBar, and on your ThemeData implement like below, remember to state AppBar background color

theme: ThemeData(
        fontFamily: GoogleFonts.poppins().fontFamily,
        brightness: Brightness.light,
        scaffoldBackgroundColor: const Color.fromARGB(255, 226, 226, 226),
        appBarTheme: const AppBarTheme(
          backgroundColor: Color.fromARGB(255, 226, 226, 226),
        ),
        colorScheme: const ColorScheme(
          background: Color.fromARGB(255, 226, 226, 226),
          onBackground: Color.fromARGB(255, 217, 217, 217),
          brightness: Brightness.light,
          primary: Color.fromARGB(255, 0, 166, 133),
          onPrimary: Color.fromARGB(255, 248, 248, 248),
          secondary: Color.fromARGB(255, 100, 157, 0),
          onSecondary: Colors.white,
          error: Color.fromARGB(255, 255, 255, 255),
          onError: Color.fromARGB(255, 255, 0, 0),
          surface: Color.fromARGB(255, 222, 222, 222),
          onSurface: Color.fromARGB(255, 0, 0, 0),
          onSurfaceVariant: Color.fromARGB(255, 215, 215, 215),
          surfaceVariant: Color.fromARGB(255, 241, 241, 241),
          outline: Color.fromARGB(255, 122, 122, 122),
          tertiary: Color.fromARGB(255, 214, 161, 0)
        )
      ),
      darkTheme: ThemeData(
        fontFamily: GoogleFonts.tajawal().fontFamily,
        brightness: Brightness.dark,
        scaffoldBackgroundColor: const Color.fromARGB(255, 18, 18, 18),
          appBarTheme: const AppBarTheme(
            backgroundColor: Color.fromARGB(255, 18, 18, 18),
          ),
        colorScheme: const ColorScheme(
          background: Color.fromARGB(255, 18, 18, 18),
          onBackground: Color.fromARGB(255, 49, 49, 49),
          brightness: Brightness.dark,
          primary: Color.fromARGB(255, 1, 255, 204),
          onPrimary: Colors.black,
          secondary: Color.fromARGB(255, 178, 255, 44),
          onSecondary: Colors.white,
          error: Color.fromARGB(255, 255, 255, 255),
          onError: Color.fromARGB(255, 255, 0, 0),
          surface: Color.fromARGB(255, 37, 37, 37),
          onSurface: Colors.white,
          onSurfaceVariant: Color.fromARGB(255, 55, 55, 55),
          surfaceVariant: Color.fromARGB(255, 34, 34, 34),
          outline: Color.fromARGB(255, 158, 158, 158),
          tertiary: Colors.amber
        )
      ),
      themeMode: ThemeMode.light,

score 0 · Answer 17 · answered Jul 02 '19 at 21:34

0

Simply add this to your build function, or main function.

import 'package:flutter/services.dart';

Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  ...
}

answered Jul 02 '19 at 21:34

vinibrsl

6,563
4
31
44

score 0 · Answer 18 · answered Aug 13 '20 at 15:14

you just have to add this if you want to use as default template in the MaterialApp Theme :

appBarTheme: AppBarTheme(brightness: Brightness.light)

Result will be like this :

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        appBarTheme: AppBarTheme(brightness: Brightness.light),  <========
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ...,
    );

score 0 · Answer 19 · answered Sep 06 '22 at 11:48

0

After trying many methods, I found below method here.

If you are using SafeArea use this method:

Scaffold(
 body: Container(
    color: Colors.white, // your desire status bar color
    child: SafeArea(child: CHILD),
  ),
);

answered Sep 06 '22 at 11:48

M Karimi

1,991
1
17
34

score -1 · Answer 20 · answered Jul 22 '21 at 17:34

You can use SystemUiOverlayStyle

 Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
              backgroundColor: Colors.white,
              elevation: 0.0,
              systemOverlayStyle: SystemUiOverlayStyle(
                statusBarColor: Colors.white,
                statusBarBrightness: Brightness.dark,
                statusBarIconBrightness: Brightness.dark,
              )),
          body:.....

this is not working anymore properly – petras J Nov 29 '21 at 12:48 — petras J, Nov 29 '21 at 12:48

score -2 · Answer 21 · edited Dec 18 '20 at 09:12

Here You can use flutter flutter_statusbar_manager 1.0.2 lib

Flutter Statusbar Manager, lets you control the status bar color, style (theme), visibility, and translucent properties across iOS and Android. With some added bonus for Android to control the Navigation Bar.

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';

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

class MyApp extends StatefulWidget {
  MyApp();

  factory MyApp.forDesignTime() {
    // TODO: add arguments
    return new MyApp();
  }

  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _statusBarHeight = 0.0;
  bool _statusBarColorAnimated = false;
  Color _statusBarColor = Colors.black;
  double _statusBarOpacity = 1.0;
  bool _statusBarHidden = false;
  StatusBarAnimation _statusBarAnimation = StatusBarAnimation.NONE;
  StatusBarStyle _statusBarStyle = StatusBarStyle.DEFAULT;
  bool _statusBarTranslucent = false;
  bool _loadingIndicator = false;
  bool _fullscreenMode = false;

  bool _navBarColorAnimated = false;
  Color _navBarColor = Colors.black;
  NavigationBarStyle _navBarStyle = NavigationBarStyle.DEFAULT;

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    double statusBarHeight;
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      statusBarHeight = await FlutterStatusbarManager.getHeight;
    } on PlatformException {
      statusBarHeight = 0.0;
    }
    if (!mounted) return;

    setState(() {
      _statusBarHeight = statusBarHeight;
    });
  }

  Widget renderTitle(String text) {
    final textStyle = TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold);
    return Text(text, style: textStyle);
  }

  void colorBarChanged(Color val) {
    this.setState(() {
      _statusBarColor = val;
    });
    updateStatusBar();
  }

  void updateStatusBar() {
    FlutterStatusbarManager.setColor(
        _statusBarColor.withOpacity(_statusBarOpacity),
        animated: _statusBarColorAnimated);
  }

  void statusBarAnimationChanged(StatusBarAnimation val) {
    this.setState(() {
      _statusBarAnimation = val;
    });
  }

  void statusBarStyleChanged(StatusBarStyle val) {
    this.setState(() {
      _statusBarStyle = val;
    });
    FlutterStatusbarManager.setStyle(val);
  }

  void colorNavBarChanged(Color val) {
    this.setState(() {
      _navBarColor = val;
    });
    updateNavBar();
  }

  void updateNavBar() {
    FlutterStatusbarManager.setNavigationBarColor(_navBarColor,
        animated: _navBarColorAnimated);
  }

  void navigationBarStyleChanged(NavigationBarStyle val) {
    this.setState(() {
      _navBarStyle = val;
    });
    FlutterStatusbarManager.setNavigationBarStyle(val);
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Statusbar Manager example'),
        ),
        body: new Container(
          child: new Scrollbar(
            child: new ListView(
              padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 20.0),
              children: <Widget>[
                renderTitle("Status Bar Height: $_statusBarHeight"),
                Divider(height: 25.0),
                renderTitle("Status Bar Color:"),
                SwitchListTile(
                  value: _statusBarColorAnimated,
                  title: new Text("Animated:"),
                  onChanged: (bool value) {
                    this.setState(() {
                      _statusBarColorAnimated = value;
                    });
                  },
                ),
                Text("Color:"),
                RadioListTile(
                    value: Colors.black,
                    title: Text("Black"),
                    onChanged: colorBarChanged,
                    dense: true,
                    groupValue: _statusBarColor),
                RadioListTile(
                    value: Colors.orange,
                    title: Text("Orange"),
                    onChanged: colorBarChanged,
                    dense: true,
                    groupValue: _statusBarColor),
                RadioListTile(
                    value: Colors.greenAccent,
                    title: Text("Green"),
                    onChanged: colorBarChanged,
                    dense: true,
                    groupValue: _statusBarColor),
                RadioListTile(
                    value: Colors.white30,
                    title: Text("White"),
                    onChanged: colorBarChanged,
                    dense: true,
                    groupValue: _statusBarColor),
                Text("Opacity:"),
                Slider(
                  value: _statusBarOpacity,
                  min: 0.0,
                  max: 1.0,
                  onChanged: (double val) {
                    this.setState(() {
                      _statusBarOpacity = val;
                    });
                    updateStatusBar();
                  },
                ),
                Divider(height: 25.0),
                renderTitle("Status Bar Hidden:"),
                SwitchListTile(
                  title: new Text("Hidden:"),
                  value: _statusBarHidden,
                  onChanged: (bool val) {
                    this.setState(() {
                      _statusBarHidden = val;
                    });
                    FlutterStatusbarManager.setHidden(_statusBarHidden,
                        animation: _statusBarAnimation);
                  },
                ),
                Text("Animation:"),
                RadioListTile(
                    value: StatusBarAnimation.NONE,
                    title: Text("NONE"),
                    onChanged: statusBarAnimationChanged,
                    dense: true,
                    groupValue: _statusBarAnimation),
                RadioListTile(
                    value: StatusBarAnimation.FADE,
                    title: Text("FADE"),
                    onChanged: statusBarAnimationChanged,
                    dense: true,
                    groupValue: _statusBarAnimation),
                RadioListTile(
                    value: StatusBarAnimation.SLIDE,
                    title: Text("SLIDE"),
                    onChanged: statusBarAnimationChanged,
                    dense: true,
                    groupValue: _statusBarAnimation),
                Divider(height: 25.0),
                renderTitle("Status Bar Style:"),
                RadioListTile(
                    value: StatusBarStyle.DEFAULT,
                    title: Text("DEFAULT"),
                    onChanged: statusBarStyleChanged,
                    dense: true,
                    groupValue: _statusBarStyle),
                RadioListTile(
                    value: StatusBarStyle.LIGHT_CONTENT,
                    title: Text("LIGHT_CONTENT"),
                    onChanged: statusBarStyleChanged,
                    dense: true,
                    groupValue: _statusBarStyle),
                RadioListTile(
                    value: StatusBarStyle.DARK_CONTENT,
                    title: Text("DARK_CONTENT"),
                    onChanged: statusBarStyleChanged,
                    dense: true,
                    groupValue: _statusBarStyle),
                Divider(height: 25.0),
                renderTitle("Status Bar Translucent:"),
                SwitchListTile(
                  title: new Text("Translucent:"),
                  value: _statusBarTranslucent,
                  onChanged: (bool val) {
                    this.setState(() {
                      _statusBarTranslucent = val;
                    });
                    FlutterStatusbarManager
                        .setTranslucent(_statusBarTranslucent);
                  },
                ),
                Divider(height: 25.0),
                renderTitle("Status Bar Activity Indicator:"),
                SwitchListTile(
                  title: new Text("Indicator:"),
                  value: _loadingIndicator,
                  onChanged: (bool val) {
                    this.setState(() {
                      _loadingIndicator = val;
                    });
                    FlutterStatusbarManager
                        .setNetworkActivityIndicatorVisible(_loadingIndicator);
                  },
                ),
                Divider(height: 25.0),
                renderTitle("Navigation Bar Color:"),
                SwitchListTile(
                  value: _navBarColorAnimated,
                  title: new Text("Animated:"),
                  onChanged: (bool value) {
                    this.setState(() {
                      _navBarColorAnimated = value;
                    });
                  },
                ),
                Text("Color:"),
                RadioListTile(
                    value: Colors.black,
                    title: Text("Black"),
                    onChanged: colorNavBarChanged,
                    dense: true,
                    groupValue: _navBarColor),
                RadioListTile(
                    value: Colors.orange,
                    title: Text("Orange"),
                    onChanged: colorNavBarChanged,
                    dense: true,
                    groupValue: _navBarColor),
                RadioListTile(
                    value: Colors.greenAccent,
                    title: Text("Green"),
                    onChanged: colorNavBarChanged,
                    dense: true,
                    groupValue: _navBarColor),
                RadioListTile(
                    value: Colors.white12,
                    title: Text("white"),
                    onChanged: colorNavBarChanged,
                    dense: true,
                    groupValue: _navBarColor),
                Divider(height: 25.0),
                renderTitle("Navigation Bar Style:"),
                RadioListTile(
                    value: NavigationBarStyle.DEFAULT,
                    title: Text("DEFAULT"),
                    onChanged: navigationBarStyleChanged,
                    dense: true,
                    groupValue: _navBarStyle),
                RadioListTile(
                    value: NavigationBarStyle.LIGHT,
                    title: Text("LIGHT"),
                    onChanged: navigationBarStyleChanged,
                    dense: true,
                    groupValue: _navBarStyle),
                RadioListTile(
                    value: NavigationBarStyle.DARK,
                    title: Text("DARK"),
                    onChanged: navigationBarStyleChanged,
                    dense: true,
                    groupValue: _navBarStyle),
                Divider(height: 25.0),
                renderTitle("Fullscreen mode:"),
                SwitchListTile(
                  title: new Text("Fullscreen:"),
                  value: _fullscreenMode,
                  onChanged: (bool val) {
                    this.setState(() {
                      _fullscreenMode = val;
                    });
                    FlutterStatusbarManager.setFullscreen(_fullscreenMode);
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Flutter - How to set status bar color when AppBar not present

21 Answers21

Linked