Flutter状态栏管理插件plugin_statusbar的使用

简介

plugin_statusbar 是一个用于管理 Flutter 应用状态栏和导航栏颜色的插件。它允许开发者动态更改状态栏和导航栏的颜色，并支持设置文字前景色以确保可读性。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 plugin_statusbar 依赖：

dependencies:
  plugin_statusbar: ^0.0.1

然后运行以下命令以更新依赖：

flutter pub get

2. 初始化插件

在应用启动时初始化插件并监听生命周期事件，以便在应用恢复时同步状态栏和导航栏的颜色。

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
  }

  [@override](/user/override)
  void dispose() {
    WidgetsBinding.instance?.removeObserver(this);
    super.dispose();
  }

  [@override](/user/override)
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      // 恢复时同步状态栏和导航栏颜色
      PluginStatusbar.setStatusBarWhiteForeground(true);
      PluginStatusbar.setNavigationBarWhiteForeground(true);
    }
    super.didChangeAppLifecycleState(state);
  }
}

3. 更改状态栏颜色

通过调用 PluginStatusbar.setStatusBarColor 方法更改状态栏颜色，并根据颜色亮度决定文字前景色。

Future<void> changeStatusColor(Color color) async {
  try {
    await PluginStatusbar.setStatusBarColor(color, animate: true);
    if (useWhiteForeground(color)) {
      PluginStatusbar.setStatusBarWhiteForeground(true);
    } else {
      PluginStatusbar.setStatusBarWhiteForeground(false);
    }
  } on PlatformException catch (e) {
    debugPrint(e.toString());
  }
}

4. 更改导航栏颜色（仅限 Android）

导航栏颜色的更改与状态栏类似，但需要确保设备为 Android 平台。

Future<void> changeNavigationColor(Color color) async {
  try {
    await PluginStatusbar.setNavigationBarColor(color, animate: true);
  } on PlatformException catch (e) {
    debugPrint(e.toString());
  }
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用 plugin_statusbar 动态更改状态栏和导航栏的颜色。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:plugin_statusbar/plugin_statusbar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  Color _randomStatusColor = Colors.black;
  Color _randomNavigationColor = Colors.black;

  bool? _useWhiteStatusBarForeground;
  bool? _useWhiteNavigationBarForeground;

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
  }

  [@override](/user/override)
  void dispose() {
    WidgetsBinding.instance?.removeObserver(this);
    super.dispose();
  }

  [@override](/user/override)
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      if (_useWhiteStatusBarForeground != null) {
        PluginStatusbar.setStatusBarWhiteForeground(_useWhiteStatusBarForeground!);
      }
      if (_useWhiteNavigationBarForeground != null) {
        PluginStatusbar.setNavigationBarWhiteForeground(_useWhiteNavigationBarForeground!);
      }
    }
    super.didChangeAppLifecycleState(state);
  }

  Future<void> changeStatusColor(Color color) async {
    try {
      await PluginStatusbar.setStatusBarColor(color, animate: true);
      if (useWhiteForeground(color)) {
        PluginStatusbar.setStatusBarWhiteForeground(true);
        _useWhiteStatusBarForeground = true;
      } else {
        PluginStatusbar.setStatusBarWhiteForeground(false);
        _useWhiteStatusBarForeground = false;
      }
    } on PlatformException catch (e) {
      debugPrint(e.toString());
    }
  }

  Future<void> changeNavigationColor(Color color) async {
    try {
      await PluginStatusbar.setNavigationBarColor(color, animate: true);
    } on PlatformException catch (e) {
      debugPrint(e.toString());
    }
  }

  bool useWhiteForeground(Color color) {
    final brightness = ThemeData.estimateBrightnessForColor(color);
    return brightness == Brightness.dark;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter statusbar color plugin example'),
            bottom: const TabBar(
              tabs: [
                Tab(text: 'Statusbar'),
                Tab(text: 'Navigationbar(android only)'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () => PluginStatusbar.getStatusBarColor().then((color) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text(color.toString()),
                          backgroundColor: color,
                          duration: const Duration(milliseconds: 200),
                        ),
                      );
                    }),
                    child: const Text('Show Statusbar Color'),
                  ),
                  ElevatedButton(
                    onPressed: () => changeStatusColor(Colors.transparent),
                    child: const Text('Transparent'),
                  ),
                  ElevatedButton(
                    onPressed: () => changeStatusColor(Colors.amberAccent),
                    child: const Text('Amber Accent'),
                  ),
                  ElevatedButton(
                    onPressed: () => changeStatusColor(Colors.tealAccent),
                    child: const Text('Teal Accent'),
                  ),
                  ElevatedButton(
                    onPressed: () => PluginStatusbar.setStatusBarWhiteForeground(true),
                    child: const Text('Light Foreground'),
                  ),
                  ElevatedButton(
                    onPressed: () => PluginStatusbar.setStatusBarWhiteForeground(false),
                    child: const Text('Dark Foreground'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Random rnd = Random();
                      Color color = Color.fromARGB(
                        255,
                        rnd.nextInt(255),
                        rnd.nextInt(255),
                        rnd.nextInt(255),
                      );
                      changeStatusColor(color);
                      setState(() => _randomStatusColor = color);
                    },
                    child: Text(
                      'Random Color',
                      style: TextStyle(
                        color: useWhiteForeground(_randomStatusColor) ? Colors.white : Colors.black,
                      ),
                    ),
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(_randomStatusColor),
                    ),
                  ),
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () => PluginStatusbar.getNavigationBarColor().then((color) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text(color.toString()),
                          backgroundColor: color,
                          duration: const Duration(milliseconds: 200),
                        ),
                      );
                    }),
                    child: const Text('Show Navigationbar Color'),
                  ),
                  ElevatedButton(
                    onPressed: () => changeNavigationColor(Colors.green[400]!),
                    child: const Text('Green-400'),
                  ),
                  ElevatedButton(
                    onPressed: () => changeNavigationColor(Colors.lightBlue[100]!),
                    child: const Text('LightBlue-100'),
                  ),
                  ElevatedButton(
                    onPressed: () => changeNavigationColor(Colors.cyanAccent[200]!),
                    child: const Text('CyanAccent-200'),
                  ),
                  ElevatedButton(
                    onPressed: () => PluginStatusbar.setNavigationBarWhiteForeground(true),
                    child: const Text('Light Foreground'),
                  ),
                  ElevatedButton(
                    onPressed: () => PluginStatusbar.setNavigationBarWhiteForeground(false),
                    child: const Text('Dark Foreground'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Random rnd = Random();
                      Color color = Color.fromARGB(
                        255,
                        rnd.nextInt(255),
                        rnd.nextInt(255),
                        rnd.nextInt(255),
                      );
                      setState(() => _randomNavigationColor = color);
                      changeNavigationColor(color);
                    },
                    child: Text(
                      'Random Color',
                      style: TextStyle(
                        color: useWhiteForeground(_randomNavigationColor) ? Colors.white : Colors.black,
                      ),
                    ),
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(_randomNavigationColor),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}