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

Question

Je n'arrive 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 matériels de Flutter ? Certaines discussions sur github semblent indiquer qu'il s'agit d'une fonctionnalité prise en charge, mais je ne parviens pas à trouver de documentation à ce sujet.

Answer 1

Vous pouvez spécifier le nombre comme keyboardType pour le Champ de texte 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
          ),
        ],
      )),
    );
  }
}

Answer 2

Pour ceux qui cherchent à faire TextField ou TextFormField n'accepte que 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)
    )
)

Answer 3

Grâce à cette option, vous pouvez restreindre strictement une autre carte sans numéro.

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

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

import 'package:flutter/services.dart';

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

Answer 4

Définir 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
    ...

• https://docs.flutter.io/flutter/material/TextFormField/TextFormField.html
• https://docs.flutter.io/flutter/services/TextInputType-class.html

Answer 5

Pour ceux qui doivent travailler avec format de paiement dans les champs de texte :

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

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

ainsi que le : ⌴ (espace vide)

Dans votre TextField, il suffit de mettre le code suivant :

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

Les simboles trait d'union et espace apparaîtront toujours dans le clavier, mais seront bloqués.