1. ホーム
  2. dart

Flutter - AppBarが存在しないときにステータスバーの色を設定する方法

2023-11-20 18:36:04

質問

AppBar が存在しない場合のステータスバーの色の設定方法について。

試してみましたが、うまくいきません。

Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return new Scaffold(
        body: new Container(
        color: UniQueryColors.colorBackground,
        child: new ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
    );
}

出力はこのようになります。

どのように解決するのですか?

まず、インポートする services パッケージをインポートします。

import 'package:flutter/services.dart';

次に、これを単純に ビルド関数 に記述します。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.blue, //or set color with: Color(0xFF0000FF)
));

さらに、次のような便利なプロパティを設定することができます。 statusBarIconBrightness , systemNavigationBarColor または systemNavigationBarDividerColor


もしあなたが、より flutter/widget を使用することを検討してください。 AnnotatedRegion<SystemUiOverlayStyle> ウィジェットを使うことを検討してください。

value: プロパティには SystemUiOverlayStyle() オブジェクトに設定することができます。


より詳細な情報については API ドキュメント