Flutter TabBar 项目未填充所有剩余空间

Question

我尝试制作带有指示器的 TabBar，但选项卡项目没有填充剩余空间，因此指示器只是包裹文本。我想设置指示器来填充剩余空间。

这是我的代码

Container(
      height: 45,
      decoration: BoxDecoration(
        color: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(
          8,
        ),
      ),
      child: TabBar(
        indicator: BoxDecoration(
          borderRadius: BorderRadius.circular(
            8,
          ),
          color: Colors.lightBlueAccent,
        ),
        dividerColor: Colors.transparent,
        tabAlignment: TabAlignment.fill,
        labelColor: Colors.white,
        unselectedLabelColor: Colors.white,
        controller: tabController,
        tabs: const [
          Expanded(
            child: Tab(
              text: 'Upload Video Url',
            ),
          ),
          Expanded(
            child: Tab(
              text: 'Upload File',
            ),
          ),
        ],
      ),
    )

结果是这样的

我尝试从 Flutter - 如何制作自定义 TabBar 制作标签栏，但仍然无法填充剩余空间。

我也尝试使用 Expanded on Tab 但仍然没有改变。

TabBar(
        indicator: BoxDecoration(
          borderRadius: BorderRadius.circular(
            8,
          ),
          color: Colors.lightBlueAccent,
        ),
        dividerColor: Colors.transparent,
        tabAlignment: TabAlignment.fill,
        labelColor: Colors.white,
        unselectedLabelColor: Colors.white,
        controller: tabController,
        tabs: const [
          Expanded(
            child: Tab(
              text: 'Upload Video Url',
            ),
          ),
          Expanded(
            child: Tab(
              text: 'Upload File',
            ),
          ),
        ],
      )

Answer 1

代替

Tab

，您可以使用

Container

进行自定义配置，您还需要将

labelPadding

设置为零，如下所示：

Container(
  height: 45,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(
      8,
    ),
  ),
  child: TabBar(
    labelPadding: EdgeInsets.zero, // <=== add this
    indicator: BoxDecoration(
      borderRadius: BorderRadius.circular(
        8,
      ),
      color: Colors.lightBlueAccent,
    ),
    dividerColor: Colors.transparent,
    tabAlignment: TabAlignment.fill,
    labelColor: Colors.white,
    unselectedLabelColor: Colors.white,
    controller: controller,
    tabs: [
      Expanded(
        child: Container(// <=== add this
          alignment: Alignment.center,
          width: double.infinity,
          height: double.infinity,
          color: Colors.transparent,
          margin: EdgeInsets.zero,
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Text('Upload Video Url'),
        ),
      ),
      Expanded(
        child: Container(// <=== add this
          alignment: Alignment.center,
          width: double.infinity,
          height: double.infinity,
          color: Colors.transparent,
          margin: EdgeInsets.zero,
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Text('Upload File'),
        ),
      ),
    ],
  ),
)