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 分类

安装插件