1

I need to display currency right after value:

enter image description here

Currently it's achieved by overriding buildTextSpan, but it causes range error when selection includes the trailing text:

enter image description here

suffixText of InputDecoration is displayed only on the far right:

enter image description here

How to show text or widget right after TextField value?

1
  • If you were to amend the suffixText to include trailing blank characters it would push the currency symbol to the left. It is a hack though. If I would have to fill out a form, I'd expect to see currency symbol on the right. Commented Jan 28 at 13:25

2 Answers 2

1

suffixText set at the right of the TextField's container by default. Try below code with custom textfield with currency at right of the value with onTextChanged method.

class CTextField extends StatefulWidget {
  @override
  CTextFieldState createState() => CTextFieldState();
}

class CTextFieldState extends State<CTextField> {
  TextEditingController controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    controller.addListener(onTextChanged);
  }

  @override
  void dispose() {
    controller.removeListener(onTextChanged);
    controller.dispose();
    super.dispose();
  }

  void onTextChanged() {
    String text = controller.text;
    if (!text.endsWith(' T')) {
      controller.value = TextEditingValue(
        text: text.replaceAll(' T', '') + ' T', 
        selection: TextSelection.collapsed(offset: text.length + 4),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      keyboardType: TextInputType.number,
      decoration: InputDecoration(
        labelText: 'Amount',
        hintText: 'Value',
      ),
    );
  }
}

Another way with Container:

         Container(
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(5)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      IntrinsicWidth(
                        child: TextField(
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: '25',
                          ),
                        ),
                      ),
                      Text(
                        'T',
                      )
                    ],
                  ),
                  Icon(Icons.arrow_right_sharp)
                ],
              ),
            ),
Sign up to request clarification or add additional context in comments.

5 Comments

This widget has many users, and they all currently expect the value to not include a currency symbol: '10 000' is expected instead of '10 000 T'. If there's no other solution to this, I will have to change how the value is used everywhere.
I've another way to do it. You can achieve by Container->Row[IntrinsicWidth->TextField(border: InputBorder.none,), Text('Currency')]
My widget also uses suffixIcon, which wouldn't be displayed properly with this solution.
Updated answer with Container that have suffix icon too. Hope it helps...
When label is long, the suffix in Text is too far from the input.
0
TextField(
  controller: _controller,
  decoration: InputDecoration(
    labelText: 'Enter Amount',
    border: OutlineInputBorder(),
    suffixText: ' USD', // Currency symbol as suffix
    suffixStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
  ),
  keyboardType: TextInputType.numberWithOptions(decimal: true),
),

1 Comment

suffixText is displayed on the right corner - which is wrong.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.