Flutter: 携帯電話のステータス バーの色を appBar のステータスの色と一致するように変更します。

序文

私は最近アプリを開発していましたが、appBar や電話のステータス バーの色にはあまり注意を払いませんでした。しかし、友人にその話を聞いたところ、両者の色が違うことに気づきました。

私のアプリ

京東

QQミュージック

このように比較すると、やや見苦しいことがわかりますが、どうすればそれを達成できるでしょうか?

成し遂げる

何と表現すればいいでしょうか?本当に言えません。 Baidu にあるものの中にはサードパーティのプラグインを使用しているものもありますが、初めて gpt に問い合わせたときも、サードパーティのプラグインが使用されているとのことでした。
その後、gpt は突然この計画を私に与えました。

当初計画

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
    
    
  SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        statusBarColor: Colors.lightBlueAccent, // 设置非抽屉部分状态栏的颜色为蓝色
      ),
    );

これは非常にシンプルで、appBar ステータスの色と一致する携帯電話のステータス バーの色を実装します。

最終計画
これは完了したと思いますが、そうではありません。 Literature Yiyan のようなドロワーを備えたアプリを見たことがあります:

これはとんでもないことで、2 色も実現できます。他の人のアプリがそれを実行できるのであれば、私たちのアプリもそれを実行する必要があります。

再度 gpt に助けを求めましたが、彼女にどのように問題を説明しても、正しい解決策を得ることができませんでした。もともと実現できないからやりたくない、と思っていました。しかし、突然、最も特別な色を使用できないかというアイデアが頭に浮かびました。それは本当にうまくいきました。透明性を使用すると、この問題を完全に解決できます。

SystemChrome.setSystemUIOverlayStyle(
   const SystemUiOverlayStyle(
     statusBarColor: Colors.transparent,
     statusBarIconBrightness: Brightness.dark, // 设置状态栏图标和字体为亮色（黑色）
   ),
 );

完璧、まったく同じです。