container_tab_indicator

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

ContainerTabIndicator 是一個 Flutter 套件，允許開發者使用熟悉的 Container 屬性（例如顏色、邊框、內邊距和外邊距）建立自訂標籤指示器。它提供了一種靈活且直覺的方式來設計標籤指示器，而不依賴預設的 Material 或 Cupertino 小部件。適用於需要獨特視覺風格或跨平台一致品牌應用程式，支援所有主要的 Flutter 平台，包括 Android、iOS、Web、macOS、Windows 和 Linux。

適用情境

自定義選項卡 UI
品牌一致性
跨平台標籤設計
非材質標籤指示器
動態指示器樣式

主要特色

容器樣式
平台無關
輕鬆整合
靈活的佈局控制
支援動畫
最小化樣板

適合對象

尋求視覺控制的設計人員
開發人員建構自訂導航
具有品牌UI的應用程式
跨平台應用程式
避免使用 Material 預設值的 Teams

使用建議

僅限標籤指示器使用
無內建動畫支援
需要手動定位
不適合複雜的標籤頁佈局
依賴於父級 TabBar 結構

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

ContainerTabIndicator

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.

搜尋套件、儲存庫與 APP 分類

安裝套件