web-dev-qa-db-ja.com

Flutter-ダークモードでステータスバーのテキストの色を変更する方法

IOS 13のダークモードでステータスバーのテキストの色を制御したいと思っています。ダークモードを開かない場合は、スキャフォールドのAppBarプロパティの「明るさ」を設定することで、ステータスバーの色を変更できます。以下のようなコード：

return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,  //<--Here!!!
        title: Text(widget.title),
      ),
...

このような努力：

明るい明るさ：enter image description here

暗い明るさ：enter image description here

しかし、シミュレータのDark Modeを有効にすると、メソッドが機能しません。シミュレーターの「暗い外観」を開きます。 enter image description here

「Dark Appearance」を開いた後、ステータスバーのテキストの色はメソッドによってこれ以上変更できなくなり、それはちょうど白い色（明度モード）になります。 enter image description here

私はステータスバーのテキストの色を変更するためにそれらの方法を試しました：

方法1：

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]);
  runApp(MyApp());
}

方法2：

return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Material(
        child: Scaffold(
          appBar: AppBar(
            brightness: Brightness.light,
            title: Text(widget.title),
          ),
          body: Center(

しかし、どちらも機能しませんでした。

あなたの助けを願っています！ありがとうございました。

textfluttercolorsstatusbar
7
Alexweng

まず、ios/Runnerフォルダーに移動します。次にinfo.plistを開き、以下の行をDictセクションに追加します。

<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

次。 MaterialAppのテーマ設定に次の行があることを確認してください：

...
MaterialApp(
    themeMode: ThemeMode.light, // Change it as you want
    theme: ThemeData(
        primaryColor: Colors.white,
        primaryColorBrightness: Brightness.light,
        brightness: Brightness.light,
        primaryColorDark: Colors.black,
        canvasColor: Colors.white,
        // next line is important!
        appBarTheme: AppBarTheme(brightness: Brightness.light)),
    darkTheme: ThemeData(
        primaryColor: Colors.black,
        primaryColorBrightness: Brightness.dark,
        primaryColorLight: Colors.black,
        brightness: Brightness.dark,
        primaryColorDark: Colors.black,      
        indicatorColor: Colors.white,
        canvasColor: Colors.black,
        // next line is important!
        appBarTheme: AppBarTheme(brightness: Brightness.dark)),
...

幸運を！

追伸ここで明るさを設定する必要はありません!!もう:)

Scaffold(
    appBar: AppBar(
    brightness: Brightness.light,  //<--Here!!!
    title: Text(widget.title),
),
1
Dmitry_Kovalov

アプリがmaterialAppの場合は、MaterialAppのdarkThemeプロパティを設定できます。

return new MaterialApp(
  darkTheme: ThemeData.dark(),
);

ドキュメントへのリンクは次のとおりです。 https://api.flutter.dev/flutter/material/MaterialApp-class.html

それでも問題が解決しない場合は、次のコマンドを使用して独自のダークテーマを作成できます。

return new MaterialApp(
  darkTheme: ThemeData(
    // Your theme config
  ),
);

ThemeDataドキュメントへのリンク： https://api.flutter.dev/flutter/material/ThemeData-class.html

0
Loufi

Info.plistのios/Runnerの下に追加

<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

それは私のために働いた。

0
m1416
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.Dart';

これでうまくいきました。黒いテキストを使用する場合：

@override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarWhiteForeground(false);
    return MaterialApp();
  }

白いテキストを使用する場合：

@override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
    return MaterialApp();
  }
0
Ammonious