pinterest_nav_bar

パッケージ概要

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

Pinterest風の下部ナビゲーションバーを実装するFlutterパッケージで、中央のフローティングアクションボタンと均等に配置されたアイコンを備えた、ユニークで視覚的に魅力的なインターフェースを提供します。モダンなアプリの美学を意識して設計されており、シンプルさと創造的なレイアウトを組み合わせることでユーザーインタラクションを強化しています。Android、iOS、Web、macOS、Windows、Linuxなど複数のプラットフォームをサポートしており、クロスプラットフォームでの一貫性を確保します。標準的な下部ナビゲーションバーを超えた独自のナビゲーション体験を求めているアプリに最適です。

用途

クリエイティブなアプリインターフェース
ソーシャルメディアアプリ
写真またはコンテンツ共有プラットフォーム
モバイルファーストデザインアプリケーション
クロスプラットフォームモバイルアプリ

主な機能

Pinterest風のデザイン
中央のフローティングアクションボタン
均等に配置されたアイコンレイアウト
クロスプラットフォーム互換性
カスタマイズ可能な色とサイズのオプション

適している対象

デザイン重視のFlutter開発者
ユニークなナビゲーションを必要とするアプリ
複数のプラットフォームをターゲットにする開発者
視覚的魅力に重点を置いたプロジェクト
モダンなUI/UXの実験

注意事項

ブランドの整合性を確保するため、追加のスタイリングが必要になる場合があります
下部ナビゲーションの使用ケースに限定
複雑なナビゲーション構造には適していません
カスタマイズのための潜在的な学習曲線
完全な機能を実現するには、外部の依存関係に依存しています

元の README

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

Pinterest app's Like bottom navigation bar.

Light theme	Dark theme

Getting Started

Wrap you [MaterialApp] widget with [PinterestNavBarController] widget

    return PinterestNavBarController(
      child: MaterialApp(
        title: 'Pinterest Nav Bar Example',
        home: Pages(),
      ),
    );

Adding the widget

Note: it is recommended that you use this widget as the Floadting Action Button

      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: PinterestNavBar(
        currentIndex: selectedPageIndex,
        onTap: (i) {
          print('PinterestNavBar.onTap($i)');
          setState(() {
            selectedPageIndex = i;
          });
        },
        items: [
          Icons.home,
          Icons.search,
          Icons.chat_bubble_outline_rounded,
          Icons.person
        ],
      ),

check out the example app code for complete understanding

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