web-dev-qa-db-ja.com

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

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

dartflutterflutter-layoutflutter-dependencies
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
Andrey Turkovsky

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
    ),
    ...
);
0
Mahmoud salah eldien saber

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,
    ),
  );
 }
0
Krishna Kumar Jangid