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

container_tab_indicator のカバー
パッケージ詳細v0.3.0

container_tab_indicator

馴染み深い Container ベースのプロパティを使って、独自のタブインジケータを作成します。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
6760
いいね数
44
Pub ポイント
160

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

flutter pub add container_tab_indicator

パッケージ概要

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

ContainerTabIndicator は、Flutter パッケージで、色、ボーダー、パディング、マージンなどの一般的な Container プロパティを使用してカスタムタブインジケーターを作成できるようにします。デフォルトの Material や Cupertino ウィジェットに頼らず、柔軟かつ直感的な方法でタブインジケーターをデザインできます。ユニークなビジュアルスタイルやクロスプラットフォームでの一貫したブランド化が必要なアプリに最適です。Android、iOS、Web、macOS、Windows、Linux を含むすべての主要な Flutter プラットフォームをサポートしています。

用途

  • カスタムタブUI
  • ブランディングの一貫性
  • クロスプラットフォームタブデザイン
  • 非素材タブインジケーター
  • ダイナミックインジケータースタイル

主な機能

  • コンテナのようなスタイリング
  • プラットフォームに依存しない
  • 簡単な統合
  • 柔軟なレイアウト制御
  • アニメーションをサポートしています
  • 最小限のボイラープレート

適している対象

  • 視覚的なコントロールを求めるデザイナー
  • カスタムナビゲーションを構築する開発者
  • ブランドUIを備えたアプリ
  • マルチプラットフォームアプリケーション
  • Material デフォルトを避けるチーム

注意事項

  • タブインジケーターの使用に限定
  • 組み込みアニメーションサポートなし
  • 手動での位置決めが必要です
  • 複雑なタブレイアウトには適していません
  • 親のTabBar構造に依存しています

元の README

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

ContainerTabIndicator

pub package

Add customized ContainerTabIndicator as an indicator for your TabBar. You can manipulate width, height, color, radius, border and positioning within Tab.

class ContainerTabIndicator extends Decoration {
  final double width;
  final double widthFraction;
  final double height;
  final double heightFraction;
  final EdgeInsetsGeometry padding;
  final Color color;
  final BorderRadius radius;
  final double borderWidth;
  final Color borderColor;
  ...
}

Example

The full example code can be found here.

import 'package:container_tab_indicator/container_tab_indicator.dart';

...

TabBar(
  tabs: [
    Text('First', style: TextStyle(color: Colors.black)),
    Text('Second', style: TextStyle(color: Colors.black)),
  ],
  indicator: ContainerTabIndicator(
    width: 16,
    height: 16,
    radius: BorderRadius.circular(8.0),
    padding: const EdgeInsets.only(left: 36),
    borderWidth: 2.0,
    borderColor: Colors.black,
  ),
),

example

Contributing

This package is still in early stages. To see the upcoming features, check the Issue board. If you notice any bugs not present in issues, please file a new issue. If you are willing to fix or enhance things yourself, you are very welcome to make a pull request.

カテゴリー

ソースリポジトリ

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