inkblob_navigation_bar

パッケージ概要

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

滑らかでダイナミックなインクブロブの遷移効果を備えたカスタマイズ可能な下部ナビゲーションバーで、ユーザーのインタラクションに流れるような視覚フィードバックを提供します。Flutterアプリ専用に設計されており、選択されたアイテムを発光し拡大するインクのようなリップルアニメーションにより、従来のナビゲーションバーの代替として洗練された選択肢を提供します。パッケージは軽量で統合が簡単であり、繊細なアニメーションと洗練されたマイクロインタラクションを重視する現代的なUIに最適です。カスタムカラー、サイズ、アイコンスタイルをサポートしており、開発者がアプリのデザイン言語に完全に合わせることが可能になります。

用途

モバイルアプリのナビゲーションUXの向上
視覚的に魅力的なボトムタブの作成
タブ選択にアニメーションフィードバックを追加する
レガシーナビゲーションバーの近代化
動的な要素を備えたミニマリストインターフェースの設計

主な機能

滑らかなインクのブロブ遷移アニメーション
カスタマイズ可能な色とサイズ
既存のFlutterアプリとの簡単な統合
アイコンおよびラベルのカスタマイズをサポート
軽量でパフォーマンスに優れる

適している対象

モダンなナビゲーションUIを求めるFlutter開発者
ユーザー体験とビジュアルの洗練に焦点を当てたアプリ
インタラクティブなボトムナビゲーションを実装するデザイナー
繊細だが影響力のあるアニメーションを必要とするプロジェクト
洗練された現代的な美学を持つモバイルアプリ

注意事項

すべてのデザインスタイルやブランドに適しているとは限りません
低スペックデバイスへのパフォーマンスへの影響
制限されたプラットフォーム固有の動作カスタマイズ
アクセシビリティのための慎重な色のコントラストが必要です
非常に複雑なナビゲーション構造には推奨されません

元の README

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

A custom navigation bar with smooth & dynamic ink blob transition effect.

Overview

This packages was inspired by this post from Dribbble

Implemented:

Gallery

Dynamic Movement

Customizable Curve

Custom Colors

Optional Titles

Works with any widgets

How to install

Simply add the package to your dependencies! No other steps required :)

Documentation

To use the InkblobNavigationBar you can simply use it in the bottomNavigationBar field of your material scaffold:

Scaffold(
  ...
  bottomNavigationBar: InkblobNavigationBar(
    ...
  )
)

You can customize these attributes in the navigation bar.

Attributes	Type	Description	Default
`showElevation`	`bool`	Enable subtle shadow effect	`true`
`items`	`List<InkblobBarItem>`	Item data for NavigationBar	required
`onItemSelected`	`Function(int)`	Callback function when item tapped	`null`
`selectedIndex`	`int`	Selected item index of navigation bar.	required
`previousIndex`	`int`	Previously selected item index of navigation bar.	`selectedIndex`
`iconSize`	`double`	Size of icons.	`24.0`
`backgroundColor`	`Color`	Background color of [CustomNavigationBar]	`Theme.bottomAppBarColor`
`containerHeight`	`double`	Height of the NavigationBar	`60`
`itemWidth`	`double`	Total width of each item	`2*containerHeight`
`curve`	`Curve`	Animation curve of scale effect	`Curves.easInOutExpo`
`animationDuration`	`Duration`	Duration of the total animation	`Duration(milliseconds: 270)`

Attention: Both the selectedIndex and previousIndex are required for the animation to perform, an example of how to implement this is shown in the provided example app.

To customize the items in the navigation bar, just supply a list of InkblobBarItem like this.

InkblobNavigationBar(
  ...
  items: [
    // Simple Icon with a Title & Color
    InkblobBarItem(
      title: const Text('User'),
      filledIcon: const Icon(SpiriIcons.fi_sr_user),
      emptyIcon: const Icon(SpiriIcons.fi_rr_user),
      color: Colors.blue,
    ),
    // Custom Containers
    InkblobBarItem(
      filledIcon: Container(
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(12),
        ),
      ),
      emptyIcon: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: Colors.black, width: 2),
        ),
      ),
    ),
    // Even Text Widgets
    InkblobBarItem(
      filledIcon: const Text('❤️', style: TextStyle(fontSize: 20)),
      emptyIcon: const Text('🖤', style: TextStyle(fontSize: 20)),
      color: Colors.red,
    ),
  ],
)

Example

Check the example app for a full implementation example.

Contribute

Issues and pull requests are always welcome!
If you found this project helpful, consider buying me a cup of :coffee:

PayPal

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