パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v2.0.0

flutter_statusbar_manager

Flutter Statusbar Manager を使用すると、iOS および Android でステータスバーの色、スタイル(テーマ)、表示状態、透過性を制御できます。

30日間ダウンロード
100
いいね数
123
Pub ポイント
40

パッケージをインストール

flutter pub add flutter_statusbar_manager

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Flutter Statusbar Manager は、iOS および Android デバイスのステータスバーをカスタマイズできるクロスプラットフォームパッケージです。ステータスバーの色、外観(ライトまたはダークテーマ)、表示状態、透明度を制御できます。シンプルな API を通じて、プラットフォーム間で一貫した UI 挙動を実現し、インマーシブまたはブランド化されたステータスバー設計を必要とするアプリに最適です。このパッケージは pub.dev を経由して Flutter プロジェクトにシームレスに統合でき、活発なコミュニティサポートのもとで維持されています。

用途

  • ブランディング用にステータスバーの色をカスタマイズする
  • 没入型のフルスクリーン体験を作成する
  • テーマに応じてステータスバーのスタイルを調整する
  • フルスクリーンモードでのステータスバーの表示状態の管理
  • iOS および Android での一貫した UI を確保する
  • モダンデザインのための透過ステータスバーを有効にする

主な機能

  • クロスプラットフォーム互換性(iOSおよびAndroid)
  • ステータスバーの色の制御
  • ステータスバーの表示を切り替え
  • ライト/ダークステータスバーのテーマ対応
  • 透過性ステータスバーの設定
  • シンプルで直感的な API

適している対象

  • ステータスバーのカスタマイズを希望するアプリ開発者
  • 没入型UIを実装するデザイナー
  • プラットフォーム固有のステータスバー調整を必要とするプロジェクト
  • ダイナミックなテーマが必要なアプリ
  • 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)

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。