Як змінити колір рядка стану в 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,
    ));

Ваші можливі значення для Brightnessє 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.

Я вирішив це, змінивши весь колір фону наступним чином:

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

повернути лісок (

  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/