我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
对我有用的方法(适用于那些不用AppBar的人)
添加AppbBar首选颜色,然后设置:toolbarHeight: 0
child: Scaffold(
appBar: AppBar(
toolbarHeight: 0,
backgroundColor: Colors.blue,
brightness: Brightness.light,
)
其他回答
对于那些有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可重用小部件的摘录。
最新的解决方案。Flutter 2.0及以上
对于使用AppBar的用户:
/// WORKS on the screen where appBar is used
Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle(
// statusBarColor: Colors.red, // You can use this as well
statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
),
),
),
对于那些不使用AppBar的人:
将下面的代码放在根屏幕的构建功能上,以影响下面的所有屏幕:
void main() {
runApp(MyApp());
}
// This widget is the root of your application.
class MyApp extends StatelessWidget {
/// WORKS on every screen EXCEPT the screen in which appBar is used
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
// statusBarColor: Colors.red, // You can use this as well
statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
),
);
@override
Widget build(BuildContext context) {}
}
将下面的代码放在单个屏幕的构建功能上,只影响该屏幕:
class SingleScreen extends StatelessWidget {
/// WORKS on a single screen where appBar is NOT used
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
// statusBarColor: Colors.red, // You can use this as well
statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
),
);
@override
Widget build(BuildContext context) {}
}
完整的示例
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,
),
),
),
);
}
}
这招对我很管用:
进口服务
导入的包:颤振/ services.dart ';
然后添加:
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarBrightness: Brightness.dark,
));
return MaterialApp(home: Scaffold(
在我的应用程序中完全正常
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
));