Jak zmienić kolor paska stanu we Flutterze?

Odpowiedzi:

122

Działa całkowicie dobrze w mojej aplikacji

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

( ten pakiet )

UPD: inne rozwiązanie

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));
Andrey Turkovsky
źródło
8
Wielkie dzięki Andrey; Działa ... jedyny problem jest taki, że tło jest białe, ale zegar, radio i inne teksty oraz ikony też są białe .. Nie wiem dlaczego !! (Oczekuję, że tekst i ikony będą czarne)
Mohamed Hassan
1
Ja też tego nie znalazłem. I zredagowałem post - jest inne i prostsze rozwiązanie do ustawiania koloru paska stanu
Andrey Turkovsky
1
Doskonale. Tylko mały komentarz ... Musisz otworzyć plik pubspec.yaml i dodać następną linię pod linią zależności : flutter_statusbarcolor: ^ 0.2.3 (Sprawdź ostatnią wersję tutaj [ pub.dev/packages/flutter_statusbarcolor#-installing-tab -] )
hfunes.com
1
@JayTillu no. W przypadku iOS musisz użyć flutter_statusbarcolorlub ustawić kolor dla każdego AppBarręcznie
Andrey Turkovsky
1
zmienia tło paska stanu, a nie tekst samego paska stanu.
Abdulrahman Masoud
97

Aktualizacja zalecana):

W najnowszej wersji Fluttera powinieneś użyć:

AppBar(
  backwardsCompatibility: false,
  systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

Tylko Android (większa elastyczność):

import 'package:flutter/services.dart';

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

Zarówno iOS, jak i Android:

appBar: AppBar(
  backgroundColor: Colors.red, // status bar color
  brightness: Brightness.light, // status bar brightness
)
CopsOnRoad
źródło
Jestem nowicjuszem w trzepotaniu i chcę wiedzieć Co by było, gdybyśmy umieścili te linie w metodzie budowania dowolnego widżetu? Czy to ma znaczenie?
Bhavnik
To zadziała i nie robi żadnej różnicy. Pamiętaj tylko, że kolor zostanie ustawiony zgodnie z parametrami ostatniego dzwoniącego.
Yaobin Potem
Jak mogę zmienić kolor tekstu paska stanu podczas zmiany motywu aplikacji z jasnego na ciemny i odwrotnie? Czy w klasie ThemeData są jakieś właściwości?
Vinoth Vino
@VinothVino Przepraszamy, ale nie możesz nadać wybranego koloru tekstu elementom paska stanu, jedyne, co możesz zrobić, to zmienić brightness, gdzie Brightness.lightwyświetla czarny kolor tekstu, a Brightness.darkpokazuje biały.
CopsOnRoad
Dzięki za odpowiedź, stary. Jak mogę dynamicznie zmieniać jasność? Zmieniam tryb ciemny, nie aktualizuje się poprawnie. Jeśli ponownie uruchomię aplikację na gorąco, to działa.
Vinoth Vino
46

Zamiast często sugerowanej usługi, SystemChrome.setSystemUIOverlayStyle()która jest usługą ogólnosystemową i nie resetuje się na innej trasie, możesz użyć AnnotatedRegion<SystemUiOverlayStyle>widgetu, który ma wpływ tylko na widżet, który zawijasz.

AnnotatedRegion<SystemUiOverlayStyle>(
   value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
  ),
  child: Scaffold(
      ...
  ),
)
kuhnroyal
źródło
1
To najlepsza odpowiedź, ponieważ powrót do ekranu po naciśnięciu zresetuje pasek stanu. Po raz pierwszy wspomniał o tym Jordy tutaj stackoverflow.com/a/54593164/4033525
Sameer J
1
Uważam również, że jest to najlepsza odpowiedź, jeśli potrzebujemy jej w całej aplikacji
Abbas
1
Używam go na jednym ekranie i ma to wpływ na wszystkie inne ekrany w aplikacji. Używam go na moim pierwszym ekranie i oczywiście pozostałe ekrany są podłączone, więc ma ten sam kolor paska stanu, w tym kolorze białym, na wszystkich pozostałych ekranach. Jak temu zapobiec? Jak sprawić, by działał tylko na określonym rusztowaniu?
gegobyte
@gegobyte i miałem ten sam problem. zrobiłem przy użyciu 1 globalnego koloru, który jest używany w większości widoków. Ale w określonych widokach, gdzie potrzebny był inny kolor, po prostu ponownie użyłem tego samego widżetu, ale z innym kolorem
Andris,
45

Dla tych, którzy używają AppBar

Jeśli używasz AppBarto aktualizacja koloru paska stanu jest tak prosta:

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

Aby ubiegać się o wszystkie paski aplikacji:

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

Dla tych, którzy nie używają AppBar

Opakuj zawartość AnnotatedRegioni ustaw valuena SystemUiOverlayStyle.lightlub SystemUiOverlayStyle.dark:

return AnnotatedRegion<SystemUiOverlayStyle>(
  // Use [SystemUiOverlayStyle.light] for white status bar 
  // or [SystemUiOverlayStyle.dark] for black status bar
  value: SystemUiOverlayStyle.light,
  child: Scaffold(...),
);
Andrey Gordeev
źródło
2
Ta metoda nie pozwala na ustawienie dokładnego koloru
kashlo
jeśli chcesz uzyskać kolor paska stanu zgodny z motywem, zawsze możesz użyćbrightness: Theme.of(context).brightness
Roman Panaget
1
value: SystemUiOverlayStyle.light(lub .dark) robi to samo
cholera
12

Zmień kolor paska stanu, gdy go nie używasz AppBar

Najpierw zaimportuj to

import 'package:flutter/services.dart';

Teraz użyj poniższego kodu, aby zmienić kolor paska stanu w aplikacji, gdy nie używasz 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. */
); 

Aby zmienić kolor paska stanu, iOSgdy używaszSafeArea

Scaffold(
  body: Container(
    color: Colors.red, /* Set your status bar color here */
    child: SafeArea(child: Container(
      /* Add your Widget here */
    )),
  ),
); 
AskNilesh
źródło
Zaskoczyło mnie umieszczenie SafeArea przed rusztowaniem, co spowodowało, że kolor tła z rusztowania nie rozciągał się za paskiem stanu.
Bulwinkel
8

Nie mogę komentować bezpośrednio w wątku, ponieważ nie mam jeszcze wymaganej reputacji, ale autor zadał następujące pytanie:

Jedynym problemem jest to, że tło jest białe, ale zegar, radio i inne teksty i ikony są również białe .. Nie wiem dlaczego !!

Dla każdego, kto przychodzi do tego wątku, oto, co zadziałało. Kolor tekstu paska stanu jest określony przez stałą Jasność w flutter/material.dart. Aby to zmienić, dostosuj SystemChromerozwiązanie w ten sposób, aby skonfigurować tekst:

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

Twoje możliwe wartości Brightnessto Brightness.darki Brightness.light.

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

Seth Chapman
źródło
8

To zadziałało dla mnie:

Usługa importu

import 'package:flutter/services.dart';

Następnie dodaj:

@override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarBrightness: Brightness.dark,
    ));
    return MaterialApp(home: Scaffold(
SK7
źródło
6

Myślę, że to ci pomoże:

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
źródło
5

To wszystko, co musisz wiedzieć:

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
źródło
4

Można to osiągnąć w 2 krokach:

  1. Ustaw kolor paska stanu, aby dopasować go do tła strony za pomocą pakietu FlutterStatusbarcolor
  2. Ustaw kolory przycisków paska stanu (bateria, wifi itp.) Za pomocą AppBar.brightnesswłaściwości

Jeśli masz AppBar:

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

Jeśli nie chcesz wyświetlać paska aplikacji na stronie:

  @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
źródło
jest to również testowane dla SafeArea w iOS?
LOG_TAG
3

w usłudze importu plików main.dart, jak poniżej

  import 'package:flutter/services.dart';

a wewnątrz metody budowania po prostu dodaj tę linię przed powrotem

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

Lubię to:

@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
źródło
2

Ten też zadziała

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
Robert Apikyan
źródło
2
 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);
apurv thakkar
źródło
2

To zdecydowanie najlepszy sposób, nie wymaga żadnych dodatkowych wtyczek.

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

i nazwij to na swoim rusztowaniu w ten sposób

return Scaffold(
      appBar: emptyAppBar(),
     .
     .
     .
Nyaz Jaff
źródło
1

aby upodobnić go do koloru paska aplikacji

import 'package:flutter/material.dart';

 Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
  ));
 }
Muhammad Ashraf
źródło
1

Działa zarówno na iOS, jak i na Androida

import 'package:flutter/services.dart';

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

  return Scaffold();
}
    
MJ Montes
źródło
0
@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}
Ma Mars
źródło
3
Nie wysyłaj tylko kodu jako odpowiedzi, ale także wyjaśnij, co robi twój kod i jak rozwiązuje problem pytania. Odpowiedzi z wyjaśnieniem są zwykle wyższej jakości i częściej przyciągają głosy za.
Mark Rotteveel
0

Miałem problemy ze wszystkimi wymienionymi odpowiedziami, z wyjątkiem rozwiązania, które zrobiłem sam: w Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green) przypadku widoków, w których nie ma dodanego appBar, używam kontenera z tłem, którego dokładna wysokość odpowiada wysokości paska stanu. W tym scenariuszu każdy widok może mieć inny kolor statusu i nie muszę się martwić i myśleć o jakiejś logice, że w jakiś sposób błędne widoki mają w jakiś sposób niewłaściwe kolory.

Andris
źródło
0

Żadne z istniejących rozwiązań nie pomogło mi, ponieważ nie używam AppBari nie chcę wypowiadać się za każdym razem, gdy użytkownik zmieni motyw aplikacji. Potrzebowałem reaktywnego sposobu przełączania się między trybem jasnym i ciemnym i odkryłem, że AppBarużywa widżetu wywoływanego Semanticsdo ustawiania koloru paska stanu.

Zasadniczo tak to robię:

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
  ),
);
  • Semanticsjest importowany z package:flutter/material.dart.
  • SystemUiOverlayStylejest importowany z package:flutter/services.dart.
cholera
źródło
w obliczu Taki sam problem, jak wspomniano powyżej, ale rozwiązanie nie będzie działać w Andorid 10
Aditi
0

Rozwiązałem to, zmieniając cały kolor tła w następujący sposób:

Na ekranie głównym:

return Scaffold (

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

Zou
źródło
0

Większość odpowiedzi używa, SystemChromektóre działa tylko na Androida. Moje rozwiązanie polega na połączeniu obu AnnotatedRegioni SafeAreaw nowy Widget, aby działał również w iOS. Mogę go używać z lub bez AppBar.

class ColoredStatusBar extends StatelessWidget {
  const ColoredStatusBar({Key key, this.color, this.child}) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: color ?? Colors.blue,
      ),
      child: Container(
        color: color ?? Colors.blue,
        child: SafeArea(
          bottom: false,
          child: Container(
            child: child,
          ),
        ),
      ),
    );
  }
}

Sposób użycia: Umieść go na górze widżetu strony.

@override
Widget build(BuildContext context) {
  return ColoredStatusBar(
    child: /* your child here */,
  );
}
aksumnemiczny
źródło