颤动-带SafeArea的系统条颜色

Question

我正在尝试为flutter应用程序添加带有彩色系统栏的SafeArea小部件，但不知何故，它们总是变黑。

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle.light.copyWith(
        systemNavigationBarIconBrightness: Brightness.dark,
        systemNavigationBarColor: kSurfaceColor,
        statusBarIconBrightness: Brightness.dark,
        statusBarColor: Colors.red, // Note RED here
      ),
    );

    return SafeArea(
      child: Scaffold(
        backgroundColor: kWhiteColor,
        appBar: _buildAppBar(context), // Title and Avatar are built here
        body: _buildBody(), // This function just returns blank Container for now
        floatingActionButton: _buildFAB(context),
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      ),
    );
  }

这就是我所看到的

​

如果我将SafeArea包装在Container中，并将color属性设置为白色，则可以正常工作，但系统栏图标也会变为白色

​

Answer 1

基于@david-carrilho的回答，我创建了这个简单的小部件

import 'package:flutter/material.dart';

class ColoredSafeArea extends StatelessWidget {
  final Widget child;
  final Color color;

  const ColoredSafeArea({Key key, @required this.child, this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color ?? Theme.of(context).colorScheme.primaryVariant,
      child: SafeArea(
        child: child,
      ),
    );
  }
}

然后，无论我在哪里使用SafeArea，我都会使用我的小包装器小部件ColoredSafeArea。

class MyExampleView extends StatelessWidget {
  const MyExampleView({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ColoredSafeArea(
      child: Center(
        child: Text('Nice color bar'),
      ),
    );
  }
}

这样做的原因是因为它在你的内容后面创建了一个指定颜色的容器，然后SafeArea只是根据设备添加了必要的填充。

Answer 2

Container(
   color ...
      ),
      child: SafeArea(
        child: Scaffold(
          body: 
            AnnotatedRegion<SystemUiOverlayStyle>(
               value: SystemUiOverlayStyle.light,
               child: ...

Answer 3

用下面的代码替换你的叠加样式，这样就行了

SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.white));