circle_nav_bar

パッケージ概要

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

円形ナビゲーションバーの作成を簡素化するFlutterパッケージで、従来の下部ナビゲーションバーの現代的で視覚的に魅力的な代替手段を提供します。開発者はカスタムアイコンとカラーを使用したアニメーション付きの円形ボタンを簡単に実装できます。このパッケージはAndroid、iOS、Web、macOS、Windows、Linuxなど複数のプラットフォームをサポートしており、クロスプラットフォームアプリに適しています。pub addによる最小限のセットアップで、既存のFlutterプロジェクトにスムーズに統合できます。

用途

モダンなアプリインターフェースの作成
円形ナビゲーションによるユーザーエクスペリエンスの向上
独自のUI要素を使用してモバイルおよびウェブアプリを作成する
クリエイティブアプリにおける直感的なナビゲーションの設計
アニメーション付きタブ切り替えの実装

主な機能

円形ボタンデザイン
カスタマイズ可能なアイコンと色
スムーズなアニメーション
クロスプラットフォーム対応
Flutter との簡単な統合
最小構成が必要

適している対象

革新的なナビゲーションを求めるUIデザイナー
クリエイティブまたはアート系アプリを開発する開発者
現代のインターフェース要素を必要とするプロジェクト
クロスプラットフォームのFlutterアプリケーション
ユーザー参加と視覚的魅力に焦点を当てたアプリ

注意事項

複雑なレイアウトには追加のスタイリングが必要になる場合があります
完全カスタムウィジェットと比較してカスタマイズの選択肢が限られている
多数のアニメーション要素によるパフォーマンスへの影響
シンプルなナビゲーションのニーズには適していません
ナビゲーション項目が少ないアプリに最適

元の README

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

Circle Nav Bar

Example style:

./example

no padding black	padding with gradient

./example_two

Level and Icons	only Icons	padding with Levels and icons

How to use

dependencies:
  circle_nav_bar: ^latest_version

import 'package:circle_nav_bar/circle_nav_bar.dart';

Scaffold(
      bottomNavigationBar: CircleNavBar(
        activeIcons: const [
          Icon(Icons.person, color: Colors.deepPurple),
          Icon(Icons.home, color: Colors.deepPurple),
          Icon(Icons.favorite, color: Colors.deepPurple),
        ],
        inactiveIcons: const [
          Text("My"),
          Text("Home"),
          Text("Like"),
        ],
        color: Colors.white,
        circleColor: Colors.white,
        height: 60,
        circleWidth: 60,
        initIndex: 1,
        onChanged: (v) {
          // TODO
        },
        // tabCurve: ,
        padding: const EdgeInsets.only(left: 16, right: 16, bottom: 20),
        cornerRadius: const BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
          bottomRight: Radius.circular(24),
          bottomLeft: Radius.circular(24),
        ),
        shadowColor: Colors.deepPurple,
        circleShadowColor: Colors.deepPurple,
        elevation: 10,
        gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [ Colors.blue, Colors.red ],
        ),
        circleGradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [ Colors.blue, Colors.red ],
        ),
      ),
      ...