Question

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

string

这就是我所看到的

如果我将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内，则可以使用，但是系统栏图标也变为白色

Answer 1

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

Answer 2

基于@ 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 3

我花了很多时间试图更改状态栏的颜色，我发现了这个包装 https://pub.dartlang.org/packages/flutter_statusbarcolor

Answer 4

对于您的情况，只需将 SafeArea() 包装到将在屏幕上显示的顶部小部件（例如：您的“今天”文本小部件）应避免系统栏上的黑色。

完整示例。

Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SafeArea(
              child: Text('Today'),
            ),
            Text('Tomorrow')
          ]
      );

这对我有用！

Flutter-使用SafeArea的系统栏颜色

4 个答案: