我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
我不能直接在帖子中评论,因为我还没有必要的声誉,但作者问了以下问题:
唯一的问题是背景是白色的,但时钟,无线和其他文本和图标也是白色的。我不知道为什么!!
对于任何来到这个帖子的人来说,这是对我有用的方法。状态栏的文本颜色由flutter/material.dart中的亮度常数决定。要改变这一点,调整SystemChrome解决方案,如下所示来配置文本:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.red,
statusBarBrightness: Brightness.dark,
));
亮度的可能值为亮度。黑暗和光明。
文档: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html
其他回答
这(在脚手架内部)创建了一个带有浅色内容的黑色状态栏。(没有Appbar)
appBar: AppBar(
toolbarHeight: 0,
backgroundColor: Colors.black,
systemOverlayStyle: SystemUiOverlayStyle.light,
),
使用AnnotatedRegion是最适合我的,特别是如果我没有AppBar
import 'package:flutter/services.dart';
...
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: ...,
),
);
}
你可以改变它没有appbar给脚手架(backgroundColor: color);如果你把身体包裹起来,问题可能就解决了。我的意思是这个解决方案不是实践,但如果你不使用appbar,你可以用这种方式实现。
对于那些有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可重用小部件的摘录。
使用这种方法使你的状态栏完全白色的状态栏图标, 我个人使用它!在android上测试工作很好!
import 'package:FileSharing/bodypage.dart';
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) {
return MaterialApp(
debugShowCheckedModeBanner: false,
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,
appBarTheme: AppBarTheme(
color: Colors.white,
elevation: 0,
brightness: Brightness.light,
centerTitle: true,
iconTheme: IconThemeData(
color: Colors.black,
),
textTheme: TextTheme(),
)
// This makes the visual density adapt to the platform that you run
// the app on. For desktop platforms, the controls will be smaller and
// closer together (more dense) than on mobile platforms.
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
));
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
actions: [
Container(
width: 63,
padding: EdgeInsets.only(right: 30),
child: FloatingActionButton(
onPressed: null,
backgroundColor: Colors.pink,
elevation: 8,
child: Icon(Icons.person_pin),
),
)
],
),
);
}
}