Flutter - Comment définir la couleur de la barre d'état lorsque l'AppBar n'est pas présente ?

Question

Comment définir la couleur de la barre d'état lorsque AppBar n'est pas présente.

J'ai essayé mais ça ne marche pas.

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

La sortie ressemble à ça :

Answer 1

D'abord, importer services paquet :

import 'package:flutter/services.dart';

Ensuite, il suffit de mettre ceci dans le fonction de construction de votre application :

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

En outre, vous pouvez définir des propriétés utiles comme : statusBarIconBrightness , systemNavigationBarColor o systemNavigationBarDividerColor

---

Si vous préférez une flutter/widget manière de faire la même chose, envisagez d'utiliser les AnnotatedRegion<SystemUiOverlayStyle> widget.

El value: peut être définie comme une SystemUiOverlayStyle() contenant les mêmes propriétés que celles indiquées ci-dessus.

---

Pour plus d'informations, rendez-vous sur le site Docs API

Answer 2

Si vous jetez un coup d'œil à la code source d'AppBar, vous pouvez voir qu'ils utilisent un widget AnnotatedRegion. Le widget AnnotedRegion vous permet de mieux contrôler le style de superposition du système. Il s'agit d'une manière plus souple de configurer les styles du système lorsqu'une barre d'applications n'est pas utilisée.

D'après ce que j'ai compris, ce widget définit automatiquement la couleur de la barre d'état/de navigation lorsque le widget qu'il contient est recouvert par la barre d'état/de navigation.

Vous pouvez envelopper votre widget comme ceci :

import 'package:flutter/services.dart';

...    

Widget build(BuildContext context) {
   return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
         value: SystemUiOverlayStyle.light,                
         child: ...,
      ),
   );
}

Pour plus d'informations sur le widget AnnotatedRegion, rendez-vous sur le site Web de la Commission européenne. Docs API

Answer 3

Sur Android, ajoutez ce qui suit à onCreate dans MainActivity.java après l'appel à super.onCreate(savedInstanceState) ;

getWindow().setStatusBarColor(0x00000000) ;

ou vous pouvez utiliser le flutter_statusbarcolor plugin

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

Exemple de projet

Answer 4

En cherchant SystemChrome, j'ai trouvé ceci : https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html

Juste au-dessus de l'exemple de code se trouve un paragraphe sur AppBar.brightness .

Vous devriez être en mesure d'ajouter une AppBar comme ceci :

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

Voici des informations sur le Luminosité

Answer 5

La couleur de la barre d'état est rendue par le système Android. La question de savoir si elle peut être définie à partir de Flutter ou non est à débattre : Comment éclairer la barre d'état d'Android avec Flutter ?

Vous pouvez cependant modifier la couleur de la barre d'état dans le code spécifique à Android en modifiant le thème : Comment changer la couleur de la barre d'état dans Android

Pour iOS, vous devrez consulter leur documentation - je ne suis pas familier avec cette plateforme.

Il existe en fait deux bibliothèques Dart, l'une permettant de définir le paramètre thème clair/foncé de la barre d'état et l'autre pour réglage de la couleur . Je n'ai utilisé ni l'un ni l'autre, mais il est clair que quelqu'un d'autre a rencontré le même problème que vous et a fini par développer son propre paquet.