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

blur_bottom_bar のカバー
パッケージ詳細v1.0.3

blur_bottom_bar

Flutter ブラー ボトムバーは、Android および iOS 向けのマテリアルデザインで再現された iOS タブビューです

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
82
いいね数
29
Pub ポイント
150

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

flutter pub add blur_bottom_bar

パッケージ概要

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

Blur Bottom Bar は、iOSスタイルのタブバーをぼかし背景効果で再現するFlutterパッケージであり、iOSの美学とMaterial Designの原則を組み合わせて、Android、iOS、Web、macOS、Windows、Linuxでのクロスプラットフォームの一貫性を実現します。滑らかな遷移とカスタマイズ可能なスタイリングにより、モダンで視覚的に魅力的なナビゲーション体験を提供します。このパッケージは、プラットフォーム間の使いやすさを損なわず、プレミアムな外観を目指すアプリに最適です。

用途

  • クロスプラットフォームモバイルアプリナビゲーション
  • Material Design を採用した iOS ベースの UI
  • モダンなアプリインターフェースにブラー効果
  • 視覚的な奥行きを必要とするタブベースのアプリケーション
  • 動的な下部バーでユーザー体験を向上させる

主な機能

  • iOSを参考にした背景のぼかし効果
  • Android 用の Material Design 統合
  • 複数のプラットフォームのサポート
  • カスタマイズ可能なタブの外観
  • スムーズなアニメーションと遷移
  • デバイス間での応答性デザイン

適している対象

  • FlutterでiOS風のアプリを作成する開発者
  • 美学的なナビゲーションを必要とするデザイン重視のアプリケーション
  • iOS および Android をターゲットとしたクロスプラットフォームプロジェクト
  • 洗練された、モダンなUIを目指すアプリ
  • 複数のプラットフォーム間で視覚的一貫性を重視するチーム

注意事項

  • 低スペックデバイスでのパフォーマンスに影響を与える可能性があります
  • 読みやすさのためには慎重な色のコントラストが必要です
  • ネイティブ実装と比較してカスタマイズの選択肢が限られている
  • ブラー効果に関連するアクセシビリティ上の懸念
  • ライトテーマのデザインに最適

元の README

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

blur_bottom_bar

Flutter blur bottom bar

This is a recreation of the ios tab view with material design for android and ios

BlurBottomBar Gif BlurBottomBar Gif

Getting Started

Add the dependency in pubspec.yaml:

dependencies:
  ...
  blur_bottom_bar: ^1.0.1

Basic Usage

return Scaffold(
      appBar: AppBar(title: Text("Blur bar example")),
      body: Stack(
        children: <Widget>[
          _widgetOptions.elementAt(_selectedIndex),
          BlurBottomView(
              bottomNavigationBarItems: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'Home'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.business),
                  label: 'Business',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.school),
                  label: 'School',
                )
              ],
              currentIndex: _selectedIndex,
              onIndexChange: (val) {
                _onItemTapped(val);
              }),
        ],
      ),
    );

カテゴリー

ソースリポジトリ

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

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