Flutter更改狀態列顏色
阿新 • • 發佈:2020-08-24
在Flutter中,例如iOS的狀態列中的時間、網路訊號等字型的顏色修改有以下兩個方式:
在system_chrome.dart
檔案中有兩段程式碼,用來更改不同的狀態列字型顏色。
介紹
- 字型顏色白色
/// System overlays should be drawn with a light color. Intended for
/// applications with a dark background.
static const SystemUiOverlayStyle light = SystemUiOverlayStyle(
systemNavigationBarColor: Color(0xFF000000),
systemNavigationBarDividerColor: null,
statusBarColor: null,
systemNavigationBarIconBrightness: Brightness.light,
statusBarIconBrightness: Brightness.light,
statusBarBrightness: Brightness.dark,
);
- 字型顏色黑色
/// System overlays should be drawn with a dark color. Intended for
/// applications with a light background.
static const SystemUiOverlayStyle dark = SystemUiOverlayStyle(
systemNavigationBarColor: Color(0xFF000000),
systemNavigationBarDividerColor: null,
statusBarColor: null,
systemNavigationBarIconBrightness: Brightness.light,
statusBarIconBrightness: Brightness.dark,
statusBarBrightness: Brightness.light,
);
使用
白色
void main() {
runApp(MyApp());
//白色
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
backgroundColor: Colors.blue,
body: Container(),
),
);
}
}
image.png
黑色
void main() {
runApp(MyApp());
//黑色
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
backgroundColor: Colors.white,
body: Container(),
),
);
}
}
黑色
Flutter 豆瓣客戶端,誠心開源
Flutter Container
Flutter SafeArea
Flutter Row Column MainAxisAlignment Expanded
Flutter Image全解析
Flutter 常用按鈕總結
Flutter ListView豆瓣電影排行榜
Flutter Card
Flutter Navigator&Router(導航與路由)
OverscrollNotification不起效果引起的Flutter感悟分享
Flutter 上拉抽屜實現
Flutter 豆瓣客戶端,誠心開源
Flutter 更改狀態列顏色
作者:徐愛卿
連結:https://www.jianshu.com/p/9409845d8794
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。