web-dev-qa-db-ja.com

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

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();
             }
           },
        ),
       ),
    );
}

出力は次のようになります：

enter image description here

dartflutterstatusbar
15
Rafiqul Hasan

これをアプリのビルド関数に配置するだけです：

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

さらに、次のような便利な変数を設定できます：statusBarIconBrightness、systemNavigationBarColorまたはsystemNavigationBarDividerColor

28
Hannes .T

Androidでは、super.onCreate（savedInstanceState）への呼び出しの後、MainActivity.JavaのonCreateに以下を追加します。

getWindow（）。setStatusBarColor（0x00000000）;

または、 flutter_statusbarcolor プラグインを使用できます

   changeStatusColor(Color color) async {
    try {
      await FlutterStatusbarcolor.setStatusBarColor(color);
    } on PlatformException catch (e) {
      print(e);
    }
  }

サンプルプロジェクト

4
Shyju M

SystemChromeの検索中にこれを見つけました： https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html

サンプルコードのすぐ上には、AppBar.brightnessに関する段落があります。

次のようなAppBarを追加できるはずです。

Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return new Scaffold(
        appBar: new AppBar(
            title: new Text('Nice title!'),
            brightness: Brightness.light,
        ),
        body: new Container(
        color: UniQueryColors.colorBackground,
        child: new ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
    );
}

明るさ に関する情報はこちら

3
Derekedelaney
Widget build(BuildContext context) {

    return new Scaffold(
        body: new Container(
            color: UniQueryColors.colorBackground,

    /* Wrapping ListView.builder with MediaQuery.removePadding() removes the default padding of the ListView.builder() and the status bar takes the color of the app background */

        child: MediaQuery.removePadding(
         removeTop: true,
         context: context,
        child: ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
      ),
    );
}
2
Pratik Jain

ステータスバーの色はAndroidシステムによってレンダリングされます。Flutterから設定できるかどうかは議論の余地があります： How to make Android = Flutterのステータスバーライト

ただし、できることは、テーマを編集してAndroid特定のコードでステータスバーの色を変更することです。 Androidでステータスバーの色を変更する方法

IOSの場合、ドキュメントを参照する必要があります-プラットフォームに詳しくありません。

実際には、2つのDartライブラリがあります。1つは ステータスバーの明るい/暗いテーマ を設定するためのもので、もう1つは 色を設定する のためのものです。私もどちらも使いませんでしたが、明らかに他の誰かがあなたが直面しているのと同じ問題を抱えていて、自分のパッケージを開発することになりました。

1
YodaScholtz

AppBarの ソースコード で略奪品を入手すると、AnnotatedRegionウィジェットを使用していることがわかります。

私の理解では、このウィジェットは、ラップされたウィジェットがstatusbar/navigationbarによってオーバーレイされると、自動的にstatusbar/navigationbarの色を設定します。

次のようにウィジェットをラップできます。

import 'package:flutter/services.Dart';

...    

Widget build(BuildContext context) {
   return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
         value: SystemUiOverlayStyle.light,                
         child: ...,
      ),
   );
}
1
Jordy Sinke
return MaterialApp(
      title: 'I Am A Student',
      theme: ThemeData(
        primarySwatch: AppColor.appColor,
        primaryColorDark: AppColor.appColor,
        primaryColorBrightness: Brightness.dark,
        cursorColor: AppColor.appColor,
        primaryColor: Color(0xFFF1F2F4),
        buttonTheme: ButtonThemeData(buttonColor: AppColor.appColor,textTheme: ButtonTextTheme.primary),
        fontFamily: 'Rubik',
      ),
//      home: NewAddressScreen(),
      home: SplashScreen(),
    );

テーマデータにcursorColorを追加すると、ステータスバーの色が表示されます

0
test flutter