Flutter - Make custom text editing controller

Question

I want to make a custom text editing controller which will show the numbers of text in Farsi (Persian), but returns it with English numbers when you call textEditingController.text.

Here's what I have implemented but it seems like the TextField doesn't use the setter of text:

class PersianTextEditingController extends TextEditingController {

  @override
  String get text => value.text.toEnglishNumbers;

  @override
  set text(String newText) {
    value = value.copyWith(
      text: newText.toPersianNumbers,
      selection: const TextSelection.collapsed(offset: -1),
      composing: TextRange.empty,
    );
  }

  factory PersianTextEditingController({String? text}) =>
      PersianTextEditingController._(text: text);

  PersianTextEditingController._({String? text}) {
    this.text = text ?? '';
  }

}

Here's the TextField:

PersianTextEditingController controller = PersianTextEditingController();
@override
    Widget build(BuildContext context) {
        return TextField(
          controller: widget.controller,
        );
      }

could you include toEnglishNumbers and toPersianNumbers too? — eamirho3ein, Nov 13 '22 at 14:07
Instead of creating a new class. Just create an extension on TextEditingController — THEODORE, Nov 13 '22 at 14:12

score 2 · Answer 1 · answered Nov 13 '22 at 14:11

2

try this:

   class PersianTextEditingController extends TextEditingController {
  @override
  String get text => super.value.text.toPersianNumbers;

  @override
  set text(String persianText) {
    super.value = TextEditingValue(
      text: persianText.toEnglishNumbers,
      selection: TextSelection.collapsed(offset: persianText.length),
    );
  }
}

and:

TextField(
      controller: controller,
      onChanged: (value) {
        print(controller.text);
    
      },
    ),

answered Nov 13 '22 at 14:11

Gwhyyy

7,554
3
8
35

This is working while typing, but I also wanted to get the English numbers using `controller.text` but seems like it's not possible. right? – Mehrzad Mohammadi Nov 13 '22 at 14:30
I don't follow, you want that controller.text will return numbers in English and in Persian ? can you clear what exactly you want – Gwhyyy Nov 13 '22 at 14:32
I want `controller.text` to return numbers in English but show the text in `TextField` in Persian. – Mehrzad Mohammadi Nov 14 '22 at 07:33
1

of so the reverse of languages in your case, change your toPersianNumbers to toEnglishNumbers and vice versa ! – Gwhyyy Nov 14 '22 at 18:34

eamirho3ein · Accepted Answer · 2022-11-13T14:45:33.553

The reason your code doesn't work is that you try to get english number with getter text, inside the TextEditingController its use it, so always you are getting english number, you need to set text to farsi and define new getter for english number, like this:

class PersianTextEditingController extends TextEditingController {
  @override
  String get text => value.text.toPersianNumbers;

  String get englishText => value.text.toEnglishNumbers;

  factory PersianTextEditingController({String? text}) =>
      PersianTextEditingController._(text: text);

  PersianTextEditingController._({String? text}) {
    this.text = text ?? '';
  }
}

but when you want to get your english number use this:

print("text = ${widget.controller.englishText}")

Flutter - Make custom text editing controller

2 Answers2