web-dev-qa-db-fra.com

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

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ériau Flutter? Certaines discussions de github semblent indiquer qu'il s'agit d'une fonctionnalité prise en charge, mais je ne trouve aucune documentation à ce sujet.

dartflutter
23
Janne Annala

Vous pouvez spécifier le numéro sous la forme keyboardType pour le TextField using:

keyboardType: TextInputType.number

Vérifier 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,
          ),
        ],
      )),
    );
  }
}

 enter image description here

35
Rissmon Suresh

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
    ...
8
Günter Zöchbauer

pour ceux qui cherchent à faire que TextField ou TextFormField n'acceptent que des nombres. 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))
                )
2
Bilal Şimşek

Vous pouvez facilement changer le type d'entrée à l'aide de keyboardType Parameter Et vous avez beaucoup de possibilités, consultez la documentation TextInputType Afin que vous puissiez utiliser le numéro ou la valeur de téléphone.

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

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

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

et bloquer le symbole: - (tiret, signe 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 sont toujours présents sur le clavier, mais ils deviennent bloqués.

1
Fellipe Sanches

Vous pouvez essayer ceci:

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