Flutter TextFormField different font size for first character - flutter

Question

I'm trying to implement this view.
I got very close except the smaller dollar sign, now I'm using text mask and appending the dollar sign, but of course, it has same font size view rest of the view
Here is the code
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(width: 8),
IconButton(
icon: Image.asset("assets/images/minus.png"),
onPressed: () => {},
),
Expanded(
child: TextFormField(
controller: controller,
keyboardType: TextInputType.number,
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
textAlign: TextAlign.center,
style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: kSecondaryColor),
decoration: new InputDecoration.collapsed(hintText: ''),
),
),
IconButton(
icon: Image.asset("assets/images/plus.png"),
onPressed: () => {},
),
SizedBox(width: 8),
],
),
Would be easy to do if I can change the font size of the first character of the TextField or maybe I should use different widget for only dollar sign, but I couldn't manage it to place it inside Expanded.
leadingIcon property of TextFormField puts the sign to beginning of the field, so symbol doesn't follow the text it just stays there, so that it didn't work for me.
prefixText property is also puts the text far away from actualy numbers like this, if I can fix that, that also works.

Answer 1

Update
You need to get rid of Expanded as it won't push the prefix widget with your text. There are other ways to achieve the same effect. You can use Flexible instead to allow TextFormField to be only as big as it needs to be. InputDecoration has a prefix: property that is not available under the .collapsed constructor, so you can remove the border using InputBorder.none instead. Overall you need to make the following changes:
Row(
children: [
SizedBox(width: 8),
IconButton(
icon: Icon(Icons.add),
onPressed: () => {},
),
Spacer(), //<-- This is what I've been telling to add
Flexible( //<-- Change Expanded to Flexible
child: TextFormField(
initialValue: '234',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.purple,
),
decoration: InputDecoration( //<-- Removed collapsed factory constructor
border: InputBorder.none, //<-- Use this to remove the border
prefix: Text( //<-- This is your actual prefix Widget
"\$",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.purple,
),
),
),
),
),
Spacer(), //<-- This is what I've been telling to add
IconButton(
icon: Icon(Icons.add),
onPressed: () => {},
),
SizedBox(width: 8),
],
),
);
This is the final output

Answer 2

Would wrapping the TextFormField inside a Row, along with Text widget to hold $ help?
Also take care to put MainAxisSize.min, so that both the widgets stay together.
Update
Putting up the code, do not wrap Expanded, bring the changes inside child of Expanded. I have added 4 comments, which are the changes you will need to bring in.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(width: 8),
IconButton(
icon: Icon(Icons.remove),
onPressed: () => {},
),
Expanded(
//1. Intrinsic height is used to place so that its child ROW doesn't take // the whole height
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
// 2. This alignment will align $ with the bottom of textfield.
alignment: Alignment(0.0, 0.5),
child: Text(
"\$",
style: TextStyle(
//3. dollar symbol to have a different font size.
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue),
),
),
SizedBox(
//4. You might need to change the width here, this is the width available //for TextFormField. Logic used here is
//half of the (available screen width - size of the icons at left n right)
width: ((MediaQuery.of(context).size.width - 48) / 2),
child: TextFormField(
// controller: controller,
keyboardType: TextInputType.number,
// inputFormatters: [FilteringTextInputFormatter.digitsOnly],
// textAlign: TextAlign.center,
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.blue),
decoration: new InputDecoration.collapsed(hintText: ''),
),
),
]),
),
),
IconButton(
icon: Icon(Icons.add),
onPressed: () => {},
),
SizedBox(width: 8),
],
),