我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
在主要的。飞镖文件 导入服务如下
import 'package:flutter/services.dart';
在build方法中,在返回之前添加这一行
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.orange
));
是这样的:
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: CustomColors.appbarcolor
));
return MaterialApp(
home: MySplash(),
theme: ThemeData(
brightness: Brightness.light,
primaryColor: CustomColors.appbarcolor,
),
);
}
其他回答
以下是你需要知道的一切:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.amber, // navigation bar color
statusBarColor: Colors.white, // status bar color
statusBarIconBrightness: Brightness.dark, // status bar icon color
systemNavigationBarIconBrightness: Brightness.dark, // color of navigation controls
));
runApp(MyApp());
}
当您不使用AppBar时,更改状态栏的颜色
首先导入这个
import 'package:flutter/services.dart';
现在使用下面的代码改变状态栏的颜色在你的应用程序,当你不使用AppBar
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
statusBarColor: AppColors.statusBarColor,/* set Status bar color in Android devices. */
statusBarIconBrightness: Brightness.dark,/* set Status bar icons color in Android devices.*/
statusBarBrightness: Brightness.dark)/* set Status bar icon color in iOS. */
);
在iOS中使用安全区域时,更改状态栏的颜色
Scaffold(
body: Container(
color: Colors.red, /* Set your status bar color here */
child: SafeArea(child: Container(
/* Add your Widget here */
)),
),
);
对我有用的方法(适用于那些不用AppBar的人)
添加AppbBar首选颜色,然后设置:toolbarHeight: 0
child: Scaffold(
appBar: AppBar(
toolbarHeight: 0,
backgroundColor: Colors.blue,
brightness: Brightness.light,
)
大多数答案都是使用只适用于安卓系统的SystemChrome。我的解决方案是将AnnotatedRegion和SafeArea合并到新的小部件中,这样它也可以在iOS中工作。我可以在没有AppBar的情况下使用它。
class ColoredStatusBar extends StatelessWidget {
const ColoredStatusBar({
Key key,
this.color,
this.child,
this.brightness = Brightness.dark,
}) : super(key: key);
final Color color;
final Widget child;
final Brightness brightness;
@override
Widget build(BuildContext context) {
final defaultColor = Colors.blue;
final androidIconBrightness =
brightness == Brightness.dark ? Brightness.light : Brightness.dark;
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: color ?? defaultColor,
statusBarIconBrightness: androidIconBrightness,
statusBarBrightness: brightness,
),
child: Container(
color: color ?? defaultColor,
child: SafeArea(
bottom: false,
child: Container(
child: child,
),
),
),
);
}
}
用法:把它放在页面小部件的顶部。
@override
Widget build(BuildContext context) {
return ColoredStatusBar(
child: /* your child here */,
);
}
在我的应用程序中完全正常
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
return MaterialApp(
title: app_title,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(title: home_title),
);
}
}
(包)
乌利希期刊指南: 推荐解决方案(Flutter 2.0及以上)
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white
));