我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。


当前回答

在Flutter 2.8:

AppBar(
    backgroundColor: YOUR_COLOR_HERE,
    toolbarHeight: 0,
);

其他回答

@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}

使用这种方法使你的状态栏完全白色的状态栏图标, 我个人使用它!在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),
            ),
          )
        ],
      ),
    );
  }
}

我对所有提到的答案都有问题,除了我自己做的解决方案:容器(宽度:MediaQuery.of(context).size。MediaQuery.of(context).padding. width, height:上衣,颜色:颜色。绿色) 对于视图,哪里没有appBar添加我只是使用容器的背景,准确的高度匹配状态栏的高度。在这个场景中,每个视图可以有不同的状态颜色,我不需要担心和思考一些逻辑,某种错误的视图有某种错误的颜色。

使它像你的应用程序栏颜色

import 'package:flutter/material.dart';

 Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
  ));
 }

你也可以在SliverAppBar中使用这个,不要忘记使用backwardsCompatibility: false如果你跳过这个属性,它将不起作用。参见doc

@override
  Widget build(BuildContext context) {    
    return Scaffold(
      appBar: null,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
              systemOverlayStyle: SystemUiOverlayStyle(
                  statusBarColor: Colors.transparent,
                  statusBarIconBrightness: Brightness.dark),
              backwardsCompatibility: false,
//... remaining code and close braces..