web-dev-qa-db-fra.com

Flutter TextField avec format de devise

Il existe un moyen de créer un format monétaire dans un champ TextField lorsque l'utilisateur saisit la valeur en cours de formatage en temps réel?

 formating while typing.

Comme dans l'image ci-dessus, pendant que l'utilisateur tape le format, la mise à jour de la valeur déjà formatée est mise à jour.

[UPDATE]

Je viens de trouver cette bibliothèque qui le fait fonctionner comme un charme: https://pub.dartlang.org/packages/flutter_masked_text

dartflutter
3
Jorge Vieira

[CE CODE NE FONCTIONNE PAS DANS TOUS LES CAS]

Je viens de le faire fonctionner de cette façon, partager au cas où quelqu'un aurait aussi besoin de:

Champ de texte

new TextFormField(
          //validator: ,
          controller: controllerValor,
          inputFormatters: [
            WhitelistingTextInputFormatter.digitsOnly,
            // Fit the validating format.
            //fazer o formater para dinheiro
            new CurrencyInputFormatter()
          ],
          keyboardType: TextInputType.number, ...

TextInputFormatter

class CurrencyInputFormatter extends TextInputFormatter {

  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {

if(newValue.selection.baseOffset == 0){
  print(true);
  return newValue;
}

double value = double.parse(newValue.text);

final formatter = new NumberFormat("###,###.###", "pt-br");

String newText = formatter.format(value/100);

return newValue.copyWith(
    text: newText,
    selection: new TextSelection.collapsed(offset: newText.length));
  }
}

Ceci est le résultat du code:

 enter image description here

4
Jorge Vieira

Une solution simple pour définir un masque monétaire personnalisé consiste à utiliser le flutter_masked_text packege:

1 - Tout d’abord, vous devez ajouter ce paquet au fichier pubspec.yaml de votre paquet:

dependencies:
  flutter_masked_text: ^0.7.0

2 - Après cela, installez le paquet en utilisant la ligne de commande (comme ci-dessous), ou utilisez une interface graphique, si vous utilisez IntelliJ IDEA, cliquez simplement sur le bouton "Les paquets obtiennent".

flutter packages get

3 - Maintenant, dans votre code Dart, importez-le ...

import 'package:flutter_masked_text/flutter_masked_text.Dart';

4 - Enfin, changez le code de votre contrôleur TextField de "TextEditingController" à "MoneyMaskedTextController":

  //final lowPrice = TextEditingController(); //after
  final lowPrice = MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ','); //before
2
Fellipe Sanches