Flutter TextFormField decoration - flutter

Question

How to display the number "123456789" as "123 456 789" in TextFormfield?
TextFormField(
controller: _numberId,
keyboardType: TextInputType.number,
),

Answer 1

I write below extention on String :
extension StringSeprate on String {
String stringSeparate(
{int count = 3, String separator = ",", bool fromRightToLeft = true}) {
if (this.isEmpty) {
return "";
}
if (count < 1) {
return this;
}
if (count >= this.length) {
return this;
}
var str = this.replaceAll(separator, "");
if (fromRightToLeft) {
str = String.fromCharCodes(str.runes.toList().reversed);
}
var chars = str.runes.toList();
var namOfSeparation =
(chars.length.toDouble() / count.toDouble()).ceil() - 1;
var separatedChars = List(chars.length + namOfSeparation.round());
var j = 0;
for (var i = 0; i < chars.length; i++) {
separatedChars[j] = String.fromCharCode(chars[i]);
if (i > 0 && (i + 1) < chars.length && (i + 1) % count == 0) {
j += 1;
separatedChars[j] = separator;
}
j += 1;
}
return fromRightToLeft
? String.fromCharCodes(separatedChars.join().runes.toList().reversed)
: separatedChars.join();
}
}
final code (copy below code in your file and call it from main for test):
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class TestWidget extends StatelessWidget {
TextEditingController _textEditingController = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: _textEditingController,
inputFormatters: [
TextInputFormatter.withFunction((oldValue, newValue) =>
TextEditingValue(
text: newValue.text.stringSeparate(
separator: ' ', fromRightToLeft: false)))
],
onChanged: (String value) {
if (value == null) return;
_textEditingController.selection = TextSelection.fromPosition(
TextPosition(
offset: value.length, affinity: TextAffinity.upstream));
},
),
],
),
),
);
}
}
extension StringSeprate on String {
String stringSeparate(
{int count = 3, String separator = ",", bool fromRightToLeft = true}) {
if (this.isEmpty) {
return "";
}
if (count < 1) {
return this;
}
if (count >= this.length) {
return this;
}
var str = this.replaceAll(separator, "");
var chars = str.runes.toList();
var namOfSeparation =
(chars.length.toDouble() / count.toDouble()).ceil() - 1;
var separatedChars = List(chars.length + namOfSeparation.round());
var j = 0;
for (var i = 0; i < chars.length; i++) {
separatedChars[j] = String.fromCharCode(chars[i]);
if (i > 0 && (i + 1) < chars.length && (i + 1) % count == 0) {
j += 1;
separatedChars[j] = separator;
}
j += 1;
}
return fromRightToLeft
? String.fromCharCodes(separatedChars.join().runes.toList().reversed)
: separatedChars.join();
}
}
result is like :