How to change the status bar text color on Ios
Solution 1
@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.
Solution 2
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: ...,
),
);
}
Solution 3
For IOS and Android:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.white, // Color for Android
statusBarBrightness: Brightness.dark // Dark == white status bar -- for IOS.
));
Solution 4
@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,
),
);
}
}
Solution 5
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(),
);
}
Related videos on Youtube
![Antoine](https://lh5.googleusercontent.com/-PiVVZcxFwno/AAAAAAAAAAI/AAAAAAAAAAA/AAnnY7oyTGvb9QcAVdm7IknUzICrrubNXQ/mo/photo.jpg?sz=256)
Antoine
Updated on October 01, 2021Comments
-
Antoine almost 3 years
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
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, ), ], ),
-
scottstoll2017 almost 6 yearsTake a look to see if the SystemChrome class helps... also you can choose light or dark settings in X-code. docs.flutter.io/flutter/services/SystemChrome-class.html
-
-
vikzilla over 5 yearsIt should be noted that .dark will make the status bar text WHITE, while .light will make the status bar text BLACK. This confused me at first
-
GustavoIP over 5 years@vikzilla this should be included in the answer.
-
Chance over 4 yearsYour answer was the only one that really worked for where I have an animated SliverPersistenheader.
-
Ramtin over 4 yearsIt doesn't do anything for me
-
Banana droid about 4 yearsShould be using with ThemeData: ThemeData(appBarTheme: AppBarTheme(brightness: Brightness.light),)
-
Pratik Butani over 3 yearsWhere to write it?
-
Lucas Paz about 3 years@PratikButani Within the "build" function. Or you can use the widget called "AnnotatedRegion"
-
joelgate about 3 yearsI'm struggling with different status bar text colour on different screens, can you explain a bit more about how you got it to work please? I set the home to have black text, second screen to have white text and that works. But going back home retains the white text unfortunately.
-
テッド almost 3 yearsThis is the correct answer in 2021. Thanks.
SystemUiOverlayStyle.light
makes the status bar text and icons white, andSystemUiOverlayStyle.dark
makes them black. -
carlosobedgomez almost 3 years@PratikButani Inside the main function, where 'runApp' is.
-
Jay Tillu almost 3 yearsAfter flutter 2.5 brightness property of AppBar is deprecated.
-
Anoop Thiruonam over 2 yearsThis is depreciated now and does not work on iOS
-
ANDYNVT over 2 years
brightness
is deprecated. You should use:systemOverlayStyle: SystemUiOverlayStyle.dark,