【问题标题】：Fully transparent status bar in FlutterFlutter 中完全透明的状态栏
【发布时间】：2022-08-09 18:11:38
【问题描述】：

我尝试在我的 Flutter 应用程序中设置透明状态栏，但这不会使状态栏完全透明，它就像一些带有不透明度的深色（应用程序具有白色背景）：
How it looks

这就是我在App 类的build 方法中设置状态栏颜色的方式：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    // Not pretty much needed in this example, I\'m just setting the color
    // for my nav bar to fit the theme
    systemNavigationBarColor: theme.current.primaryColor,
));

我试过的：

在ThemeData 中设置SystemUiOverlayStyle -> 没有帮助

确保在应用以下答案后热重启应用程序以查看更改

标签： flutter

【解决方案1】：

我通过将SystemUiOverlayStyle.systemStatusBarContrastEnforced 设置为false 来解决我的问题。显然，颤动是强制对比并自动为透明黑色和白色图标设置背景，而我需要透明背景上的黑色图标（因此由于应用程序的背景而为白色）。

非常感谢所有试图帮助我的人。

【讨论】：

【解决方案2】：

如果这不起作用，那么你可以试试这个：

像这样在你的主要方法中添加它
void main() {
 WidgetsFlutterBinding.ensureInitialized();
 //
 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  systemNavigationBarColor: theme.current.primaryColor
  statusBarIconBrightness: Brightness.dark));
 //
 runApp(const MyApp());
}
这将使您的所有屏幕状态栏透明。

如果这对您没有帮助，请告诉我。

【讨论】：

这会有所帮助，但我希望状态栏是透明的，因为在我的应用程序中有超过 1 个主题。更改应用程序主题时，我在状态栏颜色管理方面遇到了很多错误，因此最简单的方法是使状态栏透明。
我已经编辑了我的答案，您现在可以尝试编辑后的版本。 @undermouse
我试过更新版本，仍然没有结果。
您是否在 main() 方法中添加了代码？同样在应用我的方法之前，请在您添加逻辑以更改状态栏颜色的其他任何地方进行评论。
问题不在于颜色不会改变。它会发生变化，例如，如果我将其设置为Colors.red，状态栏会按预期变为红色。由于某种原因，透明的东西实际上并没有呈现为透明的。

【解决方案3】：

使用 AppBar 的 systemOverlayStyle 属性

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(
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.teal,
      ),
      themeMode: ThemeMode.system,
      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> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark
            .copyWith(statusBarColor: Colors.transparent),
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

输出：

【讨论】：

我已经使用ThemeData.appBarTheme.systemOverlayStyle 为状态栏设置了样式，我也尝试了你的方法。它们都不起作用。
您可以尝试从任何地方删除 systemOverlayStyle 并将其放置在某个应用栏上吗？
没有什么变化。我认为，.android 文件中的透明度配置存在一些问题。因为如果我将状态栏颜色设置为 Colors.transparent 以外的颜色，它会正常工作。有什么想法可能是什么问题？

【解决方案4】：

您可以使用示例代码来自定义状态栏颜色：

      Widget build(BuildContext context) {
   return Scaffold(
/*  appBar: AppBar(), */ //  <==== solution worked when no appBar
    body: Container(
      color: Colors.red, // < ===  specific color for status bar
      child: SafeArea(
        child: Container(
            color: Colors.blue,
            child: Center(child: Text("Sample"))),
      ),
    ));}

【讨论】：

不，它给出了相同的结果，但状态栏不完全透明
您需要具有特定颜色的状态栏吗？或者你需要完全隐藏状态栏？
我需要它是透明的。例如，就像在电报中一样，所以我可以在它下面画出我的颜色。
您可以在颤振计数器应用程序中看到，默认情况下，应用程序栏不是特定的颜色和透明的。可能是您自定义的主题更改它们（黑暗的主题不会无效。）。

【解决方案5】：

在 main.dart 中，我通过以下方式更改了 void main() ...

void main() {
 WidgetsFlutterBinding.ensureInitialized();

 // makes Smartphone Statusbar transparent
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  statusBarIconBrightness: Brightness.light,
  statusBarBrightness: Brightness.dark));

 runApp(const MyApp());
}

为我工作:)

【讨论】：