我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
你可以这样做,
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.grey.withOpacity(0.5),
statusBarIconBrightness: Brightness.dark,
statusBarBrightness:
Platform.isAndroid ? Brightness.dark : Brightness.light,
systemNavigationBarColor: Colors.white,
systemNavigationBarDividerColor: Colors.grey,
systemNavigationBarIconBrightness: Brightness.dark,
),
);
将此代码添加到主程序中。省道构建方法,
其他回答
完整的示例
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: const SystemUiOverlayStyle(
systemNavigationBarColor: Colors.red, // navigation bar color
systemNavigationBarIconBrightness: Brightness.light, //navigation bar icons' color
),
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('data'),
systemOverlayStyle: SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.red,
statusBarIconBrightness: Brightness.light,
),
),
),
);
}
}
使它像你的应用程序栏颜色
import 'package:flutter/material.dart';
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
));
}
对于那些有iOS和Android颜色不一致的问题的人来说,这个方法对我来说很管用:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
return AppBar(
systemOverlayStyle: (Platform.isIOS)
? SystemUiOverlayStyle.light
: const SystemUiOverlayStyle(
statusBarColor: pbsBlue,
statusBarIconBrightness: Brightness.light,
statusBarBrightness: Brightness.light,
),
backgroundColor: Colors.blue,
title: Text('Home'),
);
请注意,这是AppBar可重用小部件的摘录。
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData(brightness: Brightness.dark),
child: Scaffold()
....
)
}
它可以通过两个步骤来实现:
使用FlutterStatusbarcolor包将状态栏颜色设置为与页面背景相匹配 使用AppBar设置状态栏按钮(电池,wifi等)的颜色。亮度的财产
如果你有一个AppBar:
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
// Other AppBar properties
),
body: Container()
);
}
如果你不想在页面中显示应用程序栏:
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
elevation: 0.0,
toolbarHeight: 0.0, // Hide the AppBar
),
body: Container()
}