Flutter状态栏控制插件status_bar_control的使用

简介

Status Bar Control 是一个Flutter插件，允许开发者在iOS和Android平台上控制状态栏的颜色、样式（主题）、可见性以及透明度属性。此外，它还为Android提供了额外的导航栏控制功能。

该插件基于React Native的状态栏组件，并从优秀的 flutter-screen-theme-plugin 中借鉴了导航栏代码。它已经在iOS 15和Android 12 (API 31)上进行了测试。

安装

添加依赖

首先，在你的pubspec.yaml文件中添加status_bar_control依赖：

dependencies:
  status_bar_control: ^3.2.1

然后运行以下命令来获取并安装插件：

flutter pub get

配置平台特定设置

iOS配置

在Info.plist文件中添加如下配置以确保状态栏外观不受视图控制器影响：

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

Android配置

对于Android API 28及以上版本，如果你的应用需要适应屏幕凹口（cutout），可以在styles.xml中添加以下配置：

<item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="o_mr1">shortEdges</item>

基本用法

导入插件

在你的Dart代码中导入插件：

import 'package:status_bar_control/status_bar_control.dart';

示例应用

下面是一个完整的示例应用程序，演示了如何使用status_bar_control插件的各种方法来控制状态栏和导航栏。

import 'package:flutter/material.dart';
import 'package:status_bar_control/status_bar_control.dart';

void main() => runApp(const StatusBarControlApp());

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

  @override
  _StatusBarControlAppState createState() => _StatusBarControlAppState();
}

class _StatusBarControlAppState extends State<StatusBarControlApp> {
  double? _statusBarHeight = 0.0;
  bool _statusBarColorAnimated = false;
  Color? _statusBarColor = Colors.black;
  double _statusBarOpacity = 1.0;
  bool _statusBarHidden = false;
  StatusBarAnimation _statusBarAnimation = StatusBarAnimation.NONE;
  StatusBarStyle _statusBarStyle = StatusBarStyle.DEFAULT;
  bool _statusBarTranslucent = false;
  bool _loadingIndicator = false;
  bool _fullscreenMode = false;

  bool _navBarColorAnimated = false;
  Color? _navBarColor = Colors.black;
  NavigationBarStyle? _navBarStyle = NavigationBarStyle.DEFAULT;

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    try {
      double? statusBarHeight = await StatusBarControl.getHeight;
      if (!mounted) return;
      setState(() {
        _statusBarHeight = statusBarHeight;
      });
    } on PlatformException {
      // Handle exception
    }
  }

  Widget renderTitle(String text) {
    return Text(text, style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold));
  }

  void updateStatusBar() {
    StatusBarControl.setColor(
      _statusBarColor!.withOpacity(_statusBarOpacity),
      animated: _statusBarColorAnimated,
    );
  }

  void updateNavBar() {
    StatusBarControl.setNavigationBarColor(
      _navBarColor!,
      animated: _navBarColorAnimated,
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Statusbar Control Example')),
        body: SafeArea(
          child: ListView(
            padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 20.0),
            children: <Widget>[
              renderTitle("Status Bar Height: $_statusBarHeight"),
              Divider(height: 25.0),
              renderTitle("Status Bar Color (Android):"),
              SwitchListTile(
                value: _statusBarColorAnimated,
                title: const Text("Animated:"),
                onChanged: (bool value) {
                  setState(() {
                    _statusBarColorAnimated = value;
                    updateStatusBar();
                  });
                },
              ),
              RadioListTile(
                value: Colors.black,
                title: const Text("Black"),
                onChanged: (Color? v) {
                  setState(() {
                    _statusBarColor = v;
                    updateStatusBar();
                  });
                },
                groupValue: _statusBarColor,
              ),
              RadioListTile(
                value: Colors.orange,
                title: const Text("Orange"),
                onChanged: (Color? v) {
                  setState(() {
                    _statusBarColor = v;
                    updateStatusBar();
                  });
                },
                groupValue: _statusBarColor,
              ),
              RadioListTile(
                value: Colors.greenAccent,
                title: const Text("Green"),
                onChanged: (Color? v) {
                  setState(() {
                    _statusBarColor = v;
                    updateStatusBar();
                  });
                },
                groupValue: _statusBarColor,
              ),
              RadioListTile(
                value: Colors.white30,
                title: const Text("White"),
                onChanged: (Color? v) {
                  setState(() {
                    _statusBarColor = v;
                    updateStatusBar();
                  });
                },
                groupValue: _statusBarColor,
              ),
              Slider(
                value: _statusBarOpacity,
                min: 0.0,
                max: 1.0,
                onChanged: (double val) {
                  setState(() {
                    _statusBarOpacity = val;
                    updateStatusBar();
                  });
                },
              ),
              Divider(height: 25.0),
              renderTitle("Status Bar Hidden:"),
              SwitchListTile(
                title: const Text("Hidden:"),
                value: _statusBarHidden,
                onChanged: (bool val) {
                  setState(() {
                    _statusBarHidden = val;
                  });
                  StatusBarControl.setHidden(_statusBarHidden, animation: _statusBarAnimation);
                },
              ),
              RadioListTile(
                value: StatusBarAnimation.NONE,
                title: const Text("NONE"),
                onChanged: (StatusBarAnimation? v) {
                  setState(() {
                    _statusBarAnimation = v!;
                  });
                },
                groupValue: _statusBarAnimation,
              ),
              RadioListTile(
                value: StatusBarAnimation.FADE,
                title: const Text("FADE"),
                onChanged: (StatusBarAnimation? v) {
                  setState(() {
                    _statusBarAnimation = v!;
                  });
                },
                groupValue: _statusBarAnimation,
              ),
              RadioListTile(
                value: StatusBarAnimation.SLIDE,
                title: const Text("SLIDE"),
                onChanged: (StatusBarAnimation? v) {
                  setState(() {
                    _statusBarAnimation = v!;
                  });
                },
                groupValue: _statusBarAnimation,
              ),
              Divider(height: 25.0),
              renderTitle("Status Bar Style:"),
              RadioListTile(
                value: StatusBarStyle.DEFAULT,
                title: const Text("DEFAULT"),
                onChanged: (StatusBarStyle? v) {
                  setState(() {
                    _statusBarStyle = v!;
                  });
                  StatusBarControl.setStyle(v!);
                },
                groupValue: _statusBarStyle,
              ),
              RadioListTile(
                value: StatusBarStyle.LIGHT_CONTENT,
                title: const Text("LIGHT_CONTENT"),
                onChanged: (StatusBarStyle? v) {
                  setState(() {
                    _statusBarStyle = v!;
                  });
                  StatusBarControl.setStyle(v!);
                },
                groupValue: _statusBarStyle,
              ),
              RadioListTile(
                value: StatusBarStyle.DARK_CONTENT,
                title: const Text("DARK_CONTENT"),
                onChanged: (StatusBarStyle? v) {
                  setState(() {
                    _statusBarStyle = v!;
                  });
                  StatusBarControl.setStyle(v!);
                },
                groupValue: _statusBarStyle,
              ),
              Divider(height: 25.0),
              renderTitle("Status Bar Translucent (Android):"),
              SwitchListTile(
                title: const Text("Translucent:"),
                value: _statusBarTranslucent,
                onChanged: (bool val) {
                  setState(() {
                    _statusBarTranslucent = val;
                  });
                  StatusBarControl.setTranslucent(_statusBarTranslucent);
                },
              ),
              Divider(height: 25.0),
              renderTitle("Status Bar Activity Indicator (iOS):"),
              SwitchListTile(
                title: const Text("Indicator:"),
                value: _loadingIndicator,
                onChanged: (bool val) {
                  setState(() {
                    _loadingIndicator = val;
                  });
                  StatusBarControl.setNetworkActivityIndicatorVisible(_loadingIndicator);
                },
              ),
              Divider(height: 25.0),
              renderTitle("Navigation Bar Color (Android):"),
              SwitchListTile(
                value: _navBarColorAnimated,
                title: const Text("Animated:"),
                onChanged: (bool value) {
                  setState(() {
                    _navBarColorAnimated = value;
                    updateNavBar();
                  });
                },
              ),
              RadioListTile(
                value: Colors.black,
                title: const Text("Black"),
                onChanged: (Color? v) {
                  setState(() {
                    _navBarColor = v;
                    updateNavBar();
                  });
                },
                groupValue: _navBarColor,
              ),
              RadioListTile(
                value: Colors.orange,
                title: const Text("Orange"),
                onChanged: (Color? v) {
                  setState(() {
                    _navBarColor = v;
                    updateNavBar();
                  });
                },
                groupValue: _navBarColor,
              ),
              RadioListTile(
                value: Colors.greenAccent,
                title: const Text("Green"),
                onChanged: (Color? v) {
                  setState(() {
                    _navBarColor = v;
                    updateNavBar();
                  });
                },
                groupValue: _navBarColor,
              ),
              RadioListTile(
                value: Colors.white12,
                title: const Text("white"),
                onChanged: (Color? v) {
                  setState(() {
                    _navBarColor = v;
                    updateNavBar();
                  });
                },
                groupValue: _navBarColor,
              ),
              Divider(height: 25.0),
              renderTitle("Navigation Bar Style (Android):"),
              RadioListTile(
                value: NavigationBarStyle.DEFAULT,
                title: const Text("DEFAULT"),
                onChanged: (NavigationBarStyle? v) {
                  setState(() {
                    _navBarStyle = v!;
                  });
                  StatusBarControl.setNavigationBarStyle(v!);
                },
                groupValue: _navBarStyle,
              ),
              RadioListTile(
                value: NavigationBarStyle.LIGHT,
                title: const Text("LIGHT"),
                onChanged: (NavigationBarStyle? v) {
                  setState(() {
                    _navBarStyle = v!;
                  });
                  StatusBarControl.setNavigationBarStyle(v!);
                },
                groupValue: _navBarStyle,
              ),
              RadioListTile(
                value: NavigationBarStyle.DARK,
                title: const Text("DARK"),
                onChanged: (NavigationBarStyle? v) {
                  setState(() {
                    _navBarStyle = v!;
                  });
                  StatusBarControl.setNavigationBarStyle(v!);
                },
                groupValue: _navBarStyle,
              ),
              Divider(height: 25.0),
              renderTitle("Fullscreen mode:"),
              SwitchListTile(
                title: const Text("Fullscreen:"),
                value: _fullscreenMode,
                onChanged: (bool val) {
                  setState(() {
                    _fullscreenMode = val;
                  });
                  StatusBarControl.setFullscreen(_fullscreenMode);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

此示例程序展示了如何通过UI控件动态改变状态栏和导航栏的各种属性。你可以根据实际需求调整这些设置，以满足不同的应用场景。

更多关于Flutter状态栏控制插件status_bar_control的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 1楼•2 天前

更多关于Flutter状态栏控制插件status_bar_control的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用Flutter的status_bar_control插件来控制状态栏的示例代码。status_bar_control插件允许你更改状态栏的颜色、样式和亮度等属性。首先，确保你已经在pubspec.yaml文件中添加了依赖：

dependencies:
  flutter:
    sdk: flutter
  status_bar_control: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来是一个简单的示例，展示如何使用status_bar_control插件：

import 'package:flutter/material.dart';
import 'package:status_bar_control/status_bar_control.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Status Bar Control Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: StatusBarControlDemo(),
    );
  }
}

class StatusBarControlDemo extends StatefulWidget {
  @override
  _StatusBarControlDemoState createState() => _StatusBarControlDemoState();
}

class _StatusBarControlDemoState extends State<StatusBarControlDemo> {
  @override
  void initState() {
    super.initState();
    // 设置状态栏颜色为白色，状态栏样式为亮色模式
    StatusBarControl.setStatusBarColor(Colors.white, StatusBarStyle.lightContent);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Status Bar Control Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                // 设置状态栏颜色为黑色，状态栏样式为暗色模式
                StatusBarControl.setStatusBarColor(Colors.black, StatusBarStyle.darkContent);
              },
              child: Text('Set Status Bar to Dark'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 设置状态栏颜色为透明，状态栏样式为跟随系统主题
                StatusBarControl.setStatusBarColor(Colors.transparent, StatusBarStyle.defaultContent);
              },
              child: Text('Set Status Bar to Transparent'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事情：

在initState方法中，使用StatusBarControl.setStatusBarColor方法设置初始状态栏颜色和样式。
创建了两个按钮，分别用于更改状态栏的颜色和样式。

请注意，StatusBarControl.setStatusBarColor方法的第一个参数是状态栏的颜色，第二个参数是状态栏的样式（StatusBarStyle.lightContent、StatusBarStyle.darkContent或StatusBarStyle.defaultContent）。

运行这个示例应用，你应该能够看到点击按钮后状态栏颜色和样式的变化。这展示了如何使用status_bar_control插件来动态控制Flutter应用中的状态栏。