CODEWITHSUNDEEP
flutter
Antoine
Antoine

Reputation: 1225

How to change the status bar text color on Ios

I am new to all this flutter thing. I searched everywhere to find a solution for this little problem. Is there a way to change the status bar color? Also when i use the a color like colors.blue i can see that the quality of the text in the status bar isn't good.

Thanks

enter image description here

appBar: AppBar(
    elevation : 0.0,
    leading: IconButton(
      icon: Icon(Icons.menu),
      tooltip: 'Navigation menu',
      onPressed: null,
    ),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.search),
        tooltip: 'Search',
        onPressed: null,
      ),
    ],
  ),

Upvotes: 97

Views: 75926

Answers (10)

Duy Tran
Duy Tran

Reputation: 1114

In case you have multiple styles depending on the design of each page, eg: page1 is black text -> navigate to page 2 is white text

Wrap setSystemUIOverlayStyle method inside addPostFrameCallback to make sure the code effect

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(...),
    );
  });
}

Upvotes: 0

Allan Ho
Allan Ho

Reputation: 1473

Edit after Flutter 2.5:

brightness is no longer used, please use systemOverlayStyle instead.

appBar: new AppBar(
      title: new Text(widget.title),
      systemOverlayStyle: SystemUiOverlayStyle.dark // or use SystemUiOverlayStyle.light
    ),

Old answer:

@Antoine Basically you can set your theme Brightness, or you can manually override the appbar brightness using the following :

appBar: new AppBar(
  title: new Text(widget.title),
  brightness: Brightness.light, // or use Brightness.dark
),

Do note that this will only switch between white and black status text color.

.dark will make the status bar text WHITE, while .light will make the status bar text BLACK.

Maybe for a more custom color, like the comment said you can view SystemChrome class.

Upvotes: 137

Hue Ngo
Hue Ngo

Reputation: 49

We can make the status bar dark:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

or light:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

Upvotes: 3

Arsen Tatraev
Arsen Tatraev

Reputation: 788

Answer for android too.

Call this if you need black text in the status bar:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
   statusBarColor: Colors.transparent, // optional
));

and call this if you need white text in the status bar:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
   statusBarColor: Colors.transparent, // optional
));

because statusBarBrightness parametr works just on iOS

Upvotes: 7

Michael Kjellander
Michael Kjellander

Reputation: 339

I was having trouble having different status bar colors for different screens. I am using slivers and the brightness (which affects status bar color) can be set the same way in SliverAppBars as in normal AppBars.

SliverAppBar(
  brightness: Brightness.light, //or Brightness.dark
  //...
);

SliverAppBar's brightness, if null, defaults to AppBarTheme.brightness, ThemeData.appBarTheme or ThemeData.primaryColorBrightness in that order if any of them are null.

Example for setting AppBarTheme.brightness:

MaterialApp(
  //...
  theme: ThemeData(
    appBarTheme: AppBarTheme(brightness: Brightness.dark),
  ),
  //...
);

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 267404

Don't use AnnotatedRegion

Apps should not enclose an AppBar with their own [AnnotatedRegion].

You should rather use:

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

Upvotes: 7

Sandeep Maurya
Sandeep Maurya

Reputation: 2099

AnnotatedRegion helps you change status bar text color on iOS.

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

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

But if you have AppBar in Scaffold then only AnnotatedRegion won't work. Here is solution.

  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark, // play with this
      child: Scaffold(
        appBar: AppBar(
          brightness: Brightness.light, // play with this
        ),
        body: Container(),
     );
  }

Upvotes: 10

Lucas Paz
Lucas Paz

Reputation: 815

For IOS and Android:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
   statusBarColor: Colors.white, // Color for Android
   statusBarBrightness: Brightness.dark // Dark == white status bar -- for IOS.
));

Upvotes: 62

Yugene
Yugene

Reputation: 3222

When I don't use AppBar, the colour can be changed using AnnotatedRegion.

import 'package:flutter/services.dart';

...    

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

Upvotes: 83

Victor
Victor

Reputation: 61

@Antoine this problem was a headache for me. I used the statusbarColor plugin https://pub.dartlang.org/packages/flutter_statusbarcolor to change the status bar color to black. I then set the appbar brightness to dark because it was a dark background.

import 'package:flutter/material.dart';
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
import 'package:flutter/services.dart';

void main() async{

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


  runApp(MaterialApp(
    title: 'Using Keys',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      primaryColor: Colors.white

    ),
    home: InputBox(),
  ));
}

class InputBox extends StatefulWidget {
  @override
  _InputBoxState createState() => _InputBoxState();
}

class _InputBoxState extends State<InputBox> {
  bool loggedIn = false;
  String _email, _username, _password;

  final scaffoldKey = GlobalKey<ScaffoldState>();     //a key for the state of the scaffold
  final formKey = GlobalKey<FormState>();             //a key for the state of the form

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        //backgroundColor: Colors.white,
        centerTitle: false,
        brightness: Brightness.dark,
        title: Text("Using Keys",
            style: TextStyle(
              fontSize: 24.0,
            )),
        elevation: 4.0,
      ),
    );
  }
}

Upvotes: 6

Related Questions