Как изменить цвет строки состояния во Flutter?

84

Я пытаюсь изменить цвет строки состояния на белый. Я нашел этот паб на трепете. Я попытался использовать пример кода в своих файлах дротика.

Мохамед Хасан
источник

Ответы:

122

Прекрасно работает в моем приложении

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

( этот пакет )

UPD: Другое решение

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));
Андрей Турковский
источник
8
Большое спасибо Андрею; Это работает ... единственная проблема в том, что фон белый, но часы, беспроводная связь и другой текст и значки также белые ... Я не уверен, почему !! (Я ожидаю, что текст и значки будут черными)
Мохамед Хассан
1
Я этого тоже не нашел. И я отредактировал пост - есть другое, более простое решение для настройки цвета строки состояния
Андрей Турковский
1
Отлично. Небольшой комментарий ... Вам нужно открыть файл pubspec.yaml и добавить следующую строку в строке зависимостей : flutter_statusbarcolor: ^ 0.2.3 (последнюю версию можно посмотреть здесь [ pub.dev/packages/flutter_statusbarcolor#-installing-tab -] )
hfunes.com 03
1
@JayTillu нет. Для iOS вы должны использовать flutter_statusbarcolorили устанавливать цвет для каждого AppBarвручную
Андрей Турковский
1
он изменяет фон строки состояния, а не текст самой строки состояния.
Абдулрахман Масуд,
97

Обновление (рекомендуется):

В последней версии 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
)
CopsOnRoad
источник
Я новичок во флаттере и хочу знать, что, если мы поместим эти строки в метод сборки любого виджета? Какая разница?
Bhavnik
Это будет работать и не имеет никакого значения. Только учтите, что цвет будет установлен с параметрами последнего звонящего.
Yaobin Then
Как изменить цвет текста строки состояния при изменении темы приложения со светлой на темную и наоборот? Есть ли какие-нибудь свойства в классе ThemeData?
Vinoth Vino
@VinothVino Извините, но вы не можете задать цвет текста по вашему выбору для элементов строки состояния, все, что вы можете сделать, это изменить brightness, где Brightness.lightотображается черный цвет текста и Brightness.darkотображается белый.
CopsOnRoad
Спасибо за ответ, братан. Как я могу динамически изменять яркость? Я меняю темный режим, он не обновляется должным образом. Если я перезапущу приложение, оно заработает.
Vinoth Vino
46

Вместо часто предлагаемого, SystemChrome.setSystemUIOverlayStyle()который является общесистемным сервисом и не сбрасывается на другом маршруте, вы можете использовать AnnotatedRegion<SystemUiOverlayStyle>виджет, который действует только для виджета, который вы обертываете.

AnnotatedRegion<SystemUiOverlayStyle>(
   value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
  ),
  child: Scaffold(
      ...
  ),
)
Кухнроял
источник
1
Это лучший ответ, так как возвращение к экрану после нажатия приведет к сбросу строки состояния. Впервые об этом упомянул Джорди здесь stackoverflow.com/a/54593164/4033525
Sameer J
1
Я также считаю, что это лучший ответ, если он нам нужен во всем приложении
Аббас
1
Я использую его на одном экране, и он влияет на все остальные экраны приложения. Я использую его на своем первом экране, и, естественно, другие экраны подключены, поэтому он имеет тот же цвет строки состояния, белый, на всех других экранах. Как предотвратить такое поведение? Как заставить его работать только на конкретном эшафоте?
gegobyte
@gegobyte у меня была такая же проблема. я использовал 1 глобальный цвет, который используется в большинстве представлений. Но в определенных представлениях, где требовался другой цвет, я просто повторно использовал тот же виджет, но с другим цветом
Андрис
45

Для тех, кто использует 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(...),
);
Андрей Гордеев
источник
2
Этот метод не позволяет установить точный цвет
kashlo
если вы хотите, чтобы цвет строки состояния соответствовал вашей теме, вы всегда можете использоватьbrightness: Theme.of(context).brightness
Роман Панагет
1
value: SystemUiOverlayStyle.light (или же .dark ) делает то же самое
черт
12

Измените цвет строки состояния, когда вы не используете AppBar

Сначала импортируйте это

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

Чтобы изменить цвет строки состояния, iOSкогда вы используетеSafeArea

Scaffold(
  body: Container(
    color: Colors.red, /* Set your status bar color here */
    child: SafeArea(child: Container(
      /* Add your Widget here */
    )),
  ),
); 
Спросите
источник
Меня поймали, поместив SafeArea перед эшафотом, который не позволял цвету фона эшафота распространяться за строку состояния.
Bulwinkel
8

Я не могу комментировать прямо в ветке, так как у меня еще нет необходимой репутации, но автор спросил следующее:

единственная проблема в том, что фон белый, но часы, беспроводная связь и другой текст и значки тоже белого цвета .. Я не знаю почему !!

Для всех, кто заходит в эту ветку, вот что сработало для меня. Цвет текста в строке состояния определяется постоянной яркости в flutter/material.dart. Чтобы изменить это, настройте SystemChromeрешение так, чтобы настроить текст:

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

Возможные значения Brightnessare Brightness.darkи Brightness.light.

Документация: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html

Сет Чепмен
источник
8

Это сработало для меня:

Служба импорта

import 'package:flutter/services.dart';

Затем добавьте:

@override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarBrightness: Brightness.dark,
    ));
    return MaterialApp(home: Scaffold(
SK7
источник
6

Думаю, это вам поможет:

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
    ));
Омар Алсаеди
источник
5

Это все, что вам нужно знать:

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());
}
Керим Аманов
источник
4

Этого можно добиться в 2 этапа:

  1. Установите цвет строки состояния в соответствии с фоном вашей страницы с помощью пакета FlutterStatusbarcolor.
  2. Установите цвета кнопок строки состояния (батарея, Wi-Fi и т. Д.) С помощью 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()
  }
Сисир
источник
это также проверено для SafeArea в ios?
LOG_TAG
3

в службе импорта файлов main.dart, как показано ниже

  import 'package:flutter/services.dart';

и внутри метода сборки просто добавьте эту строку перед возвратом

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

Как это:

@override
 Widget build(BuildContext context) {
   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: CustomColors.appbarcolor
    ));
    return MaterialApp(
    home: MySplash(),
    theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: CustomColors.appbarcolor,
    ),
  );
 }
Кришна Кумар Джангид
источник
2

Этот тоже будет работать

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
Роберт Апикян
источник
2
 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);
Apurv Thakkar
источник
2

Это, безусловно, лучший способ, он не требует дополнительных плагинов.

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

и назовите это у себя на эшафоте вот так

return Scaffold(
      appBar: emptyAppBar(),
     .
     .
     .
Няз Джафф
источник
1

Сделать это как цвет панели приложений

import 'package:flutter/material.dart';

 Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
  ));
 }
Мухаммад Ашраф
источник
1

Работает как для iOS, так и для Android

import 'package:flutter/services.dart';

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

  return Scaffold();
}
    
MJ Монтес
источник
0
@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}
Ма Марс
источник
3
Пожалуйста, не публикуйте только код в качестве ответа, но также объясните, что делает ваш код и как он решает проблему вопроса. Ответы с объяснением обычно более качественные и с большей вероятностью получат положительные отзывы.
Марк Роттевил
0

У меня были проблемы со всеми упомянутыми ответами, за исключением решения, которое я сделал сам: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green) для представлений, где не добавлен appBar, я просто использую контейнер с фоном, точная высота которого соответствует высоте строки состояния. В этом сценарии каждое представление может иметь разный цвет статуса, и мне не нужно беспокоиться и думать о некоторой логике, что почему-то неправильные представления имеют неправильные цвета.

Андрис
источник
0

Ни одно из существующих решений мне не помогло, потому что я не использую 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.
чертовски
источник
сталкивается с той же проблемой, что и упомянутая выше, но решение не будет работать в Andorid 10
Aditi
0

Я решил это, изменив весь цвет фона следующим образом:

На главном экране:

return Scaffold (

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

Zou
источник
0

Большинство ответов используется 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 */,
  );
}
аксумнемонический
источник