缩小TextFormField以仅适合文本

Question

How can I shrink a TextFormField to fit only the text inside it and its associated prefix/suffix icons?

I'm trying to display a prefix (dollar) icon next to my number input. I want the field to align the the right of the screen. My TextFormField is inside a row:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Text('TITLE'),
    Expanded(
       TextFormField(
         textAlign: TextAlign.end,
         decoration: InputDecoration(
           prefixText: '\$',
         ),
         ...
       ),
    ), 
  ],
),

While this displays the numbers to the right, the TextFormField is expanding to fill all available space, and putting the prefix text on the left:

TITLE$_____________1000

I would like to add a spacer between the title and the form field, and let the form field occupy only the space needed to show its numbers:

TITLE<----spacer---->$1000

My attempts so far have only resulted in the spacer sharing spacing with the form field:

TITLE<--spacer-->$____1000

I want to style the prefix text differently than the field text, so I can't use an inputFormatter to add my prefix. There doesn't seem to be any way to tell the form field to draw the prefix text next to the field text. I suspect my issue with the prefix text is related to this bug: https://github.com/flutter/flutter/issues/18788

If there's a way to tell the form field to occupy the minimum amount of space needed, I can work around the prefix text bug.

Answer 1

I don't think you can shrink a TextFormField to fit only the text inside . Not easily anyway. I don't have the answer but maybe some pointers could also help ya.

First: you'd have to know what font you are using and calculate how long the text would be if you rendered it on the screen with the exact same font style as the input's. Once you have that, in theory, it should be possible to programmatically calculate the width of the input field.

Flutter uses RenderObject 's to keep track of sizes. In fact, RenderBox is a child class of RenderObject . You can retrieve them by via GlobalKey .

If I remember correctly the API:

final gk = GlobalKey();
RenderBox box = gk.currentContext.findRenderObject();

Curious what solution you'll find. If you figure this out, please drop a response :)