web-dev-qa-db-fra.com

Comment changer la couleur de la barre d'état dans Flutter?

J'essaie de changer la couleur de la barre d'état en blanc. J'ai trouvé ceci pub sur flutter. J'ai essayé d'utiliser l'exemple de code sur mes fichiers Dart.

dartflutterflutter-layoutflutter-dependencies
21
Mohamed Hassan

Fonctionne parfaitement dans mon application

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.Dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return MaterialApp(
      title: app_title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: home_title),
    );
  }
}

PD: Une autre solution

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));
35
Andrey Turkovsky

Vous pouvez utiliser SystemChrome class pour modifier la couleur de la barre d'état et de la barre de navigation. Première importation

import 'package:flutter/services.Dart';

Après cela, vous devez ajouter les lignes suivantes (il vaut mieux placer ces lignes dans votre méthode main())

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
  ));
}
30
CopsOnRoad

Je ne peux pas commenter directement dans le fil car je n'ai pas encore la réputation requise, mais l'auteur a demandé ce qui suit:

le seul problème est que l'arrière-plan est blanc, mais l'horloge, le sans fil et d'autres textes et icônes sont également en blanc. Je ne sais pas trop pourquoi !!

Pour ceux qui viennent sur ce fil, voici ce qui a fonctionné pour moi. La couleur du texte de la barre d'état est déterminée par la constante Luminosité dans flutter/material.Dart. Pour changer cela, ajustez la solution SystemChrome de manière à configurer le texte:

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.red,
      statusBarBrightness: Brightness.dark,
    ));

Vos valeurs possibles pour Brightness sont Brightness.dark et Brightness.light.

Documentation: https://api.flutter.dev/flutter/Dart-ui/Brightness-class.htmlhttps://api.flutter.dev/flutter/services/SystemUiOverlayStyle- class.html

2
Seth Chapman

vous pouvez également personnaliser en utilisant cette bibliothèque eazy et short flutter_statusbarcolor 0.2.

1
Vithani Ravi

essayez ceci:

return MaterialApp(
    ...
    theme: ThemeData(
        primarySwatch: Colors.deepPurple
    ),
    ...
);
0
Mahmoud salah eldien saber

sur le service d'importation de fichier main.Dart comme suit

  import 'package:flutter/services.Dart';

et à l'intérieur de la méthode de construction, il suffit d'ajouter cette ligne avant le retour

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.orange
));

Comme ça:

@override
 Widget build(BuildContext context) {
   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: CustomColors.appbarcolor
    ));
    return MaterialApp(
    home: MySplash(),
    theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: CustomColors.appbarcolor,
    ),
  );
 }
0
Krishna Kumar Jangid