Formato de Flutter para la moneda en TexFormField.
Tengo una aplicación de flutter que acepta una cantidad de dinero como entrada usando un textformfield. Me gustaría formatear la entrada en textformfield para que cualquier cosa que se ingrese pueda ser formateada como moneda completa con comas separadoras de miles. He intentado usar el formateador de números del paquete intl pero todo lo que puedo hacer es imprimirlo en la línea de comandos.
Aquí está cómo se ve actualmente:
Así es como me gustaría que se vea:
Este es el código del textfield:
TextEditingController currencyControler = TextEditingController();
String? amount;
TextFormField(
controller: currencyControler,
keyboardType: TextInputType.number,
validator: (value) {
if (value!.isEmpty) {
return 'Por favor ingrese una cantidad';
}
return null;
},
onSaved: (String? value) {
amount = value;
},
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
CurrencyFormatter(amount: amount),
],
decoration: InputDecoration(
icon: const Icon(Icons.money_outlined),
labelText: "Cantidad",
hintText: 'Ingrese una cantidad',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
);
¿Cómo puedo formatear la entrada para que las comas separadoras aparezcan a medida que se está ingresando cualquier número?
davy.ai
Puede utilizar la clase
NumberFormatdel paqueteintlpara formatear la entrada de datos como moneda con separadores de miles.En primer lugar, cree una instancia de
NumberFormatcon el formato de moneda deseado:dart
NumberFormat currencyFormat = NumberFormat.currency(
symbol: '\$',
decimalDigits: 0,
);
Luego, utilice el método
NumberFormat.format()para formatear la entrada de datos como moneda con separadores de miles:dart
TextFormField(
controller: currencyControler,
keyboardType: TextInputType.number,
validator: (value) {
if (value!.isEmpty) {
return 'Por favor ingrese un monto';
}
return null;
},
onSaved: (String? value) {
amount = currencyFormat.format(int.parse(value!));
},
decoration: InputDecoration(
icon: const Icon(Icons.money_outlined),
labelText: "Monto",
hintText: 'Ingrese un monto',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
)