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

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

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

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

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

В последней версии 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
)

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

AnnotatedRegion<SystemUiOverlayStyle>(
   value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
  ),
  child: Scaffold(
      ...
  ),
)

Для тех, кто использует 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(...),
);

Измените цвет строки состояния, когда вы не используете 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 */
    )),
  ),
); 

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

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

Для всех, кто заходит в эту ветку, вот что сработало для меня. Цвет текста в строке состояния определяется постоянной яркости в 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

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

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

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 этапа:

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

в службе импорта файлов 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,
    ),
  );
 }

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

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

 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 (

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

Большинство ответов используется 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/