Flutter 在颤振中的TabBar顶部添加指示器

像这个：

下面的代码将在选项卡栏底部添加指示器：

  DefaultTabController(
    length: 2,
    child : new TabBar(
      labelColor: Colors.purple,
      indicatorColor: Colors.purple,
      indicatorSize: TabBarIndicatorSize.label,
      unselectedLabelColor: Colors.black,
    tabs: [
        new Tab(icon: Icon(Icons.chrome_reader_mode),),
        new Tab(icon: Icon(Icons.clear_all),),
    ]),
  );

---

但是我需要

指示器

在

选项卡栏

的顶部。我认为构建自定义选项卡栏不是一个好主意，因为我不想为这个简单的事情做很多工作。

有一个简单的技巧，就是使用属性并添加

undernetabindicator（）

，该类将名为

insets

的参数命名为

EdgeInsets，作为我添加的
EdgeInsets.fromLTRB的值（50.0,0.0,50.0,40.0），

左：50.0，//使指示器从左到小50.0

排名：0.0

右侧：50.0，//使指示器从右侧变小50.0

底部：40.0//将指示器从底部向顶部推40.0

如下图所示：

const textStyle = TextStyle(
    fontSize: 12.0,
    color: Colors.white,
    fontFamily: 'OpenSans',
    fontWeight: FontWeight.w600);

//.....
new TabBar(
  controller: controller,
  labelColor: Color(0xFF343434),
  labelStyle: textStyle.copyWith(
      fontSize: 20.0,
      color: Color(0xFFc9c9c9),
      fontWeight: FontWeight.w700),
  indicator: UnderlineTabIndicator(
    borderSide: BorderSide(color: Color(0xDD613896), width: 8.0),
    insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),
  ),
  unselectedLabelColor: Color(0xFFc9c9c9),
  unselectedLabelStyle: textStyle.copyWith(
      fontSize: 20.0,
      color: Color(0xFFc9c9c9),
      fontWeight: FontWeight.w700),
  tabs: [
    new Tab(
      text: 'LOGIN',
    ),
    new Tab(
      text: 'SIGNUP',
    ),
  ],
),

您还可以创建一个自定义指示器扩展
您必须为此创建一个自定义的选项卡控制器。我找到了一个颤振选项卡的简单示例。您可以在这里详细检查。
另一个选项是为
选项卡
小部件的
指示器：
属性定义一个新的
装饰
，在通过这种方式，您不必绑定到选项卡栏高度（使用
插图：EdgeInsets.fromLTRB（50.0，0.0，50.0，40.0），
），但您不能创建小于选项卡本身的指示器

代码如下：

TabBar(
指标：盒子装饰(
边界：边界(
顶部：边界侧(
颜色：主题。背景。强调颜色，
宽度：3.0
),
),
),
),
您所说的与此问题无关。我指的是选项卡上方的一行（指示器）（默认值在每个选项卡下方）不，该行仅对所选选项卡可见。不，这是抽屉，我看不到对选项卡栏指示器的任何更改，它在底部而不是顶部。请看上图。虽然有一个简单的问题，如另一个答案所示，但为什么我要使我的类复杂化。有什么原因吗？是的，两种方式都有局限性。但您的解决方案对分辨率更大这可能已经很晚了，但是你可以看看这篇文章