flutter設置主題色和狀態欄顏色

前言

在App設計中狀態欄純色的這種設計很常見，但是如果狀態欄需要為白色的時候就必須為黑色字體。在Android中已經有很多成熟的方案來處理這種情況，那我們現在看看在Flutter中這種情況該怎么處理。

具體設置

1、設置主題色

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.red, primaryColor: Colors.white), //設置App主題 home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } 

這里的ThemeData即為控制App的主題，primarySwatch設置即可控制主題的各類顏色，但是這里的顏色是需要MaterialColor，但是純色種的黑色和白色不是MaterialColor。所以不能設置primarySwatch為Colors.white。
注：MaterialColor包含以下這些

• red,
• pink,
• purple,
• deepPurple,
• indigo,
• blue,
• lightBlue,
• cyan,
• teal,
• green,
• lightGreen,
• lime,
• yellow,
• amber,
• orange,
• deepOrange,
• brown,
• blueGrey,

那么就只能使用其他方式設置主題為白色。即為設置

primaryColor: Colors.white 

此時我們可以看到App的狀態欄如下所示（Android）

 

2.jpg

2、設置狀態欄

雖然AppBar變成了白色，但是狀態欄是灰色顯然不是我們想要的。
嘗試設置文字顏色，AppBar的Brightness有兩種模式light和dark

appBar: PreferredSize( child: AppBar( brightness: Brightness.dark, title: Center( child: Text( "FlutterDemo", ), ), ), preferredSize: Size(double.infinity, 60) ), 

這個和SystemUiOverlayStyle的light和dark剛好相反

final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark ? SystemUiOverlayStyle.light : SystemUiOverlayStyle.dark; 

然后設置狀態欄顏色

import 'dart:io'; import 'package:flutter/services.dart'; void main() { runApp(MyApp()); if (Platform.isAndroid) { SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle( statusBarColor: Colors.red, // statusBarBrightness: Brightness.light, // statusBarIconBrightness: Brightness.dark ); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); print("systemUiOverlayStyle"); } } 

設置為紅色之后，得到以下的樣式，可以看到狀態欄為紅色了，文字為白色

 

3.jpg

那么接下來我們只需要將狀態欄設置為白色或者透明，狀態欄文字設置為黑色。

void main() { runApp(MyApp()); if (Platform.isAndroid) { SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle( statusBarColor: Colors.transparent, //設置為透明 ); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); } } 

最后得到以下視圖

 

1.jpg

3、推薦AppBar的使用方式

注：使用PreferredSize包裹，可以更得心應手哦！

// appBar: PreferredSize( // child: Container( // width: double.infinity, // height: double.infinity, // decoration: BoxDecoration(color: Colors.white, boxShadow: [ // BoxShadow(color: Color.fromRGBO(0, 0, 0, 0.2), blurRadius: 10.0) // ]), // child: SafeArea( // child: Center( // child: Text("FlutterDemo",style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),), // )), // ), // preferredSize: Size(double.infinity, 60)), appBar: PreferredSize( child: AppBar( backgroundColor: Colors.white, brightness: Brightness.light, title: Center( child: Text( "FlutterDemo", ), ), ), preferredSize: Size(double.infinity, 60)), 

4、其他注意事項

SystemUiOverlayStyle在設置時其實有很多系統或者版本的限制

  /// The color of top status bar. /// /// Only honored in Android version M and greater. final Color statusBarColor; //設置狀態欄顏色，只在Android的M版本以上生效 /// The brightness of top status bar. /// /// Only honored in iOS. final Brightness statusBarBrightness; //狀態欄亮度，只在IOS生效，只有light和dart模式 /// The brightness of the top status bar icons. /// /// Only honored in Android version M and greater. final Brightness statusBarIconBrightness; //狀態欄Icon亮度，只在Android的M版本以上生效，只有light和dart模式，和AppBar的brightness相反 

其他相關參考

[Flutter]使用主題
flutter設置沉浸式狀態欄

完整代碼

https://github.com/leiyun1993/FlutterDemo-GankIO）

作者：Yun丶Lei
鏈接：https://www.jianshu.com/p/5cde325e6e05
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。