Flutter Question posted in
The official Flutter documentation can be found here.

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

3

Answers


  1. 0

    Instead of Tab you can Use Container with custom config, also you need to set labelPadding to zero like this:

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

    enter image description here

    Login or Signup to reply.
  2. 0

    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',
                  ),
                ),
              ],
            )
    Login or Signup to reply.
  3. 0

    add this property indicatorSize: TabBarIndicatorSize.tab, and remove Expanded Widget

       TabBar(
            indicator: BoxDecoration(
              borderRadius: BorderRadius.circular(8,),
              color: Colors.lightBlueAccent,
            ),
            indicatorSize: TabBarIndicatorSize.tab,
            dividerColor: Colors.transparent,
            tabAlignment: TabAlignment.fill,
            labelColor: Colors.white,
            unselectedLabelColor: Colors.white,
            controller: tabController,
            tabs: const[
              Tab(
                text: 'Upload Video Url',
              ),
              Tab(
                text: 'Upload File',
              ),
            ],
          ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search