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

Метод 1. Использование класса SystemChrome

Первый метод предполагает использование класса SystemChrome из среды Flutter. Этот класс позволяет вам изменять настройки системного уровня, включая цвет панели уведомлений. Вот пример того, как можно изменить цвет панели уведомлений с помощью SystemChrome:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Change the color of the notification bar
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.blue, // Set your desired color here
    ));
    return MaterialApp(
      title: 'Flutter Notification Bar Color',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Notification Bar Color'),
      ),
      body: Center(
        child: Text(
          'Change the color of the notification bar!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Метод 2: использование пакета flutter_statusbarcolor

Второй метод предполагает использование стороннего пакета под названием 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) {
    // Change the color of the notification bar
    FlutterStatusbarcolor.setStatusBarColor(Colors.blue); // Set your desired color here
    return MaterialApp(
      title: 'Flutter Notification Bar Color',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Notification Bar Color'),
      ),
      body: Center(
        child: Text(
          'Change the color of the notification bar!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Метод 3. Использование виджета AnnotatedRegion

Третий метод предполагает использование виджета AnnotatedRegion, предоставленного Flutter. Этот виджет позволяет вам переопределить настройки системного пользовательского интерфейса по умолчанию для определенного региона вашего приложения. Вот пример того, как можно изменить цвет панели уведомлений с помощью виджета AnnotatedRegion:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Notification Bar Color',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.blue, // Set your desired color here
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Notification Bar Color'),
        ),
        body: Center(
          child: Text(
            'Change the color of the notification bar!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

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