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


当前回答

对于那些有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可重用小部件的摘录。

其他回答

你也可以在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..

适用于iOS和Android

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

  return Scaffold();
}
    

完整的示例

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,
          ),
        ),
      ),
    );
  }
}

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

如果你想改变整个应用程序的状态颜色,你可以像这样使用primaryColorDark属性:

void main() {
  runApp(
    MaterialApp(
      home: HomeWidget(),
      theme: ThemeData(
        primaryColorDark: Colors.white,
      ),
    ),
  );
}