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

Метод 1: использование класса SystemChrome
Класс SystemChrome во Flutter предоставляет метод setSystemUIOverlayStyle, который позволяет нам настраивать внешний вид системных наложений, включая строку состояния. Чтобы сделать строку состояния прозрачной, выполните следующие действия:

import 'package:flutter/services.dart';
void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
  runApp(MyApp());
}

Метод 2: использование плагина FlutterStatusbarcolor
Плагин FlutterStatusbarcolor — это удобный пакет, который упрощает процесс настройки строки состояния во Flutter. Чтобы сделать строку состояния прозрачной с помощью этого плагина, выполните следующие действия:

Шаг 1. Добавьте плагин FlutterStatusbarcolor в файл pubspec.yaml:

dependencies:
  flutter_statusbarcolor: ^0.3.2

Шаг 2. Импортируйте пакет и сделайте прозрачной строку состояния в файле main.dart:

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
void main() {
  FlutterStatusbarcolor.setStatusBarColor(Colors.transparent);
  runApp(MyApp());
}

Метод 3: использование виджета AnnotatedRegion
Виджет AnnotatedRegion — это еще один способ сделать строку состояния прозрачной во Flutter. Это позволяет вам переопределить поведение системных наложений по умолчанию в определенной области вашего приложения. Выполните следующие действия:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Transparent Status Bar'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

В этой статье мы рассмотрели три различных способа сделать строку состояния Android прозрачной во Flutter. Используя класс SystemChrome, плагин FlutterStatusbarcolor или виджет AnnotatedRegion, вы можете добиться визуально привлекательного дизайна и создать более захватывающий пользовательский интерфейс. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего проекта.