Para agregar formato a nuestros montos es muy sencillo ya que flutter nos ofrece un paquete con el cual podemos aplicar formatos, la librería es intl
Podemos hacer uso de esta librería agregarndo el siguiente import en nuestro archivo dart:
import 'package:intl/intl.dart';
Después de esto debemos de agregar el siguiente código
final numberFormat = NumberFormat.currency(locale: 'es_MX', symbol:"\$");
Explico el codigo!!
NumberFormat.currency: es la clase y el método que se encargaran de agregar el formato.
El método nos pide que enviemos dos argumento el primero es:
locale: es_MX en este atributo enviamos la clave del tipo de formato que queremos en este caso pesos mexicanos.
Es muy importante que coloquemos la clave del formato correctamente o no se aplicara y mandara un error, acontinuacion les presento la lista de configuraciones regionales admitidas.
Esta es la lista de configuraciones regionales admitidas.
Nota: Debemos de copiar y pegar el texto que se encuentra a la izquierda ejemplo: af: ZAR copiamos af y pegamos en locale:
final numberFormat = NumberFormat.currency(locale: 'af', symbol:"\$");
af: ZAR
am: ETB
ar: EGP
ar_DZ: DZD
ar_EG: EGP
az: AZN
be: BYN
bg: BGN
bn: BDT
br: EUR
bs: BAM
ca: EUR
chr: USD
cs: CZK
cy: GBP
da: DKK
de: EUR
de_AT: EUR
de_CH: CHF
el: EUR
en: USD
en_AU: AUD
en_CA: CAD
en_GB: GBP
en_IE: EUR
en_IN: INR
en_MY: MYR
en_SG: SGD
en_US: USD
en_ZA: ZAR
es: EUR
es_ES: EUR
es_MX: MXN
es_US: USD
et: EUR
eu: EUR
fa: IRR
fi: EUR
fil: PHP
fr: EUR
fr_CA: CAD
fr_CH: CHF
ga: EUR
gl: EUR
gsw: CHF
gu: INR
haw: USD
he: ILS
hi: INR
hr: HRK
hu: HUF
hy: AMD
id: IDR
in: IDR
is: ISK
it: EUR
it_CH: CHF
iw: ILS
ja: JPY
ka: GEL
kk: KZT
km: KHR
kn: INR
ko: KRW
ky: KGS
ln: CDF
lo: LAK
lt: EUR
lv: EUR
mk: MKD
ml: INR
mn: MNT
mr: INR
ms: MYR
mt: EUR
my: MMK
nb: NOK
ne: NPR
nl: EUR
no: NOK
no_NO: NOK
or: INR
pa: INR
pl: PLN
ps: AFN
pt: BRL
pt_BR: BRL
pt_PT: EUR
ro: RON
ru: RUB
si: LKR
sk: EUR
sl: EUR
sq: ALL
sr: RSD
sr_Latn: RSD
sv: SEK
sw: TZS
ta: INR
te: INR
th: THB
tl: PHP
tr: TRY
uk: UAH
ur: PKR
uz: UZS
vi: VND
zh: CNY
zh_CN: CNY
zh_HK: HKD
zh_TW: TWD
zu: ZAR
Continuamos analizando el código seguimos con:
symbol:\$ en este atributo enviamos el símbolo que nos ayudará a identificar el tipo de moneda que se está manejando, en el ejemplo usamos el símbolo $ pero también en pesos mexicanos podemos usar MXN.
En este atributo literalmente podemos mandar cualquier cosa y no ocurrirá un error.
final numberFormat = NumberFormat.currency(locale: 'es_MX', symbol: "Cualquier cosa sin error");
Finalmente agregamos el formato a nuestro monto de la siguiente manera
Sin formato
Código:
Text(
2045678.toString(),
style: Theme.of(context).textTheme.headline5,
)
Diseño
Con formato
Código
Text(
numberFormat.format(2045678),
style: Theme.of(context).textTheme.headline5,
)
Diseño:
¡Y listo! se agrega el formato de manera correcta y fácil.
Espero les haya sido útil este artículo.