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.
dart
flutter
flutter-layout
flutter-dependencies
Mohamed Hassan
źródło
źródło
flutter_statusbarcolor
lub ustawić kolor dla każdegoAppBar
ręcznieAktualizacja 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 )
źródło
brightness
, gdzieBrightness.light
wyświetla czarny kolor tekstu, aBrightness.dark
pokazuje biały.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.źródło
Dla tych, którzy używają
AppBar
Jeśli używasz
AppBar
to 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ść
AnnotatedRegion
i ustawvalue
naSystemUiOverlayStyle.light
lubSystemUiOverlayStyle.dark
:return AnnotatedRegion<SystemUiOverlayStyle>( // Use [SystemUiOverlayStyle.light] for white status bar // or [SystemUiOverlayStyle.dark] for black status bar value: SystemUiOverlayStyle.light, child: Scaffold(...), );
źródło
brightness: Theme.of(context).brightness
value: SystemUiOverlayStyle.light
(lub.dark
) robi to samoNajpierw 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. */ );
Scaffold( body: Container( color: Colors.red, /* Set your status bar color here */ child: SafeArea(child: Container( /* Add your Widget here */ )), ), );
źródło
Nie mogę komentować bezpośrednio w wątku, ponieważ nie mam jeszcze wymaganej reputacji, ale autor zadał następujące pytanie:
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ć, dostosujSystemChrome
rozwiązanie w ten sposób, aby skonfigurować tekst:Twoje możliwe wartości
Brightness
toBrightness.dark
iBrightness.light
.Dokumentacja: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html
źródło
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(
źródło
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 ));
źródło
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()); }
źródło
Można to osiągnąć w 2 krokach:
AppBar.brightness
właściwościJeś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() }
źródło
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
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, ), ); }
źródło
Ten też zadziała
źródło
return Scaffold( backgroundColor: STATUS_BAR_COLOR_HERE, body: SafeArea( child: scaffoldBody(), ), );
źródło
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(), . . .
źródło
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, )); }
źródło
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(); }
źródło
@override Widget build(BuildContext context) { return Theme( data: ThemeData(brightness: Brightness.dark), child: Scaffold() .... ) }
źródło
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.źródło
Żadne z istniejących rozwiązań nie pomogło mi, ponieważ nie używam
AppBar
i 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, żeAppBar
używa widżetu wywoływanegoSemantics
do 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 ), );
Semantics
jest importowany zpackage:flutter/material.dart
.SystemUiOverlayStyle
jest importowany zpackage:flutter/services.dart
.źródło
Rozwiązałem to, zmieniając cały kolor tła w następujący sposób:
Na ekranie głównym:
return Scaffold (
);
źródło
Większość odpowiedzi używa,
SystemChrome
które działa tylko na Androida. Moje rozwiązanie polega na połączeniu obuAnnotatedRegion
iSafeArea
w nowy Widget, aby działał również w iOS. Mogę go używać z lub bezAppBar
.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 */, ); }
źródło
To, czego chcesz, to motywy. Są ważne dla dużo więcej niż kolor AppBar.
https://flutter.io/cookbook/design/themes/
źródło