[英]Flutter: Change status bar color in iOS
I want to change status bar color with package:flutter/services.dart
package but it doesn't work.我想用package:flutter/services.dart
package 更改状态栏颜色,但它不起作用。 I am using Mac and iOS simulator:我正在使用 Mac 和 iOS 模拟器:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.red // <-- doesn't work
)
);
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
... // other stuff
Even if I put it in the main
function:即使我把它放在main
function中:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.red,
)
);
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
.then((_) => runApp(MyApp()));
}
... // the rest code here
As a result I get this if I want to change appBar
background color to white.因此,如果我想将appBar
背景颜色更改为白色,我会得到这个。
Haven't tested it for android yet.尚未针对 android 进行测试。 Is this issue related only to iOS simulator or so?此问题仅与 iOS 模拟器有关吗? How to fix it?如何解决?
UPD UPD
This issue starts to drive my nuts.这个问题开始让我发疯。
Edit:编辑:
appBar: AppBar(
elevation: 0,
brightness: Brightness.light, // this makes status bar text color black
backgroundColor: Colors.white,
)
Output: Output:
statusBarColor
can only be changed in Android and not in iOS, and probably Apple can reject your app if you try do so by some workarounds because they don't want you to have different AppBar
and status bar color. statusBarColor
只能在 Android 中更改,而不能在 iOS 中更改,如果您尝试通过一些变通方法这样做,Apple 可能会拒绝您的应用程序,因为他们不希望您有不同的AppBar
和状态栏颜色。
AppBar(backgroundColor: Colors.red) // this changes both AppBar and status bar color in iOS
Apple wants you to stick to their designs which is why changing statusBarColor
has no effect on iOS. Apple 希望您坚持他们的设计,这就是为什么更改statusBarColor
对 iOS 没有影响。
Try them:试试看:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.white, // this one for android
statusBarBrightness: Brightness.light// this one for iOS
));
Try this尝试这个
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backwardsCompatibility: false, "if set to false it doesn't use default app bar theme"
systemOverlayStyle: SystemUiOverlayStyle(statusBarColor:Colors.orange,"It change the color of status bar"
statusBarIconBrightness: Brightness.light "It change the color of status bar icons"),
)
);
}
All the answers with SystemUiOverlayStyle
weren't working in hot reload SystemUiOverlayStyle
的所有答案都不适用于热重载
Found this answer:找到了这个答案:
"... wrap the call of SystemChrome in a Future." “......在未来包装 SystemChrome 的调用。”
https://github.com/flutter/flutter/issues/65632#issuecomment-714535817 https://github.com/flutter/flutter/issues/65632#issuecomment-714535817
Where only the setting statusBarBrightness
seems to work in local iOS runtime:只有设置statusBarBrightness
似乎在本地 iOS 运行时有效:
Future.delayed(Duration(milliseconds: 1)).then(
(value) => SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarBrightness: Brightness.dark, // bar light == text dark
)));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.