web-dev-qa-db-ja.com

Flutterのステータスバーの色を変更するには?

ステータスバーの色を白に変更しようとしています。私は this パタパタを見つけました。 Dartファイルでサンプルコードを使用しようとしました。

21
Mohamed Hassan

私のアプリではまったく問題なく動作します

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.Dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return MaterialApp(
      title: app_title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: home_title),
    );
  }
}

PD:別のソリューション

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));
35

SystemChromeクラスを使用して、ステータスバーとナビゲーションバーの色を変更できます。最初のインポート

import 'package:flutter/services.Dart';

この後、次の行を追加する必要があります(これらの行を置くより良い場所はmain()メソッドにあります)

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
  ));
}
30
CopsOnRoad

私はまだ必要な評判を持っていないので、スレッドに直接コメントすることはできませんが、著者は次のように尋ねました:

唯一の問題は、背景が白であるが、時計、ワイヤレス、その他のテキストおよびアイコンも白であるということです。

このスレッドに来る他の人のために、ここに私のために働いたものがあります。ステータスバーのテキストの色は、flutter/material.Dartの明るさ定数によって決まります。これを変更するには、SystemChromeソリューションを次のように調整して、テキストを設定します。

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.red,
      statusBarBrightness: Brightness.dark,
    ));

Brightnessに指定できる値は、Brightness.darkおよびBrightness.lightです。

ドキュメント: https://api.flutter.dev/flutter/Dart-ui/Brightness-class.htmlhttps://api.flutter.dev/flutter/services/SystemUiOverlayStyle- class.html

2
Seth Chapman

このlibeazyおよびshortflutter_statusbarcolor 0.2. を使用してカスタマイズすることもできます

1
Vithani Ravi

これを試してください:

return MaterialApp(
    ...
    theme: ThemeData(
        primarySwatch: Colors.deepPurple
    ),
    ...
);

main.Dartファイルインポートサービスで次のように

  import 'package:flutter/services.Dart';

そして、ビルドメソッド内では、戻る前にこの行を追加するだけです

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.orange
)); 

このような:

@override
 Widget build(BuildContext context) {
   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: CustomColors.appbarcolor
    ));
    return MaterialApp(
    home: MySplash(),
    theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: CustomColors.appbarcolor,
    ),
  );
 }