Suffix text form field (Flutter) - flutter

Question

I want to align the price text as it is in the first image, I tried to do it as in the second image, but I could not.
I want to do:
The problem:
This is the code I wrote to try to build the design.
TextFormField(
controller: startController,
keyboardType: TextInputType.number,
textAlign: TextAlign.end,
decoration: const InputDecoration().copyWith(
border: const UnderlineInputBorder(borderSide: BorderSide(color: kPinCodeColor)),
enabledBorder: const UnderlineInputBorder(borderSide: BorderSide(color: kPinCodeColor)),
disabledBorder: const UnderlineInputBorder(borderSide: BorderSide(color: kPinCodeColor)),
suffix: Text('JOD', style:
Theme.of(context).textTheme.headline6!.copyWith(fontSize:
Sizes.textSize_22)),
),
style: Theme.of(context).textTheme.headline6!.copyWith(fontSize:
Sizes.textSize_34),
)

Answer 1

You have make custom widget for this purpose. I made StatefulWidget I hope it make sense for you.
FocusNode is for handling focus change and animate the line underneath the Text.
MouseRagion is for handling hovering events.
IntrinsicWidth is for making TextFormInput expandable while typing.
This is the code:
class TextCustom extends StatefulWidget {
const TextCustom({Key? key, this.textController, this.suffix})
: super(key: key);
final TextEditingController? textController;
final String? suffix;
#override
State<TextCustom> createState() => _TextCustomState();
}
class _TextCustomState extends State<TextCustom> {
bool _isHovering = false;
bool _isFocased = false;
FocusNode textFocus = FocusNode();
#override
void initState() {
textFocus.addListener(() {
setState(() {
_isFocased = textFocus.hasFocus;
});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return SizedBox(
child: MouseRegion(
onEnter: (event) {
setState(() {
_isHovering = true;
});
},
onExit: (event) {
setState(() {
_isHovering = false;
});
},
child: GestureDetector(
onTap: () {
textFocus.requestFocus();
},
child: InputDecorator(
expands: false,
isFocused: _isFocased,
isHovering: _isHovering,
decoration: const InputDecoration(),
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
IntrinsicWidth(
child: TextFormField(
focusNode: textFocus,
controller: widget.textController,
decoration: const InputDecoration(
constraints: BoxConstraints(minWidth: 20),
isCollapsed: true,
border: UnderlineInputBorder(borderSide: BorderSide.none),
),
style: Theme.of(context)
.textTheme
.headline6!
.copyWith(fontSize: 34),
),
),
const SizedBox(width: 8),
(widget.suffix != null)
? Text(
'JOD',
style: Theme.of(context)
.textTheme
.headline6!
.copyWith(fontSize: 22),
)
: Container(),
],
),
),
),
),
);
}
}