How to make the size of the Text Widget change with the content in flutter?

text widget flutter
flutter multiline text
flutter text size
flutter text scale factor
flutter textspan
flutter text wrap
flutter dynamic font size
rich text flutter

I want to design a combined Text widget that consists of two Text widget.

The size of the first Text widget changes as the content changes, and when it reaches the maximum length, an ellipsis is displayed. Like below, the red line part is fixed.

Then this is my code:

Row(
  children: <Widget>[
    Expanded(
      child: Text(
        'W',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      '(0x1234…1234)',
      style: TextStyle(
        fontSize: 12,
        color: Colors.black,
      ),
    ),
  ],
);

When the length is the largest, the display is normal. But when the length is very small, there will be a blank in the middle.

So, how do I need to improve my code?

You need to use Flexible widget instead of the Expanded.

Row(
  children: <Widget>[
    Flexible(
      child: Text(
        'Was',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      '(0x1234…1234)',
      style: TextStyle(
        fontSize: 12,
        color: Colors.black,
      ),
    ),
  ],
),

Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis.

While Expanded, forces the child to expand to fill the available space.

You can also pass the fit: FlexFit.tight [The child is forced to fill the available space] or fit: FlexFit.loose [The child can be at most as large as the available space (but is allowed to be smaller).] to Flexible widget.

By Default it is set to FlexFit.loose.

Flutter - How to change Font Size of Text Widget?, How do I get the widget height on my flutter? With minFontSize you can specify the smallest possible font size. If the text still doesn't fit, it will be handled according to overflow. The default minFontSize is 12. maxFontSize sets the largest possible font size. This is useful if the TextStyle inherits the font size and you want to constrain it.

You should use Flexible instead of Expanded

Row(
  children: <Widget>[
    Flexible(
      child: Text(
        'W',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      '(0x1234…1234)',
      style: TextStyle(
        fontSize: 12,
        color: Colors.black,
      ),
    ),
  ],
)

How to get a height of a Widget?, How do you increase the height of a TextField in flutter? Sometimes, the piece of text fits in this Container with font size 30.0. In other times, it won't fit unless I set the text size to 24.0. Is there a way to dynamically resize text based on its parent container space? I've built a Container with a ConstrainedBox, which lets me define the max size of the text space.

Not sure if I got your question properly, do you want to remove the white space?

Row(
   children: <Widget>[
     Expanded(
       child: Align( // add this
         heightFactor: 1,
         alignment: Alignment.centerRight, // this is what you need
         child: Text(
           'W',
           overflow: TextOverflow.ellipsis,
         ),
       ),
     ),
     Text(
       '(0x1234…1234)',
       style: TextStyle(
         fontSize: 12,
         color: Colors.black,
       ),
     ),
   ],
 )

Flutter Add Image Icon Inside TextField Text Input Android iOS , Change Font Size of Text Widget. You can change the font size of text in a Text Widget using style property. Create a TextStyle object with fontSize and specify this object as style for Text Widget. With minFontSize you can specify the smallest possible font size. If the text still doesn't fit, it will be handled according to overflow. The default minFontSize is 12.0. maxFontSize sets the largest possible font size. This is useful if the TextStyle inherits the font size and you want to constrain it.

How to update flutter TextField's height and width?, The RichText widget displays text that uses multiple different styles. The text to display is described using a tree of TextSpan objects, each of which has an  Sizing widgets relative to parent/screen size in Flutter. Oftentimes we don’t want our widgets to have a specific width or height, but rather have a width or height that is relative to the parent. For instance, we want a container to take 65% of the screen width or two containers that each taking respectively 70% and 30% of parent width.

Text widgets, They will fit their boundaries and all AutoSizeText in the same group have the same size. That means they adjust their font size to the group  You can use style property of Text to change some of the property of the Text. Example: Text( "Your text", style: TextStyle( fontSize: 20.0, color: Colors.red, fontWeight: FontWeight.w600, ), ) It's a good practice to use predefined style for Text which gives you standard fontSize and fontWeight for the Text.

auto_size_text, To show text in Flutter you use the Text Widget. Size, FontWeigt, Color and Style. The way We'll change the color to a grey, make the font bold and increase the font size. Text( Text( 'FilledStacks content is pretty cool. The RichText widget displays text that uses multiple different styles. The text to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree. The text might break across multiple lines or might all be displayed on the same line depending on the layout constraints.

Comments
  • Thank you for your help, this is the effect I want.