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?

I don't see any text widget changed size while changing font weight. What font did you use in your tab item? — Alann Maulana, Jun 11 '22 at 12:23
Or try to set the `letterSpacing` from `TextStyle` to the same value, don't let the default value to be set. — Alann Maulana, Jun 11 '22 at 12:39
If you post images of code or error messages, please also copy/paste or type the actual code/message directly into the post. While images and screenshots can be helpful for providing context, the post should still be clear and useful without them. Please see [Why should I not upload images of code/data/errors when asking a question?](//meta.stackoverflow.com/a/285557/208273)—the same reasoning applies to error messages as well. Posts in which essential text is only included in images are likely to be closed for not having enough details. — Ryan M, Jun 14 '22 at 06:04

score 0 · Answer 1 · answered Jun 06 '22 at 00:54

0

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.

answered Jun 06 '22 at 00:54

thebyteland

359
1
2
10

1

I can't set a fixed width because I'm creating a global Widget. Multiple modules will use it. The solution have to be transparent to the widget users. – siega Jun 06 '22 at 01:09

score 0 · Answer 2 · answered Jun 10 '22 at 00:34

0

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

answered Jun 10 '22 at 00:34

Kaleb

541
2
7

I can't set a fixed width because I'm creating a global Widget. Multiple modules will use it. The solution have to be transparent to the widget users. – siega Jun 10 '22 at 01:02

score 0 · Answer 3 · answered Jun 12 '22 at 14:30

0

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.

answered Jun 12 '22 at 14:30

peretsoli

71
3

Changing the FontFamily is not a good solution... I think your idea of calculate the maximum size, based on the bold text can be a better approach... I'll give it a try... – siega Jun 13 '22 at 13:02
1

You can use this to calculate the size: [how to get the size](https://stackoverflow.com/questions/52659759/how-can-i-get-the-size-of-the-text-widget-in-flutter) – peretsoli Jun 13 '22 at 13:12

score 0 · Answer 4 · answered Jun 15 '22 at 19:22

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 Answers4