Search code examples
fluttertabs

Flutter TabBar item not filling all remaining space

I try to make TabBar with indicator but the tab item not filling the remaining space so the indicator just wrap the text. I want to set the indicator to fill the remaining space.

Here is my code

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',
            ),
          ),
        ],
      ),
    )

The result look like this

Screeshott

I try to make the tabbar from Flutter - How to make a custom TabBar but still can't fill remaining space.

I also try to use Expanded on Tab but still not change.

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',
            ),
          ),
        ],
      )
Solution

  • Use indicatorSize: TabBarIndicatorSize.tab, default property that is fulfill your remaining space

    TabBar(
              indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(
                  8.0,
                ),
                color: Colors.lightBlueAccent,
              ),
              indicatorSize: TabBarIndicatorSize.tab, //this one is missing
              dividerColor: Colors.transparent,
              tabAlignment: TabAlignment.fill,
              labelColor: Colors.black,
              unselectedLabelColor: Colors.black,
              controller: _tabController,
              tabs: const [
                Expanded(
                  child: Tab(
                    text: 'Upload Video Url',
                  ),
                ),
                Expanded(
                  child: Tab(
                    text: 'Upload File',
                  ),
                ),
              ],
            )