CODEWITHSUNDEEP
dartflutter
Hossein
Hossein

Reputation: 847

Flutter change status bar brightness to dark

I tried several ways to make status bar icons dark, but after home press and returning to app status bar icons are white! it seems that its flutter bug.

but in iOS it works fine.

i tried these ways :

android app style:

<item name="android:windowLightStatusBar">false</item>

AppBar brightness:

brightness: Brightness.dark

Flutter API:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
        statusBarIconBrightness: Brightness.dark
    ));

flutter_statusbarcolor package :

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

FlutterStatusbarcolor.setStatusBarWhiteForeground(false);

Upvotes: 11

Views: 15728

Answers (7)

Walied Abdulaziem
Walied Abdulaziem

Reputation: 399

Use:-

systemOverlayStyle: SystemUiOverlayStyle.dark,

instead of:

brightness: Brightness.dark,

Upvotes: 0

Ema
Ema

Reputation: 151

Apply for all appBar use

return MaterialApp(
        theme: ThemeData(
            appBarTheme: Theme.of(context)
                .appBarTheme
                .copyWith(systemOverlayStyle: SystemUiOverlayStyle.dark)),
        debugShowCheckedModeBanner: false,
        home: widget());

I hope it works.

Upvotes: 0

Kenneth Murerwa
Kenneth Murerwa

Reputation: 888

As of Flutter 2.4.*, AppBar brightness is deprecated. To achieve status bar brightness, add a systemOverlayStyle to your AppBar as I have highlighted below.

appBar: AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarBrightness: Brightness.dark
  ),
)

If you wish to apply dark status bar icons on the entire app, add an appBarTheme to your MaterialApp theme as shown in the following code. Your MaterialApp widget is on the main.dart file;

MaterialApp(
  ...
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarBrightness: Brightness.dark
      ),
    ),
  )
)

Upvotes: 8

tstrmn
tstrmn

Reputation: 351

If you want to change the theme for the app as a whole, I would recommend this answer to a similar problem: https://stackoverflow.com/a/62607827/15605135

If you want to change a single AppBar, you could try to use the systemOverlayStyle property:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark,
      ),
    );
  }

Upvotes: 1

ozone wagle
ozone wagle

Reputation: 17

Wrap your widget with SafeArea and include brightness in your appBar and it will work.

  void main()
{
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.deepPurple,
  statusBarBrightness: Brightness.dark,
  ));
  runApp(MyApp());
}
    return SafeArea(child: Scaffold(
      appBar: AppBar(
          toolbarHeight: 50,
          centerTitle: true,
          brightness: Brightness.dark,
          backgroundColor: Colors.deepPurple,
          child: Text("Your Text"),),

Upvotes: 0

Ainius
Ainius

Reputation: 376

Add following into your widget tree:

AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.dark,
    child: ...
)

Upvotes: 21

Hasitha
Hasitha

Reputation: 51

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

This is only working when there is no appbar. If there is an app bar, this will not work. So you will have to change the brightness of appbar first.

appBar: new AppBar(
        brightness: Brightness.light, // Add this line
      ),

Upvotes: 4

Related Questions