搜尋套件、儲存庫與 APP 分類

套件詳情v2.0.0

flutter_statusbar_manager

Flutter 狀態列管理員,讓您可以在 iOS 和 Android 上控制狀態列的顏色、樣式(主題)、可見性以及半透明屬性。

近 30 天下載
100
喜歡數
123
Pub 分數
40

安裝套件

flutter pub add flutter_statusbar_manager

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

Flutter Statusbar Manager 是一個跨平台套件,可於 iOS 與 Android 裝置上自訂狀態列。它允許控制狀態列的顏色、外觀(淺色或深色主題)、可見性與半透明度。透過簡單的 API,確保跨平台的一致性使用者介面行為,非常適合需要沉浸式或品牌化狀態列設計的應用程式。此套件可透過 pub.dev 隨意整合至 Flutter 專案中,並獲得活躍的社群支援。

適用情境

  • 自訂狀態欄顏色以進行品牌化
  • 創建沉浸式的全螢幕體驗
  • 根據主題調整狀態欄樣式
  • 管理全螢幕模式下的狀態欄可見性
  • 確保 iOS 和 Android 上的使用者介面一致
  • 啟用半透明狀態欄以實現現代設計

主要特色

  • 跨平台相容性(iOS 與 Android)
  • 狀態欄顏色控制
  • 切換狀態欄可見性
  • 支援淺色/深色狀態欄主題
  • 半透明狀態欄配置
  • 簡單、直覺的 API

適合對象

  • 尋求狀態欄自訂的App開發者
  • 設計實現沉浸式使用者介面的設計師
  • 需要平台特定狀態欄調整的項目
  • 具有動態主題需求的應用程式
  • 同時針對 iOS 和 Android 開發的開發者

使用建議

  • 某些設備需要平台特定的權限
  • 僅限狀態欄屬性
  • 可能與其他狀態欄外掛衝突
  • 不適用於複雜的導航疊加層
  • 最好在仔細考慮使用者體驗的情況下使用

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

flutter_statusbar_manager

Now compatible with AndroidX thanks to https://github.com/lorenzOliveto

Flutter Statusbar Manager, lets you control the status bar color, style (theme), visibility, and translucent properties across iOS and Android. With some added bonus for Android to control the Navigation Bar.

This plugin is based on React Native's StatusBar component.

The Navigation Bar code was taken from the awesome flutter-screen-theme-plugin.

Demo App Android Status Bar

Demo App Android Status Bar hide

Demo App Android Nav Bar

Demo App Iphone 8

Demo App Iphone X

Installation

flutter_statusbar_manager : ^lastest_version

to your pubspec.yaml ,and run

flutter packages get

in your project's root directory.

Basic Usage

Create a new project with command

flutter create myapp

On iOS add the following in your Info.plist:

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

Import the plugin in lib/main.dart like this:

import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';

Methods

setColor
Platforms: Android

The setColor method will set the status bar background color. On iOS the method will always return a successful Future.

Parameter Type Default Required Description
color Color none Yes The color to be set as background, can use colors with opacity.
animated bool false No Whether or not to animate the color change.
await FlutterStatusbarManager.setColor(Colors.green, animated:true);
setTranslucent
Platforms: Android

The setTranslucent method will set the status bar translucent status. On iOS the methods will always return a successful Future.

Parameter Type Default Required Description
translucent bool none Yes Whether or not the status bar will be translucent.
await FlutterStatusbarManager.setTranslucent(true);
setHidden
Platforms: Android, iOS

The setHidden will hide the status bar.

Parameter Type Default Required Description
hidden bool none Yes Whether or not to hide the status bar.
animation StatusBarAnimation StatusBarAnimation.NONE No The hiding animation to use (iOS only).
await FlutterStatusbarManager.setHidden(true, animation:StatusBarAnimation.SLIDE);
setStyle
Platforms: Android, iOS

The setStyle method will set the status bar theme.

Parameter Type Default Required Description
style StatusBarStyle none Yes The status bar theme to use for styling, can either be light, dark, default.
await FlutterStatusbarManager.setStyle(StatusBarStyle.DARK_CONTENT);
setNetworkActivityIndicatorVisible
Platforms: iOS

The setNetworkActivityIndicatorVisible method will show or hide the activity indicator, On Android the method will always return a successful Future.

Parameter Type Default Required Description
visible bool none Yes Whether or not to show the activity indicator.
await FlutterStatusbarManager.setNetworkActivityIndicatorVisible(true);
getHeight
Platforms: Android, iOS

The getHeight getter method will return the height of the status bar.

double height = await FlutterStatusbarManager.getHeight

Bonus Methods

setNavigationBarColor
Platforms: Android

The setNavigationBarColor method will set the navigation bar background color. On iOS the method will always return a successful Future.

Parameter Type Default Required Description
color Color none Yes The color to be set as background.
animated bool false No Whether or not to animate the color change.
await FlutterStatusbarManager.setNavigationBarColor(Colors.green, animated:true);
setNavigationBarStyle
Platforms: Android

The setNavigationBarStyle method will set the navigation bar theme.

Parameter Type Default Required Description
style NavigationBarStyle none Yes The navigation bar theme to use for styling, can either be light, dark, default.
await FlutterStatusbarManager.setNavigationBarStyle(NavigationBarStyle.DARK);
setFullscreen
Platforms: Android, iOS

The setFullscreen method will set the app in fullscreen mode.

Parameter Type Default Required Description
fullscreen bool none Yes Whether or not to set the app on fullscreen mode.
await FlutterStatusbarManager.setNavigationBarStyle(NavigationBarStyle.DARK);

Enums

StatusBarStyle
  • StatusBarStyle.DEFAULT
  • StatusBarStyle.LIGHT_CONTENT
  • StatusBarStyle.DARK_CONTENT
StatusBarAnimation
  • StatusBarAnimation.NONE
  • StatusBarAnimation.FADE
  • StatusBarAnimation.SLIDE
NavigationBarStyle
  • NavigationBarStyle.DEFAULT
  • NavigationBarStyle.DARK
  • NavigationBarStyle.LIGHT

Status bar

Compatibility: Android (6.0+) & iOS

On Android, it will only work with Android 6.0 (Marshmallow) and above devices.

Navigation bar

Compatibility: Android only

Android 5.0 (Lollipop) and above: color

Android 8.0 (Oreo) and above: style (dark/light)

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。