我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
使用这种方法使你的状态栏完全白色的状态栏图标, 我个人使用它!在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),
),
)
],
),
);
}
}
其他回答
这个也可以
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
更新Flutter 2.0(推荐):
在最新的Flutter版本上,您应该使用:
AppBar(
systemOverlayStyle: SystemUiOverlayStyle(
// Status bar color
statusBarColor: Colors.red,
// Status bar brightness (optional)
statusBarIconBrightness: Brightness.dark, // For Android (dark icons)
statusBarBrightness: Brightness.light, // For iOS (dark icons)
),
)
只有Android(更灵活):
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}
iOS和Android:
appBar: AppBar(
backgroundColor: Colors.red, // Status bar color
)
这有点老套,但适用于iOS和Android:
Container(
color: Colors.red, // Status bar color
child: SafeArea(
left: false,
right: false,
bottom: false,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue, // App bar color
),
),
),
)
我通过改变整个背景颜色来解决这个问题,如下所示:
在主界面:
return Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
),
);
从Flutter 2.5.0
AppBar中的亮度属性已弃用
我们需要使用systemOverlayStyle属性
例如,如果您正在使用AppBar
AppBar(
title: Text("Title"),
systemOverlayStyle: SystemUiOverlayStyle.dark) //for dark color
完整的示例
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,
),
),
),
);
}
}