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

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

现在由于lorenzOliveto的努力，该插件已经兼容了AndroidX。

Flutter Statusbar Manager允许你在iOS和Android上控制状态栏的颜色、样式（主题）、可见性以及半透明属性。此外，对于Android还提供了额外的功能来控制导航栏。

该插件基于React Native的StatusBar组件。

导航栏代码取自优秀的flutter-screen-theme-plugin。

示例演示：

Android状态栏示例

Android隐藏状态栏示例

Android导航栏示例

iPhone 8示例

iPhone X示例

安装

在你的pubspec.yaml文件中添加以下依赖项：

flutter_statusbar_manager: ^lastest_version

然后在项目根目录运行以下命令：

flutter packages get

基本用法

创建一个新的Flutter项目：

flutter create myapp

在iOS中，在Info.plist文件中添加以下内容：

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

在lib/main.dart中导入插件：

import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';

方法

setColor

平台：Android

setColor方法将设置状态栏背景颜色。在iOS中，该方法始终返回成功的Future。

参数 类型 默认值 是否必需 描述
color Color none 是 要设置为背景的颜色，可以使用带有不透明度的颜色。
animated bool false 否 是否动画化颜色更改。

示例代码：

await FlutterStatusbarManager.setColor(Colors.green, animated:true);

setTranslucent

平台：Android

setTranslucent方法将设置状态栏是否为半透明。在iOS中，该方法始终返回成功的Future。

参数 类型 默认值 是否必需 描述
translucent bool none 是 状态栏是否为半透明。

示例代码：

await FlutterStatusbarManager.setTranslucent(true);

setHidden

平台：Android, iOS

setHidden方法将隐藏状态栏。

参数 类型 默认值 是否必需 描述
hidden bool none 是 是否隐藏状态栏。
animation StatusBarAnimation StatusBarAnimation.NONE 否 隐藏时使用的动画（仅限iOS）。

示例代码：

await FlutterStatusbarManager.setHidden(true, animation:StatusBarAnimation.SLIDE);

setStyle

平台：Android, iOS

setStyle方法将设置状态栏的主题。

参数 类型 默认值 是否必需 描述
style StatusBarStyle none 是 要使用的状态栏主题，可以是light、dark或default。

示例代码：

await FlutterStatusbarManager.setStyle(StatusBarStyle.DARK_CONTENT);

setNetworkActivityIndicatorVisible

平台：iOS

setNetworkActivityIndicatorVisible方法将显示或隐藏网络活动指示器。在Android中，该方法始终返回成功的Future。

参数 类型 默认值 是否必需 描述
visible bool none 是 是否显示网络活动指示器。

示例代码：

await FlutterStatusbarManager.setNetworkActivityIndicatorVisible(true);

getHeight

平台：Android, iOS

getHeight方法将返回状态栏的高度。

示例代码：

double height = await FlutterStatusbarManager.getHeight;

额外方法

setNavigationBarColor

平台：Android

setNavigationBarColor方法将设置导航栏背景颜色。在iOS中，该方法始终返回成功的Future。

参数 类型 默认值 是否必需 描述
color Color none 是 要设置为背景的颜色。
animated bool false 否 是否动画化颜色更改。

示例代码：

await FlutterStatusbarManager.setNavigationBarColor(Colors.green, animated:true);

setNavigationBarStyle

平台：Android

setNavigationBarStyle方法将设置导航栏主题。

参数 类型 默认值 是否必需 描述
style NavigationBarStyle none 是 要使用的导航栏主题，可以是light、dark或default。

示例代码：

await FlutterStatusbarManager.setNavigationBarStyle(NavigationBarStyle.DARK);

setFullscreen

平台：Android, iOS

setFullscreen方法将设置应用程序进入全屏模式。

参数 类型 默认值 是否必需 描述
fullscreen bool none 是 是否设置应用程序为全屏模式。

示例代码：

await FlutterStatusbarManager.setNavigationBarStyle(NavigationBarStyle.DARK);

枚举

StatusBarStyle

  • StatusBarStyle.DEFAULT
  • StatusBarStyle.LIGHT_CONTENT
  • StatusBarStyle.DARK_CONTENT

StatusBarAnimation

  • StatusBarAnimation.NONE
  • StatusBarAnimation.FADE
  • StatusBarAnimation.SLIDE

NavigationBarStyle

  • NavigationBarStyle.DEFAULT
  • NavigationBarStyle.DARK
  • NavigationBarStyle.LIGHT

状态栏

兼容性：Android (6.0+) & iOS

在Android上，它只会在Android 6.0 (Marshmallow)及以上版本的设备上工作。

导航栏

兼容性：Android only

  • Android 5.0 (Lollipop)及以上：颜色
  • Android 8.0 (Oreo)及以上：样式（深色/浅色）

示例代码

以下是完整的示例代码：

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

import 'package:flutter/services.dart';
import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  MyApp();

  factory MyApp.forDesignTime() {
    // TODO: add arguments
    return new MyApp();
  }

  [@override](/user/override)
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  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](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，因此我们在异步方法中初始化。
  Future<void> initPlatformState() async {
    double statusBarHeight;
    // 平台消息可能会失败，所以我们使用try/catch捕获PlatformException。
    try {
      statusBarHeight = await FlutterStatusbarManager.getHeight;
    } on PlatformException {
      statusBarHeight = 0.0;
    }
    if (!mounted) return;

    setState(() {
      _statusBarHeight = statusBarHeight;
    });
  }

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

  void colorBarChanged(Color val) {
    this.setState(() {
      _statusBarColor = val;
    });
    updateStatusBar();
  }

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

  void statusBarAnimationChanged(StatusBarAnimation val) {
    this.setState(() {
      _statusBarAnimation = val;
    });
  }

  void statusBarStyleChanged(StatusBarStyle val) {
    this.setState(() {
      _statusBarStyle = val;
    });
    FlutterStatusbarManager.setStyle(val);
  }

  void colorNavBarChanged(Color val) {
    this.setState(() {
      _navBarColor = val;
    });
    updateNavBar();
  }

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

  void navigationBarStyleChanged(NavigationBarStyle val) {
    this.setState(() {
      _navBarStyle = val;
    });
    FlutterStatusbarManager.setNavigationBarStyle(val);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Statusbar Manager example'),
        ),
        body: new Container(
          child: new Scrollbar(
            child: new ListView(
              padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 20.0),
              children: <Widget>[
                renderTitle("Status Bar Height: $_statusBarHeight"),
                Divider(height: 25.0),
                renderTitle("Status Bar Color:"),
                SwitchListTile(
                  value: _statusBarColorAnimated,
                  title: new Text("Animated:"),
                  onChanged: (bool value) {
                    this.setState(() {
                      _statusBarColorAnimated = value;
                    });
                  },
                ),
                Text("Color:"),
                RadioListTile(
                    value: Colors.black,
                    title: Text("Black"),
                    onChanged: colorBarChanged,
                    dense: true,
                    groupValue: _statusBarColor),
                RadioListTile(
                    value: Colors.orange,
                    title: Text("Orange"),
                    onChanged: colorBarChanged,
                    dense: true,
                    groupValue: _statusBarColor),
                RadioListTile(
                    value: Colors.greenAccent,
                    title: Text("Green"),
                    onChanged: colorBarChanged,
                    dense: true,
                    groupValue: _statusBarColor),
                RadioListTile(
                    value: Colors.white30,
                    title: Text("White"),
                    onChanged: colorBarChanged,
                    dense: true,
                    groupValue: _statusBarColor),
                Text("Opacity:"),
                Slider(
                  value: _statusBarOpacity,
                  min: 0.0,
                  max: 1.0,
                  onChanged: (double val) {
                    this.setState(() {
                      _statusBarOpacity = val;
                    });
                    updateStatusBar();
                  },
                ),
                Divider(height: 25.0),
                renderTitle("Status Bar Hidden:"),
                SwitchListTile(
                  title: new Text("Hidden:"),
                  value: _statusBarHidden,
                  onChanged: (bool val) {
                    this.setState(() {
                      _statusBarHidden = val;
                    });
                    FlutterStatusbarManager.setHidden(_statusBarHidden,
                        animation: _statusBarAnimation);
                  },
                ),
                Text("Animation:"),
                RadioListTile(
                    value: StatusBarAnimation.NONE,
                    title: Text("NONE"),
                    onChanged: statusBarAnimationChanged,
                    dense: true,
                    groupValue: _statusBarAnimation),
                RadioListTile(
                    value: StatusBarAnimation.FADE,
                    title: Text("FADE"),
                    onChanged: statusBarAnimationChanged,
                    dense: true,
                    groupValue: _statusBarAnimation),
                RadioListTile(
                    value: StatusBarAnimation.SLIDE,
                    title: Text("SLIDE"),
                    onChanged: statusBarAnimationChanged,
                    dense: true,
                    groupValue: _statusBarAnimation),
                Divider(height: 25.0),
                renderTitle("Status Bar Style:"),
                RadioListTile(
                    value: StatusBarStyle.DEFAULT,
                    title: Text("DEFAULT"),
                    onChanged: statusBarStyleChanged,
                    dense: true,
                    groupValue: _statusBarStyle),
                RadioListTile(
                    value: StatusBarStyle.LIGHT_CONTENT,
                    title: Text("LIGHT_CONTENT"),
                    onChanged: statusBarStyleChanged,
                    dense: true,
                    groupValue: _statusBarStyle),
                RadioListTile(
                    value: StatusBarStyle.DARK_CONTENT,
                    title: Text("DARK_CONTENT"),
                    onChanged: statusBarStyleChanged,
                    dense: true,
                    groupValue: _statusBarStyle),
                Divider(height: 25.0),
                renderTitle("Status Bar Translucent:"),
                SwitchListTile(
                  title: new Text("Translucent:"),
                  value: _statusBarTranslucent,
                  onChanged: (bool val) {
                    this.setState(() {
                      _statusBarTranslucent = val;
                    });
                    FlutterStatusbarManager
                        .setTranslucent(_statusBarTranslucent);
                  },
                ),
                Divider(height: 25.0),
                renderTitle("Status Bar Activity Indicator:"),
                SwitchListTile(
                  title: new Text("Indicator:"),
                  value: _loadingIndicator,
                  onChanged: (bool val) {
                    this.setState(() {
                      _loadingIndicator = val;
                    });
                    FlutterStatusbarManager
                        .setNetworkActivityIndicatorVisible(_loadingIndicator);
                  },
                ),
                Divider(height: 25.0),
                renderTitle("Navigation Bar Color:"),
                SwitchListTile(
                  value: _navBarColorAnimated,
                  title: new Text("Animated:"),
                  onChanged: (bool value) {
                    this.setState(() {
                      _navBarColorAnimated = value;
                    });
                  },
                ),
                Text("Color:"),
                RadioListTile(
                    value: Colors.black,
                    title: Text("Black"),
                    onChanged: colorNavBarChanged,
                    dense: true,
                    groupValue: _navBarColor),
                RadioListTile(
                    value: Colors.orange,
                    title: Text("Orange"),
                    onChanged: colorNavBarChanged,
                    dense: true,
                    groupValue: _navBarColor),
                RadioListTile(
                    value: Colors.greenAccent,
                    title: Text("Green"),
                    onChanged: colorNavBarChanged,
                    dense: true,
                    groupValue: _navBarColor),
                RadioListTile(
                    value: Colors.white12,
                    title: Text("white"),
                    onChanged: colorNavBarChanged,
                    dense: true,
                    groupValue: _navBarColor),
                Divider(height: 25.0),
                renderTitle("Navigation Bar Style:"),
                RadioListTile(
                    value: NavigationBarStyle.DEFAULT,
                    title: Text("DEFAULT"),
                    onChanged: navigationBarStyleChanged,
                    dense: true,
                    groupValue: _navBarStyle),
                RadioListTile(
                    value: NavigationBarStyle.LIGHT,
                    title: Text("LIGHT"),
                    onChanged: navigationBarStyleChanged,
                    dense: true,
                    groupValue: _navBarStyle),
                RadioListTile(
                    value: NavigationBarStyle.DARK,
                    title: Text("DARK"),
                    onChanged: navigationBarStyleChanged,
                    dense: true,
                    groupValue: _navBarStyle),
                Divider(height: 25.0),
                renderTitle("Fullscreen mode:"),
                SwitchListTile(
                  title: new Text("Fullscreen:"),
                  value: _fullscreenMode,
                  onChanged: (bool val) {
                    this.setState(() {
                      _fullscreenMode = val;
                    });
                    FlutterStatusbarManager.setFullscreen(_fullscreenMode);
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_statusbar_manager 是一个用于管理 Flutter 应用中状态栏的插件。它允许你动态地更改状态栏的颜色、样式、可见性等属性。以下是如何使用 flutter_statusbar_manager 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_statusbar_manager 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_statusbar_manager: ^2.0.0 # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 flutter_statusbar_manager 包：

import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';

3. 使用插件

flutter_statusbar_manager 提供了多种方法来管理状态栏。以下是一些常见的使用示例：

设置状态栏颜色

await FlutterStatusbarManager.setColor(Colors.blue);

设置状态栏透明度

await FlutterStatusbarManager.setTranslucent(true);

设置状态栏样式（亮色或暗色）

await FlutterStatusbarManager.setStyle(StatusBarStyle.LIGHT_CONTENT); // 亮色
await FlutterStatusbarManager.setStyle(StatusBarStyle.DARK_CONTENT);  // 暗色

设置状态栏隐藏或显示

await FlutterStatusbarManager.hide(); // 隐藏状态栏
await FlutterStatusbarManager.show(); // 显示状态栏

设置状态栏图标颜色（仅限 Android）

await FlutterStatusbarManager.setNavigationBarColor(Colors.white);
await FlutterStatusbarManager.setNavigationBarStyle(StatusBarStyle.LIGHT_CONTENT);

获取状态栏高度

double statusBarHeight = await FlutterStatusbarManager.getHeight;

4. 完整示例

以下是一个完整的示例，展示了如何使用 flutter_statusbar_manager 插件：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 设置状态栏颜色为蓝色
  await FlutterStatusbarManager.setColor(Colors.blue);
  
  // 设置状态栏样式为亮色
  await FlutterStatusbarManager.setStyle(StatusBarStyle.LIGHT_CONTENT);
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Statusbar Manager Example'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}
回到顶部