Comment créer un champ de saisie numérique dans Flutter?

128

Je ne parviens pas à trouver un moyen de créer un champ de saisie dans Flutter qui ouvrirait un clavier numérique. Est-ce possible avec les widgets de matériaux Flutter? Certaines discussions github semblent indiquer qu'il s'agit d'une fonctionnalité prise en charge, mais je ne parviens pas à trouver de documentation à ce sujet.

Janne Annala
la source
ajouter le type de clavier keyboardType: TextInputType.number,
Ishan Fernando

Réponses:

252

Vous pouvez spécifier le nombre comme keyboardType pour TextField en utilisant:

keyboardType: TextInputType.number

Vérifiez mon fichier main.dart

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new HomePage(),
      theme: new ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Container(
          padding: const EdgeInsets.all(40.0),
          child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new TextField(
            decoration: new InputDecoration(labelText: "Enter your number"),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
    WhitelistingTextInputFormatter.digitsOnly
], // Only numbers can be entered
          ),
        ],
      )),
    );
  }
}

entrez la description de l'image ici

Rissmon Suresh
la source
3
Génial, merci! Je souhaite vraiment que la documentation du constructeur Flutter ne soit pas si mal formatée. Complètement manqué celui-ci.
Janne Annala
8
Mais je peux coller les textes (caractères) sur ce champ, avez-vous d'autres options? @Rissmon Suresh
Thirumal Govindaraj
5
ne pas oublier => importer 'package: flutter / services.dart';
Wilmer
Permet de mettre des points, des espaces et coller des emoji
agilob
5
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly] est également requis ici, car la virgule et le point peuvent toujours être acceptés ici dans la réponse.
Ravi Yadav
80

Pour ceux qui cherchent à créer TextFieldou à TextFormFieldaccepter uniquement des nombres en entrée, essayez ce bloc de code:

TextFormField(
    controller: _controller,
    keyboardType: TextInputType.number,
    inputFormatters: <TextInputFormatter>[
        WhitelistingTextInputFormatter.digitsOnly
    ],
    decoration: InputDecoration(
        labelText:"whatever you want", 
        hintText: "whatever you want",
        icon: Icon(Icons.phone_iphone)
    )
)
Bilal Şimşek
la source
3
Ceci est bienvenu pour éviter à l'utilisateur de coller des chaînes non numériques (inputFormatters), merci.
Mariano Argañaraz
2
Cela fonctionne bien même dans Flutter_web. La raison étant dans flutter_web, nous ne pouvons pas appliquer un clavier numérique, donc la restriction est l'option naturelle. Merci @ BilalŞimşek
Abhilash Chandran
1
C'est la solution parfaite!
Kavinda Jayakody
31

Grâce à cette option, vous pouvez restreindre strictement un autre caractère sans numéro.

 inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
 keyboardType: TextInputType.number,

Pour utiliser l'option ci-dessus, vous devez importer ceci

import 'package:flutter/services.dart';

en utilisant ce type d'option, l'utilisateur ne peut pas coller de caractère dans un champ de texte

Hardik Kumbhani
la source
c'est la vraie réponse complète. sans les formateurs, le réglage du clavier ne suffit pas.
shababhsiddique
si je veux juste des décimales et des chiffres. comment ajouter le "." dans la liste blanche du formateur?
shababhsiddique
19

Réglez le clavier et un validateur

String numberValidator(String value) {
  if(value == null) {
    return null;
  }
  final n = num.tryParse(value);
  if(n == null) {
    return '"$value" is not a valid number';
  }
  return null;
}

new TextFormField(
    keyboardType: TextInputType.number, 
    validator: numberValidator, 
    textAlign: TextAlign.right
    ...
Günter Zöchbauer
la source
Erreur
obtenue
Ok, le nom numde la variable ne fonctionne pas. Le nom doit être changé
Günter Zöchbauer
1
À partir de la documentation: le paramètre onError est obsolète et sera supprimé. Au lieu de num.parse (string, (string) {...}), vous devriez utiliser num.tryParse (string) ?? (...).
kashlo
13

Pour ceux qui ont besoin de travailler avec le format de l'argent dans les champs de texte:

A utiliser uniquement:, :, (virgule) et. (période)

et bloquez le symbole: - (trait d'union, moins ou tiret)

ainsi que le: ⌴ (espace vide)

Dans votre TextField, définissez simplement le code suivant:

keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [BlacklistingTextInputFormatter(new RegExp('[\\-|\\ ]'))],

Le trait d'union et l'espace des symboles apparaîtront toujours sur le clavier, mais seront bloqués.

Fellipe Sanches
la source
Savez-vous comment autoriser une seule virgule ou point?
Heddie Franco
1
@HeddieFranco en savoir plus sur regex developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
Fellipe Sanches
2

Vous pouvez facilement changer le type d'entrée à l'aide du paramètre keyboardType et vous avez beaucoup de possibilités.Vérifiez la documentation TextInputType afin que vous puissiez utiliser le numéro ou la valeur de téléphone

 new TextField(keyboardType: TextInputType.number)
Raouf Rahiche
la source
2

Vous pouvez essayer ceci:

TextFormField(
     keyboardType: TextInputType.number,
     decoration: InputDecoration(
              prefixIcon: Text("Enter your number: ")
     ),
     initialValue: "5",
     onSaved: (input) => _value = num.tryParse(input),
),
Hasan A Yousef
la source
1

keyboardType: TextInputType.number ouvrirait un pavé numérique sur le focus, j'effacerais le champ de texte lorsque l'utilisateur entre / dépasse autre chose.

keyboardType: TextInputType.number,
onChanged: (String newVal) {
    if(!isNumber(newVal)) {
        editingController.clear();
    }
}

// Function to validate the number
bool isNumber(String value) {
    if(value == null) {
        return true;
    }
    final n = num.tryParse(value);
    return n!= null;
}
Lahar Shah
la source
1

Voici le code du clavier du téléphone sur Android:

Élément clé: keyboardType: TextInputType.phone,

  TextFormField(
    style: TextStyle(
      fontSize: 24
    ),
    controller: _phoneNumberController,
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      prefixText: "+1 ",
      labelText: 'Phone number'),
    validator: (String value) {
      if (value.isEmpty) {
        return 'Phone number (+x xxx-xxx-xxxx)';
      }
      return null;
    },
  ),
Andreï
la source
0

Voici le code du clavier numérique: keyboardType: TextInputType.phone Lorsque vous ajoutez ce code dans le champ de texte, il ouvrira le clavier numérique.

  final _mobileFocus = new FocusNode();
  final _mobile = TextEditingController();


     TextFormField(
          controller: _mobile,
          focusNode: _mobileFocus,
          maxLength: 10,
          keyboardType: TextInputType.phone,
          decoration: new InputDecoration(
            counterText: "",
            counterStyle: TextStyle(fontSize: 0),
            hintText: "Mobile",
            border: InputBorder.none,
            hintStyle: TextStyle(
              color: Colors.black,
                fontSize: 15.0.
            ),
          ),
          style: new TextStyle(
              color: Colors.black,
              fontSize: 15.0,
           ),
          );
Paras Sharma
la source
Bienvenue dans Stack Overflow! Veuillez inclure au moins un certain contexte sur la façon dont cela fonctionne avec le code.
zixuan
0

Pour la saisie numérique ou le clavier numérique, vous pouvez utiliser keyboardType: TextInputType.number

TextFormField(
  decoration: InputDecoration(labelText:'Amount'),
    controller: TextEditingController(
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Enter Amount';
    }
  },
  keyboardType: TextInputType.number
)
bande de roulement khuram
la source