Wie ändere ich die Farbe der Statusleiste in Flutter?

79

Ich versuche, die Farbe der Statusleiste in Weiß zu ändern. Ich fand diese Kneipe beim Flattern. Ich habe versucht, den Beispielcode für meine Dartdateien zu verwenden.

Mohamed Hassan
quelle

Antworten:

110

Funktioniert völlig gut in meiner App

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

( dieses Paket )

UPD: Eine andere Lösung

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));
Andrey Turkovsky
quelle
8
Vielen Dank Andrey; Es funktioniert ... das einzige Problem ist, dass der Hintergrund weiß ist, aber die Uhr, der drahtlose Text und andere Texte und Symbole sind ebenfalls weiß. Ich bin mir nicht sicher warum !! (Ich erwarte, dass der Text und die Symbole schwarz sind)
Mohamed Hassan
1
Das habe ich auch nicht gefunden. Und ich habe den Beitrag bearbeitet - es gibt eine andere und einfachere Lösung zum Einstellen der Farbe der Statusleiste
Andrey Turkovsky,
1
Hervorragend. Nur ein kleiner Kommentar ... Sie müssen die Datei pubspec.yaml öffnen und die nächste Zeile unter der Zeile " Abhängigkeiten" hinzufügen : flutter_statusbarcolor: ^ 0.2.3 (Überprüfen Sie die letzte Version hier [ pub.dev/packages/flutter_statusbarcolor#-installing-tab -] )
hfunes.com
1
@ JayTillu Nr. Für iOS müssen Sie die flutter_statusbarcolorFarbe für jedes AppBarmanuell verwenden oder einstellen
Andrey Turkovsky
1
Es ändert den Hintergrund der Statusleiste und nicht den Text der Statusleiste.
Abdulrahman Masoud
88

Nur Android (mehr Flexibilität):

import 'package:flutter/services.dart';

Danach müssen Sie folgende Zeilen hinzufügen (der bessere Ort, um diese Zeilen einzufügen, liegt in Ihrer main()Methode).

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

Sowohl iOS als auch Android:

appBar: AppBar(
  backgroundColor: Colors.red, // status bar color
  brightness: Brightness.light, // status bar brightness
)
CopsOnRoad
quelle
Ich bin ein Neuling im Flattern und möchte wissen, was passiert, wenn wir diese Zeilen in die Erstellungsmethode eines Widgets einfügen? Macht es einen Unterschied?
Bhavnik
Es wird funktionieren und macht keinen Unterschied. Denken Sie daran, dass die Farbe mit den Parametern des letzten Anrufers eingestellt wird.
Yaobin Dann
Wie kann ich die Textfarbe der Statusleiste ändern, wenn ich das App-Thema von hell nach dunkel und umgekehrt ändere? Gibt es Eigenschaften in der ThemeData-Klasse?
Vinoth Vino
@VinothVino Entschuldigung, aber Sie können Statusleistenelementen keine Textfarbe Ihrer Wahl zuweisen. Sie können lediglich Änderungen vornehmen brightness, wobei Brightness.lightschwarze Textfarbe und Brightness.darkweiße angezeigt werden .
CopsOnRoad
Danke für die Antwort, Bruder. Wie kann ich die Helligkeit dynamisch ändern? Ich ändere den Dunkelmodus, er wird nicht richtig aktualisiert. Wenn ich die App heiß neu starte, funktioniert sie.
Vinoth Vino
41

Anstelle des häufig vorgeschlagenen SystemChrome.setSystemUIOverlayStyle()systemweiten Dienstes, der nicht auf einer anderen Route zurückgesetzt wird, können Sie AnnotatedRegion<SystemUiOverlayStyle>ein Widget verwenden, das nur für das von Ihnen umschlossene Widget wirksam ist.

AnnotatedRegion<SystemUiOverlayStyle>(
   value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
  ),
  child: Scaffold(
      ...
  ),
)
kuhnroyal
quelle
1
Dies ist die beste Antwort, da das Zurückkehren zum Bildschirm nach einem Druck die Statusleiste zurücksetzt. Dies wurde zuerst von Jordy hier erwähnt. Stackoverflow.com/a/54593164/4033525
Sameer J
1
Ich glaube auch, dass dies die beste Antwort ist, wenn wir sie in der gesamten App benötigen
Abbas
1
Ich benutze es auf einem Bildschirm und es wirkt sich auf alle anderen Bildschirme in der App aus. Ich verwende es auf meinem ersten Bildschirm und natürlich sind die anderen Bildschirme verbunden, sodass es auf allen anderen Bildschirmen dieselbe Statusleistenfarbe in diesem Weiß hat. Wie kann dieses Verhalten verhindert werden? Wie funktioniert es nur auf einem bestimmten Gerüst?
gegobyte
@gegobyte Ich hatte das gleiche Problem. Ich habe 1 globale Farbe verwendet, die in den meisten Ansichten verwendet wird. Aber in bestimmten Ansichten, in denen unterschiedliche Farben benötigt wurden, habe ich nur dasselbe Widget wiederverwendet, aber mit unterschiedlichen Farben
Andris
35

Für diejenigen, die verwenden AppBar

Wenn Sie verwenden, AppBarist das Aktualisieren der Statusleistenfarbe so einfach:

Scaffold(
  appBar: AppBar(
    // Use Brightness.light for dark status bar 
    // or Brightness.dark for light status bar
    brightness: Brightness.light 
  ),
  body: ...
)

So bewerben Sie sich für alle App-Leisten:

return MaterialApp(
  theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context)
        .appBarTheme
        .copyWith(brightness: Brightness.light),
  ...
  ),

Für diejenigen, die nicht verwenden AppBar

Verpacken Sie Ihre Inhalte mit AnnotatedRegionund stellen Sie sie statusBarIconBrightnessfür Android und statusBarBrightnessiOS ein:

return AnnotatedRegion<SystemUiOverlayStyle>(
  value: const SystemUiOverlayStyle(
    // For Android.
    // Use [light] for white status bar and [dark] for black status bar.
    statusBarIconBrightness: Brightness.light,
    // For iOS.
    // Use [dark] for white status bar and [light] for black status bar.
    statusBarBrightness: Brightness.dark,
  ),
  child: Scaffold(...),
);
Andrey Gordeev
quelle
1
Diese Methode erlaubt es nicht, die genaue Farbe
einzustellen
Wenn Sie die Farbe der Statusleiste entsprechend Ihrem Thema erhalten möchten, können Sie immerbrightness: Theme.of(context).brightness
Roman Panaget
value: SystemUiOverlayStyle.light(oder .dark) macht das Gleiche
verdammt
danke für die Kommentare, ich war früher verwirrt :)
Abhishek Thapliyal
12

Ändern Sie die Farbe der Statusleiste, wenn Sie sie nicht verwenden AppBar

Importieren Sie dies zuerst

import 'package:flutter/services.dart';

Verwenden Sie nun den folgenden Code, um die Farbe der Statusleiste in Ihrer Anwendung zu ändern, wenn Sie die nicht verwenden AppBar

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(

    statusBarColor: AppColors.statusBarColor,/* set Status bar color in Android devices. */
    
    statusBarIconBrightness: Brightness.dark,/* set Status bar icons color in Android devices.*/
    
    statusBarBrightness: Brightness.dark)/* set Status bar icon color in iOS. */
); 

So ändern Sie die Farbe der Statusleiste iOSbei VerwendungSafeArea

Scaffold(
  body: Container(
    color: Colors.red, /* Set your status bar color here */
    child: SafeArea(child: Container(
      /* Add your Widget here */
    )),
  ),
); 
AskNilesh
quelle
Ich wurde erwischt, als ich den SafeArea vor das Gerüst stellte, wodurch verhindert wurde, dass sich die Hintergrundfarbe des Gerüsts hinter der Statusleiste erstreckte.
Bulwinkel
8

Ich kann nicht direkt im Thread kommentieren, da ich noch nicht den erforderlichen Ruf habe, aber der Autor hat Folgendes gefragt:

Das einzige Problem ist, dass der Hintergrund weiß ist, aber die Uhr, drahtlose und andere Texte und Symbole sind auch in Weiß. Ich bin nicht sicher warum !!

Für alle anderen, die zu diesem Thread kommen, ist hier, was für mich funktioniert hat. Die Textfarbe der Statusleiste wird durch die Helligkeitskonstante in bestimmt flutter/material.dart. Um dies zu ändern, passen Sie die SystemChromeLösung wie folgt an, um den Text zu konfigurieren:

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

Ihre möglichen Werte für Brightnesssind Brightness.darkund Brightness.light.

Dokumentation: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html

Seth Chapman
quelle
8

Das hat bei mir funktioniert:

Service importieren

import 'package:flutter/services.dart';

Dann füge hinzu:

@override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarBrightness: Brightness.dark,
    ));
    return MaterialApp(home: Scaffold(
SK7
quelle
6

Ich denke, das wird dir helfen:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white, // navigation bar color
        statusBarColor: Colors.white, // status bar color
        statusBarIconBrightness: Brightness.dark, // status bar icons' color
        systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
    ));
Omar Alsaedi
quelle
5

Dies ist alles, was Sie wissen müssen:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.amber, // navigation bar color
    statusBarColor: Colors.white, // status bar color
    statusBarIconBrightness: Brightness.dark, // status bar icon color
    systemNavigationBarIconBrightness: Brightness.dark, // color of navigation controls
  ));
  runApp(MyApp());
}
Kerim Amanov
quelle
4

Dies kann in 2 Schritten erreicht werden:

  1. Stellen Sie die Farbe der Statusleiste mithilfe des FlutterStatusbarcolor-Pakets so ein , dass sie mit Ihrem Seitenhintergrund übereinstimmt
  2. Stellen Sie die Farben der Statusleisten-Schaltflächen (Batterie, WLAN usw.) mithilfe der AppBar.brightnessEigenschaft ein

Wenn Sie eine haben AppBar:

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        // Other AppBar properties
      ),
      body: Container()
    );
  }

Wenn Sie die App-Leiste nicht auf der Seite anzeigen möchten:

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        elevation: 0.0,
        toolbarHeight: 0.0, // Hide the AppBar
      ),
      body: Container()
  }
Sisir
quelle
Dies ist auch in iOS für SafeArea getestet?
LOG_TAG
3

auf dem main.dart Dateiimportdienst wie folgt

  import 'package:flutter/services.dart';

und innerhalb der Erstellungsmethode fügen Sie einfach diese Zeile vor der Rückkehr hinzu

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

So was:

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

Dieser wird auch funktionieren

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
Robert Apikyan
quelle
2
 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);
Apurv Thakkar
quelle
1

um es wie Ihre App-Leistenfarbe zu machen

import 'package:flutter/material.dart';

 Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
  ));
 }
Muhammad Ashraf
quelle
1

Dies ist bei weitem der beste Weg, es werden keine zusätzlichen Plugins benötigt.

Widget emptyAppBar(){
  return PreferredSize(
      preferredSize: Size.fromHeight(0.0), 
      child: AppBar(
        backgroundColor: Color(0xFFf7f7f7),
        brightness: Brightness.light,
      )
  );
}

und nenne es in deinem Gerüst so

return Scaffold(
      appBar: emptyAppBar(),
     .
     .
     .
Nyaz Jaff
quelle
0
@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}
Ma Mars
quelle
3
Bitte posten Sie nicht nur Code als Antwort, sondern geben Sie auch eine Erklärung, was Ihr Code tut und wie er das Problem der Frage löst. Antworten mit einer Erklärung sind normalerweise von höherer Qualität und ziehen eher positive Stimmen an.
Mark Rotteveel
0

Ich hatte Probleme mit allen genannten Antworten, außer mit der Lösung, die ich selbst gemacht habe: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green) Für Ansichten, in denen keine AppBar hinzugefügt wurde, verwende ich nur einen Container mit Hintergrund, dessen genaue Höhe der Höhe der Statusleiste entspricht. In diesem Szenario kann jede Ansicht eine andere Statusfarbe haben und ich muss mir keine Sorgen machen und über eine Logik nachdenken, dass irgendwie falsche Ansichten irgendwie falsche Farben haben.

Andris
quelle
0

Keine der vorhandenen Lösungen hat mir geholfen, da ich sie nicht verwende AppBarund keine Aussagen machen möchte, wenn der Benutzer das App-Thema wechselt. Ich brauchte einen reaktiven Weg, um zwischen dem hellen und dem dunklen Modus zu wechseln, und stellte fest, dass AppBarein Widget Semanticszum Einstellen der Farbe der Statusleiste verwendet wird.

Grundsätzlich mache ich das so:

return Semantics(
  container: false,  // don't make it a new node in the hierarchy
  child: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light,  // or .dark
    child: MyApp(),  // your widget goes here
  ),
);
  • Semanticswird aus importiert package:flutter/material.dart.
  • SystemUiOverlayStylewird aus importiert package:flutter/services.dart.
verdammt
quelle
Gleiches Problem wie oben erwähnt, aber die Lösung funktioniert in Andorid 10
Aditi
0

Funktioniert sowohl für iOS als auch für Android

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

  return Scaffold();
}
    
MJ Montes
quelle
0

Ich habe es gelöst, indem ich die gesamte Hintergrundfarbe wie folgt geändert habe:

Im Hauptbildschirm:

Gerüst zurückgeben (

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

Zou
quelle