Flutter Transparent Status Bar and Setting Method of Font Color

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(),),);
 }