Keep the same Text Width after switch FontWeight

Question

I have two text styles with the exactly same settings, the only difference is the fontWeight. One have regular weight and the other is bold. I'm changing the style of a TabBar header using this styles. The inactive text is regular and when the tab is active, the text is changed to bold.

The problem is that after changing the style, the bold text need more horizontal space. This lead the view to a "bug".

I can fix this by adding a Stack with the same bold text with a transparent color, but I don't like this approach.

The question is, there's a more elegant way to solve this problem?

user_16634183 · Answer

Your tab size is defined by your text size because text is the only content, if you do not want to get autoresized width tab you can set a min-width for all tabs.

user_17045336 · Answer

You can make a fixed width fot the text if you want with fitted box

        SizedBox(
          width: 150,
          child: FittedBox(
            fit: BoxFit.fitWidth,
            child: Text(
              'Yor text'
              // your style....
            )
          )
        ),

The one drawback of this method is that the text will get verry smaller as their length increase but they are fine for such use

user_18607452 · Answer

There are several approaches to the solution.

One, calculate the maximum size, according to the bold text, at the initialization time of the field, and determine the size of the field accordingly.

Another option is to use a font family whose font size is the same whether it is plain or bold.

In fact, using Google's predefined fonts will do the job for you.

Change the font set to Google's and the problem will go away. For example:

     textTheme: GoogleFonts.arvoTextTheme(
          Theme.of(context).textTheme,
        ),

The font I chose is just an example, you can choose something you like, there is a large and beautiful selection to choose from.

user_13431819 · Answer

The best way and the preferred way is to use flutter's TabBar, and change the properties of label i.e

labelStyle to specify the style of the active selected tab
unselectedLabelStyle to specify the style of the unactive tab.

The width and the transition of the tabs is internally taken care by the widget itself.

The code goes like:

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: SafeArea(
          child: Scaffold(
            body: Container(
              color: Colors.grey,
              child: TabBar(
                indicatorColor: Colors.black,
                indicatorWeight: 4,
                // Specify the active label's font weight here
                labelStyle: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
                // Specify the inactive label's font weight here
                unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal),
                tabs: [
                  Tab(text: "First Tab"),
                  Tab(
                    text: "Second Tab",
                  ),
                  Tab(text: "Third Tab")
                ],
              ),
            ),
          ),
        ));
  }

Output

Keep the same Text Width after switch FontWeight

4 Answers