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

パッケージ詳細v1.0.3

bottom_navigation_badge

BottomNavigationBadge は westdabestdb によって開発された Flutter ウィジェットで、開発者が下部ナビゲーションバーのアイテムに通知バッジを追加できるようにします。

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

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

flutter pub add bottom_navigation_badge

パッケージ概要

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

BottomNavigationBadge は、Flutter ウィジェットで、開発者が下部ナビゲーションバーのアイテムに通知バッジを表示できるようにします。westdabestdb によって作成され、ナビゲーションインターフェース内に未読メッセージや更新を視覚的に示すことで、ユーザー体験を向上させます。既存の下部ナビゲーション設定とシームレスに統合でき、バッジの外観に対するカスタムスタイルもサポートしています。軽量で、下部ナビゲーションバーに直感的な通知インジケーターが必要な Flutter アプリケーション専用に設計されています。

用途

  • 未読メッセージの件数を表示
  • 保留中の操作を強調表示する
  • アプリ通知の可視性の向上
  • 視覚的ヒントを通じたユーザー参加の向上
  • アイテムごとにバッジの外観をカスタマイズする

主な機能

  • BottomNavigationBar との簡単な統合
  • カスタムバッジの色とテキストのサポート
  • 軽量で焦点を当てた機能
  • 動的バッジの更新
  • バッジ管理のためのシンプルなAPI

適している対象

  • 下部ナビゲーション付きモバイルアプリ
  • リアルタイム通知が必要なアプリ
  • ミニマリスティックなバッジソリューションを探している開発者
  • UIに焦点を当てたFlutterプロジェクト
  • 複数のナビゲーションタブを持つアプリケーション

注意事項

  • 下部ナビゲーションのコンテキストに限定
  • 組み込みアニメーションサポートなし
  • 手動でのバッジ状態の管理が必要
  • 複雑なバッジレイアウトには適していません
  • 親の BottomNavigationBar 構造に依存しています

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

bottom_navigation_badge / BottomNavigationBadge

BottomNavigationBadge is a Flutter class developed by westdabestdb.

Getting Started

Add this to your package's pubspec.yaml file:

...
dependencies:
  bottom_navigation_badge: ^1.0.3

Now in your Dart code, you can use:

import 'package:bottom_navigation_badge/bottom_navigation_badge.dart';

Usage

Initialize the badger. Isn't it a nice variable name lol 😁

BottomNavigationBadge badger = new BottomNavigationBadge(
  backgroundColor: Colors.red,
  badgeShape: BottomNavigationBadgeShape.circle,
  textColor: Colors.white,
  position: BottomNavigationBadgePosition.topRight,
  textSize: 8);

Create a list of BottomNavigationBarItems

List<BottomNavigationBarItem> items = [
  BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
  BottomNavigationBarItem(icon: Icon(Icons.notifications), title: Text("Notifications")),
  BottomNavigationBarItem(icon: Icon(Icons.face), title: Text("Profile"))
];

Add badge to index with content "1"

setState(() {
  items = badger.setBadge(items, "1", index);
});

Remove the badge at index

setState(() {
  items = badger.removeBadge(items, index);
});

Remove all the badges

setState(() {
  items = badger.removeAll(items);
});

カテゴリー

ソースリポジトリ

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

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