web-dev-qa-db-fra.com

Flutter - Comment définir la couleur de la barre d'état quand AppBar n'est pas présent

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

J'ai essayé cela mais ne fonctionne 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 à ceci:

 enter image description here

dartflutterstatusbar
15
Rafiqul Hasan

Mettez simplement ceci dans la fonction build de votre application:

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

De plus, vous pouvez définir des variables utiles telles que: statusBarIconBrightness, systemNavigationBarColor ou systemNavigationBarDividerColor

28
Hannes .T

Sur Android, ajoutez ce qui suit à onCreate dans MainActivity.Java, après l’appel de 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

4
Shyju M

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

Juste au-dessus de l'exemple de code, vous trouverez un paragraphe sur AppBar.brightness.

Vous devriez pouvoir ajouter un 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();
             }
           },
        ),
       ),
    );
}

Heres info à propos de la Luminosité

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

La couleur de la barre d'état est rendue par le système Android. Que ce soit à partir de Flutter ou non peut faire l’objet d’un débat: Comment allumer la barre d’état Android dans Flutter

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

Pour iOS, vous devrez voir leur documentation - je ne suis pas familier avec la plate-forme.

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

1
YodaScholtz

Si vous prenez un butin dans code source de AppBar, vous verrez qu'ils utilisent un widget AnnotatedRegion.

À ma connaissance, ce widget définit automatiquement la couleur de la barre de statut/barre de navigation lorsque le widget qui y est enveloppé est recouvert par la barre de statut/barre 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: ...,
      ),
   );
}
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(),
    );

ajoutez cursorColor dans les données de thème après cela, vous verrez la couleur de la barre d'état

0
test flutter