CODEWITHSUNDEEP
fluttertabbar
La Pyae
La Pyae

Reputation: 509

In Flutter Tab bar, selected tab bar size and tab bar size can't align. How to align?

Flutter tab bar, selected tab bar indicator and each tab size not equal. I use selected indicator with indicator decoration and wrap each tab inside container with PreferredSized. But can't align. How to align to equal with selected indicator and each container?

This is my screen shot of the tab bar problem.

bottom: PreferredSize(
      preferredSize: Size(40, 40),
      child: Container(
        height: getScreenHeightRation(40.0),
        decoration: BoxDecoration(
          color: Color(0xFFF0C185),
          border: Border.all(color: Colors.grey[600]),
        ),
        child: TabBar(
          indicatorPadding: EdgeInsets.symmetric(horizontal: 40),
          indicatorSize: TabBarIndicatorSize.tab,
          indicatorColor: Colors.transparent,
          indicator: BoxDecoration(
            color: Color(0xFFD2A368),
          ),
          tabs: [
            Container(
              decoration: BoxDecoration(
                  border: Border(right: BorderSide(color: Colors.grey))
              ),
              child: Tab(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ImageIcon(AssetImage('assets/images/icon_ext/menu.png')),
                    SizedBox(
                      width: 5.0,
                    ),
                  ],
                ),
              ),
            ),
            Container(
              width: 150,
              decoration: BoxDecoration(
                  border: Border(right: BorderSide(color: Colors.grey))
              ),
              child: Tab(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ImageIcon(AssetImage('assets/images/icon_ext/image.png')),
                    SizedBox(
                      width: 5.0,
                    ),
                  ],
                ),
              ),
            ),
            Container(
              width: 150,
              child: Tab(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ImageIcon(
                        AssetImage('assets/images/icon_ext/placeholder.png')),
                    SizedBox(
                      width: 5.0,
                    ),
             
                  ],
                ),
              ),
            )
          ],
          controller: tabController,
        ),
      ),
    ),

Upvotes: 1

Views: 2751

Answers (1)

Texv
Texv

Reputation: 1904

This is a known issue by flutter that is not fixed yet. https://github.com/flutter/flutter/issues/63700

For the time being, you can fix it by adding

labelPadding: EdgeInsets.only(left: 10),

I also suggest to make the width of the containers match the size of the screen divided by the number of tabs instead of hard coding it. Not defining the width will also work

width: MediaQuery.of(context).size.width / 3,

Upvotes: 2

Related Questions