webentwicklung-frage-antwort-db.com.de

Flattern - Festlegen der Farbe der Statusleiste, wenn AppBar nicht vorhanden ist

Festlegen der Farbe der Statusleiste, wenn AppBar nicht vorhanden ist. 

Ich habe es versucht aber nicht funktioniert.

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

Ausgabe sieht so aus:

 enter image description here

dartflutterstatusbar
15
Rafiqul Hasan

Fügen Sie dies einfach in die build-Funktion Ihrer App ein:

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

Zusätzlich können Sie nützliche Variablen wie: statusBarIconBrightness, systemNavigationBarColor oder systemNavigationBarDividerColor einstellen.

28
Hannes .T

Fügen Sie unter Android onCreate in MainActivity.Java nach dem Aufruf von super.onCreate (savedInstanceState) Folgendes hinzu:

getWindow (). setStatusBarColor (0x00000000);

oder Sie können das flutter_statusbarcolor plugin verwenden

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

Beispielprojekt

4
Shyju M

Bei der Suche nach SystemChrome habe ich folgendes gefunden: https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html

Direkt über dem Beispielcode befindet sich ein Absatz über AppBar.brightness.

Sie sollten eine AppBar wie folgt hinzufügen können:

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 über die Helligkeit

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

Die Farbe der Statusleiste wird vom Android-System dargestellt. Ob dies von Flutter aus eingestellt werden kann oder nicht, steht zur Debatte zur Verfügung: Wie kann ich die Statusleiste von Android in Flutter zum Leuchten bringen

Sie können jedoch die Farbe der Statusleiste im Android-spezifischen Code ändern, indem Sie das Design bearbeiten: So ändern Sie die Farbe der Statusleiste in Android

Für iOS müssen Sie deren Dokumentation sehen - ich bin mit der Plattform nicht vertraut.

Es gibt tatsächlich zwei Dart-Bibliotheken, eine zum Einstellen des Themas light/dark der Statusleiste und die andere zum Einstellen der Farbe . Ich habe es auch nicht benutzt, aber offensichtlich hatte jemand anderes das gleiche Problem, mit dem Sie zu kämpfen hatten, und schließlich ein eigenes Paket entwickelt.

1
YodaScholtz

Wenn Sie eine Beute am Quellcode von AppBar ausführen, können Sie sehen, dass sie ein AnnotatedRegion-Widget verwenden.

Soweit ich weiß, setzt dieses Widget automatisch die Farbe der Statusleiste/Navigationsleiste, wenn das darin eingebettete Widget von der Statusleiste/Navigationsleiste überlagert wird. 

Sie können Ihr Widget folgendermaßen umschließen:

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

fügen Sie anschließend in den Motivdaten CursorColor hinzu. Anschließend wird die Farbe der Statusleiste angezeigt

0
test flutter