Wie ändere ich die Farbe der Statusleiste in Flutter?

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.

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

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
)

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(
      ...
  ),
)

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

Ä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 */
    )),
  ),
); 

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

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(

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

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

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

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

Dieser wird auch funktionieren

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);

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

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(),
     .
     .
     .

@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}

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.

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.

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

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

);

Was Sie wollen, sind Themen. Sie sind viel wichtiger als die AppBar-Farbe.

https://flutter.io/cookbook/design/themes/