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

Метод 1: использование класса SystemChrome
Класс SystemChrome во Flutter обеспечивает доступ к функциям системного уровня, включая строку состояния. Вы можете использовать метод SystemChrome.setSystemUIOverlayStyle(), чтобы изменить цвет строки состояния. Вот пример:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.blue, // Set your desired color here
    ));
    return MaterialApp(
      title: 'Flutter Status Bar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Status Bar Demo'),
        ),
        body: Center(
          child: Text('Customized Status Bar Color'),
        ),
      ),
    );
  }
}

Метод 2: использование пакета flutter_statusbarcolor
Пакет flutter_statusbarcolorпредоставляет простой способ изменить цвет строки состояния. Сначала добавьте пакет в файл pubspec.yaml, а затем используйте библиотеку flutter_statusbarcolor, чтобы установить нужный цвет. Вот пример:

import 'package:flutter/material.dart';
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.blue); // Set your desired color here
    return MaterialApp(
      title: 'Flutter Status Bar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Status Bar Demo'),
        ),
        body: Center(
          child: Text('Customized Status Bar Color'),
        ),
      ),
    );
  }
}

Метод 3: использование виджета AnnotatedRegion
Виджет AnnotatedRegion позволяет переопределить цвет строки состояния системы в определенном поддереве виджета. Оберните свое приложение или любой конкретный виджет виджетом AnnotatedRegion и укажите желаемый цвет строки состояния. Вот пример:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Status Bar Demo',
      home: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
          statusBarColor: Colors.blue, // Set your desired color here
        ),
        child: Scaffold(
          appBar: AppBar(
            title: Text('Status Bar Demo'),
          ),
          body: Center(
            child: Text('Customized Status Bar Color'),
          ),
        ),
      ),
    );
  }
}

В этой статье мы рассмотрели три различных метода настройки цвета строки состояния во Flutter. Для достижения этой настройки вы можете использовать класс SystemChrome, пакет flutter_statusbarcolor или виджет AnnotatedRegion. Выберите метод, который соответствует вашим требованиям, и создайте визуально привлекательный пользовательский интерфейс.