Во Flutter строка состояния — это горизонтальная полоса в верхней части экрана, на которой отображается системная информация, такая как уровень заряда батареи, состояние сети и время. По умолчанию значки строки состояния в приложениях Flutter наследуют цвет системных настроек устройства. Однако могут быть случаи, когда вы захотите изменить цвет значка строки состояния, чтобы он соответствовал теме вашего приложения или обеспечил лучший пользовательский опыт. В этой статье мы рассмотрим шесть различных способов добиться этого во Flutter.

Метод 1: использование класса SystemChrome
Класс SystemChrome предоставляет метод setSystemUIOverlayStyle, который позволяет нам изменять цвет значка строки состояния. Мы можем передать ему экземпляр класса SystemUiOverlayStyle, который содержит различные свойства для настройки внешнего вида строки состояния. Вот пример:

import 'package:flutter/services.dart';
void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
    statusBarIconBrightness: Brightness.light,
    // Other properties like statusBarColor can also be customized
  ));
  runApp(MyApp());
}

Метод 2: использование виджета StatusBarBrightness
Flutter предоставляет виджет StatusBarBrightness, который позволяет нам динамически изменять яркость строки состояния внутри поддерева виджетов. Мы можем обернуть корневой виджет нашего приложения с помощью StatusBarBrightness и установить для его свойства яркости значение Brightness.light или Brightness.dark. Вот пример:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StatusBarBrightness(
      brightness: Brightness.light,
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(title: Text("Change Status Bar Icon Color")),
          body: Center(child: Text("Hello World")),
        ),
      ),
    );
  }
}

Метод 3: использование виджета AnnotatedRegion
Виджет AnnotatedRegion позволяет нам переопределить системные наложения, включая строку состояния. Мы можем обернуть корневой виджет нашего приложения с помощью AnnotatedRegion и установить для его свойства value объект SystemUiOverlayStyle. Вот пример:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.dark.copyWith(
          statusBarIconBrightness: Brightness.light,
          // Other properties like statusBarColor can also be customized
        ),
        child: Scaffold(
          appBar: AppBar(title: Text("Change Status Bar Icon Color")),
          body: Center(child: Text("Hello World")),
        ),
      ),
    );
  }
}

Метод 4: использование плагина FlutterStatusbarcolor
Плагин FlutterStatusbarcolor предоставляет простой способ изменить цвет строки состояния и цвет значков в приложениях Flutter. Сначала добавьте плагин в файл pubspec.yaml, а затем с помощью метода FlutterStatusbarcolor.setStatusBarWhiteForegroundустановите белый цвет значка строки состояния. Вот пример:

import 'package:flutter/material.dart';
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
void main() {
  FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
  runApp(MyApp());
}

Метод 5: использование плагина FlutterStatusbarManager
Плагин FlutterStatusbarManager — это еще один вариант изменения цвета значка строки состояния во Flutter. Как и предыдущий плагин, вам необходимо добавить его в файл pubspec.yaml. Затем используйте метод FlutterStatusbarManager.setStyle, чтобы установить цвет значка строки состояния. Вот пример:

import 'package:flutter/material.dart';
import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';
void main() {
  FlutterStatusbarManager.setStyle(StatusBarStyle.DARK_CONTENT);
  runApp(MyApp());
}

Метод 6: использование виджета FlutterSafeArea
Виджет FlutterSafeArea можно использовать для переноса области содержимого вашего приложения и настройки внешнего вида строки состояния. Установив для свойства topзначение true, вы можете сделать значки строки состояния темными. Вот пример:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Change Status Bar Icon Color")),
        body: FlutterSafeArea(
          top: true,
          child: Center(child: Text("Change Status Bar Icon Color")),
        ),
      ),
    );
  }
}

В этой статье мы рассмотрели шесть различных способов изменения цвета значка строки состояния в приложениях Flutter. Мы рассмотрели методы с использованием таких классов, как SystemChrome, StatusBarBrightness, AnnotatedRegion, а также таких плагинов, как FlutterStatusbarcolor и FlutterStatusbarManager. Используя эти методы, вы можете настроить цвет значков строки состояния в соответствии с темой вашего приложения или улучшить взаимодействие с пользователем.

Не забудьте протестировать свое приложение на разных устройствах и в разных версиях Flutter, чтобы обеспечить согласованное поведение. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим потребностям. Приятного кодирования!