Я пытаюсь изменить цвет строки состояния на белый. Я нашел этот паб на трепете. Я попытался использовать пример кода в своих файлах дротика.
dart
flutter
flutter-layout
flutter-dependencies
Мохамед Хасан
источник
источник
flutter_statusbarcolor
или устанавливать цвет для каждогоAppBar
вручнуюОбновление (рекомендуется):
В последней версии Flutter вы должны использовать:
AppBar( backwardsCompatibility: false, systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange), )
Только Android (больше гибкости):
import 'package:flutter/services.dart'; void main() { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( systemNavigationBarColor: Colors.blue, // navigation bar color statusBarColor: Colors.pink, // status bar color )); }
И iOS, и Android:
appBar: AppBar( backgroundColor: Colors.red, // status bar color brightness: Brightness.light, // status bar brightness )
источник
brightness
, гдеBrightness.light
отображается черный цвет текста иBrightness.dark
отображается белый.Вместо часто предлагаемого,
SystemChrome.setSystemUIOverlayStyle()
который является общесистемным сервисом и не сбрасывается на другом маршруте, вы можете использоватьAnnotatedRegion<SystemUiOverlayStyle>
виджет, который действует только для виджета, который вы обертываете.источник
Для тех, кто использует
AppBar
Если вы используете
AppBar
то обновление цвета строки состояния так же просто:Scaffold( appBar: AppBar( // Use [Brightness.light] for black status bar // or [Brightness.dark] for white status bar brightness: Brightness.light ), body: ... )
Чтобы подать заявку на все панели приложений:
return MaterialApp( theme: Theme.of(context).copyWith( appBarTheme: Theme.of(context) .appBarTheme .copyWith(brightness: Brightness.light), ... ),
Для тех, кто не пользуется
AppBar
Итоговое содержание с
AnnotatedRegion
и наборvalue
кSystemUiOverlayStyle.light
илиSystemUiOverlayStyle.dark
:return AnnotatedRegion<SystemUiOverlayStyle>( // Use [SystemUiOverlayStyle.light] for white status bar // or [SystemUiOverlayStyle.dark] for black status bar value: SystemUiOverlayStyle.light, child: Scaffold(...), );
источник
brightness: Theme.of(context).brightness
value: SystemUiOverlayStyle.light
(или же.dark
) делает то же самоеСначала импортируйте это
import 'package:flutter/services.dart';
Теперь используйте приведенный ниже код, чтобы изменить цвет строки состояния в вашем приложении, когда вы не используете
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 */ )), ), );
источник
Я не могу комментировать прямо в ветке, так как у меня еще нет необходимой репутации, но автор спросил следующее:
Для всех, кто заходит в эту ветку, вот что сработало для меня. Цвет текста в строке состояния определяется постоянной яркости в
flutter/material.dart
. Чтобы изменить это, настройтеSystemChrome
решение так, чтобы настроить текст:Возможные значения
Brightness
areBrightness.dark
иBrightness.light
.Документация: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html
источник
Это сработало для меня:
Служба импорта
import 'package:flutter/services.dart';
Затем добавьте:
@override Widget build(BuildContext context) { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( statusBarColor: Colors.white, statusBarBrightness: Brightness.dark, )); return MaterialApp(home: Scaffold(
источник
Думаю, это вам поможет:
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 ));
источник
Это все, что вам нужно знать:
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()); }
источник
Этого можно добиться в 2 этапа:
AppBar.brightness
свойстваЕсли у вас есть
AppBar
:@override Widget build(BuildContext context) { FlutterStatusbarcolor.setStatusBarColor(Colors.white); return Scaffold( appBar: AppBar( brightness: Brightness.light, // Other AppBar properties ), body: Container() ); }
Если вы не хотите, чтобы панель приложения отображалась на странице:
@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() }
источник
в службе импорта файлов main.dart, как показано ниже
import 'package:flutter/services.dart';
и внутри метода сборки просто добавьте эту строку перед возвратом
Как это:
@override Widget build(BuildContext context) { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( statusBarColor: CustomColors.appbarcolor )); return MaterialApp( home: MySplash(), theme: ThemeData( brightness: Brightness.light, primaryColor: CustomColors.appbarcolor, ), ); }
источник
Этот тоже будет работать
источник
return Scaffold( backgroundColor: STATUS_BAR_COLOR_HERE, body: SafeArea( child: scaffoldBody(), ), );
источник
Это, безусловно, лучший способ, он не требует дополнительных плагинов.
Widget emptyAppBar(){ return PreferredSize( preferredSize: Size.fromHeight(0.0), child: AppBar( backgroundColor: Color(0xFFf7f7f7), brightness: Brightness.light, ) ); }
и назовите это у себя на эшафоте вот так
return Scaffold( appBar: emptyAppBar(), . . .
источник
Сделать это как цвет панели приложений
import 'package:flutter/material.dart'; Widget build(BuildContext context) { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( statusBarColor: Colors.transparent, systemNavigationBarColor: Colors.transparent, )); }
источник
Работает как для iOS, так и для Android
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() .... ) }
источник
У меня были проблемы со всеми упомянутыми ответами, за исключением решения, которое я сделал сам:
Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green)
для представлений, где не добавлен appBar, я просто использую контейнер с фоном, точная высота которого соответствует высоте строки состояния. В этом сценарии каждое представление может иметь разный цвет статуса, и мне не нужно беспокоиться и думать о некоторой логике, что почему-то неправильные представления имеют неправильные цвета.источник
Ни одно из существующих решений мне не помогло, потому что я не использую
AppBar
и не хочу делать заявления, когда пользователь переключает тему приложения. Мне нужен был реактивный способ переключения между светлым и темным режимами, и я обнаружил, что онAppBar
использует виджет, вызываемыйSemantics
для установки цвета строки состояния.В принципе, я так делаю:
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
импортируется изpackage:flutter/material.dart
.SystemUiOverlayStyle
импортируется изpackage:flutter/services.dart
.источник
Я решил это, изменив весь цвет фона следующим образом:
На главном экране:
return Scaffold (
);
источник
Большинство ответов используется
SystemChrome
только для Android. Мое решение - объединить обаAnnotatedRegion
иSafeArea
в новый виджет, чтобы он также работал в iOS. И я могу использовать это с или без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, ), ), ), ); } }
Использование: Поместите его вверху виджета страницы.
@override Widget build(BuildContext context) { return ColoredStatusBar( child: /* your child here */, ); }
источник
Вам нужны темы. Они важны не только для цвета AppBar.
https://flutter.io/cookbook/design/themes/
источник