Flutter Transparent Status Bar and Setting Method of Font Color
- 2021-12-04 11:12:56
- OfStack
Note: Whether the background color transparency is effective or not is related to the android version, and the low version setting is invalid
1. Set within main. dart
void main(){
runApp(new MyApp());
if (Platform.isAndroid) {
// Settings Android The navigation bar of the head is transparent
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: Colors.transparent, // Transparency of global settings
statusBarIconBrightness: Brightness.light
//light: Black icon dark White icon
// Set here statusBarIconBrightness For the global setting
);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
2. Single page setup
appBar: AppBar(
title: new Text(''),
elevation: 0,
brightness: Brightness.dark, // Set to white font
),
Note: After setting AppBar, setting this line of code in build alone will invalidate SystemChrome. setSystemUIOverlayStyle (SystemUiOverlayStyle. light);
ps: Let's take a look at Flutter to modify the status bar color and font color
Flutter Immersive Status Bar
void main() {
runApp(MyApp());
if (Platform.isAndroid) {
// The following two lines Settings android The status bar is transparent immersion. Written after the component is rendered, in order to perform after rendering set Assign values, override the status bar, and write before rendering MaterialApp Component overrides this value.
SystemUiOverlayStyle systemUiOverlayStyle =
SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
Flutter Modify the status bar font color
Wrapping Scaffold with AnnotatedRegion can change the color of status bar. There are two kinds of dark and light
@override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: Material(child:Scaffold(),),);
}