Jak zmienić kolor paska stanu we Flutterze?

Próbuję zmienić kolor paska stanu na biały. Znalazłem ten pub na trzepotaniu. Próbowałem użyć przykładowego kodu na moich plikach rzutek.

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

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
)

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

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

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

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

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(

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

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

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

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

Ten też zadziała

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

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

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

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

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

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

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.

Ż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.

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

);

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

To, czego chcesz, to motywy. Są ważne dla dużo więcej niż kolor AppBar.

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