web-dev-qa-db-fra.com

Flutter-Comment changer la couleur du texte de la barre d'état en mode sombre?

J'espère contrôler la couleur du texte de la barre d'état en mode sombre iOS 13. Je pourrais changer la couleur de la barre d'état en définissant la propriété AppBar de l'échafaudage "luminosité". Lorsque je n'ouvre pas le mode sombre. Codes comme ci-dessous:

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

L'effort comme ça:

luminosité lumineuse: enter image description here

luminosité sombre: enter image description here

Mais lorsque j'active le mode sombre du simulateur , la méthode ne fonctionne pas. Ouvrez "Dark Appearance" du simulateur: enter image description here

Après avoir ouvert le "Dark Appearance", la couleur du texte de la barre d'état ne pouvait plus changer par la méthode, c'est juste en couleur blanche (mode luminosité). enter image description here

J'ai essayé ces méthodes pour changer la couleur du texte de la barre d'état:

Méthode 1: 

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

Méthode 2: 

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

Mais aucun d'eux ne pouvait fonctionner.

J'espère votre aide! Je vous remercie.

textfluttercolorsstatusbar
7
Alexweng

Allez d'abord dans le dossier ios/Runner. Ouvrez ensuite info.plist et ajoutez les lignes suivantes dans la section Dict.

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

Prochain. Assurez-vous d'avoir ces lignes dans les paramètres de thème de votre 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)),
...

Bonne chance!

P.S. Vous n'avez pas besoin de régler la luminosité ici !! plus :)

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

Si votre application est une application matérielle, vous pouvez définir la propriété darkTheme de votre application matérielle:

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

Voici le lien vers le doc: https://api.flutter.dev/flutter/material/MaterialApp-class.html

Si cela ne résout pas votre problème, vous pouvez créer votre propre thème sombre en utilisant:

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

Lien vers le document ThemeData: https://api.flutter.dev/flutter/material/ThemeData-class.html

0
Loufi

Sous ios/Runner dans Info.plist, ajoutez

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

ça a marché pour moi.

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

Cela a fonctionné pour moi. Si vous souhaitez utiliser du texte noir:

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

Pour l'utilisation de texte blanc:

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