如何在Flutter TabBar开头添加无TabIndicator的操作IconButton

直接把操作按钮塞进TabBar的tabs列表里会导致它被当成Tab项，自然会触发指示器，还得给TabBarView多做一个页面。换个思路，把按钮和TabBar放在同一个Row里，让按钮独立于Tab体系之外：

Row(
  children: [
    // 独立的操作按钮，和TabBar完全分离
    Tooltip(
      message: "Customize your interest",
      child: IconButton(
        icon: const Icon(Icons.add),
        onPressed: () {
          // 这里写你的操作逻辑，比如打开兴趣设置弹窗
          print("打开兴趣设置");
        },
      ),
    ),
    // 用Expanded包裹TabBar，让它在剩余空间里可滚动
    const Expanded(
      child: TabBar(
        isScrollable: true,
        tabs: [
          Tooltip(
            message: "For you",
            child: Tab(text: "For you"),
          ),
          Tooltip(
            message: "Following",
            child: Tab(text: "Following"),
          ),
        ],
      ),
    ),
  ],
)

关键说明 #

• 操作按钮不再是Tab项，点击不会触发Tab指示器，也不需要给TabBarView额外加页面。
• 用Expanded包裹TabBar，保证它能在Row里占据剩余空间，同时保留isScrollable: true的特性。
• TabBar的TabController（如果用了的话）只需要对应"For you"和"Following"两个Tab，和TabBarView的页面数量完全匹配。

如果你的页面是用DefaultTabController包裹的，直接用下面的完整代码就行，它会自动关联TabBar和TabBarView：

DefaultTabController(
  length: 2, // 只对应两个Tab，不用算操作按钮
  child: Scaffold(
    appBar: AppBar(
      bottom: Row(
        children: [
          Tooltip(
            message: "Customize your interest",
            child: IconButton(
              icon: const Icon(Icons.add),
              onPressed: () {
                // 执行你的操作逻辑
              },
            ),
          ),
          const Expanded(
            child: TabBar(
              isScrollable: true,
              tabs: [
                Tab(text: "For you"),
                Tab(text: "Following"),
              ],
            ),
          ),
        ],
      ),
    ),
    body: const TabBarView(
      children: [
        Center(child: Text("For you page")),
        Center(child: Text("Following page")),
      ],
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Oasis Inc