Wie erstelle ich ein Zahleneingabefeld in Flutter?

124

Ich kann in Flutter keine Möglichkeit finden, ein Eingabefeld zu erstellen, das eine numerische Tastatur öffnet. Ist dies mit Flutter-Material-Widgets möglich? Einige Github-Diskussionen scheinen darauf hinzudeuten, dass dies eine unterstützte Funktion ist, aber ich kann keine Dokumentation dazu finden.

Janne Annala
quelle
Tastaturtyp hinzufügen tastaturtyp: TextInputType.number,
Ishan Fernando

Antworten:

245

Sie können die Nummer als Tastaturtyp für das TextField angeben, indem Sie:

keyboardType: TextInputType.number

Überprüfen Sie meine main.dart-Datei

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

Geben Sie hier die Bildbeschreibung ein

Rissmon Suresh
quelle
3
Genial, danke! Ich wünschte wirklich, die Flutter-Konstruktordokumentation wäre nicht so schlecht formatiert. Ich habe diesen komplett verpasst.
Janne Annala
8
Aber ich kann die Texte (Zeichen) in dieses Feld einfügen. Haben Sie noch andere Optionen? @ Rissmon Suresh
Thirumal Govindaraj
5
nicht vergessen => 'package: flutter / services.dart' importieren;
Wilmer
Ermöglicht das
Setzen von
5
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly] ist auch hier erforderlich, da Komma und Punkt hier in der Antwort weiterhin akzeptiert werden können.
Ravi Yadav
78

Versuchen Sie diesen Codeblock für diejenigen, die nur Zahlen als Eingabe erstellen TextFieldoder TextFormFieldakzeptieren möchten:

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
quelle
3
Dies ist willkommen, um zu vermeiden, dass der Benutzer nichtstellige Zeichenfolgen (inputFormatters) einfügt, danke.
Mariano Argañaraz
2
Dies funktioniert auch in Flutter_web gut. Der Grund dafür, dass wir in flutter_web keine numerische Tastatur erzwingen können, ist eine Einschränkung die natürliche Option. Danke @ BilalŞimşek
Abhilash Chandran
1
Das ist die perfekte Lösung!
Kavinda Jayakody
30

Durch diese Option können Sie ein anderes Zeichen ohne Nummer streng einschränken.

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

Um die obige Option verwenden zu können, müssen Sie diese importieren

import 'package:flutter/services.dart';

Mit dieser Option kann der Benutzer kein Zeichen in ein Textfeld einfügen

Hardik Kumbhani
quelle
Dies ist die eigentliche umfassende Antwort. Ohne die Formatierer reicht es nicht aus, nur die Tastatur einzustellen.
Shababhsiddique
wenn ich nur Dezimalstellen und Ziffern will. Wie füge ich das "." in die Whitelist des Formatierers?
Shababhsiddique
19

Stellen Sie die Tastatur und einen Validator ein

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
quelle
Erhaltener Fehler: Lokale Variable num kann nicht referenziert werden, bevor sie deklariert wird
Kashlo
Ok, der Name numfür die Variable funktioniert nicht. Der Name muss geändert werden
Günter Zöchbauer
1
Aus Dokumenten: Der Parameter onError ist veraltet und wird entfernt. Anstelle von num.parse (string, (string) {...}) sollten Sie num.tryParse (string) ?? (...).
Kashlo
13

Für diejenigen, die mit Geldformat arbeiten müssen in den Textfeldern arbeiten müssen:

Nur zu verwenden :, (Komma) und. (Zeitraum)

und blockieren Sie das Symbol: - (Bindestrich, Minus oder Bindestrich)

sowie die: ⌴ (Leerzeichen)

Legen Sie in Ihrem TextField einfach den folgenden Code fest:

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

Der Bindestrich und das Leerzeichen der Symbole werden weiterhin auf der Tastatur angezeigt, jedoch blockiert.

Fellipe Sanches
quelle
Wissen Sie, wie Sie nur ein Komma oder einen Punkt zulassen?
Heddie Franco
1
@ HeddieFranco las über regex developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
Fellipe Sanches
2

Sie können den Eingabetyp einfach mit dem Parameter keyboardType ändern, und Sie haben viele Möglichkeiten, die Dokumentation TextInputType zu überprüfen, damit Sie die Nummer oder den Telefonwert verwenden können

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

Sie können dies versuchen:

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

keyboardType: TextInputType.number würde ein Nummernfeld auf Fokus öffnen, ich würde das Textfeld löschen, wenn der Benutzer etwas anderes eingibt / hinter sich lässt.

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
quelle
1

Hier ist der Code für die aktuelle Telefontastatur unter Android:

Schlüsselteil: 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;
    },
  ),
Andrey
quelle
0

Hier ist der Code für die numerische Tastatur: keyboardType: TextInputType.phone Wenn Sie diesen Code in das Textfeld einfügen, wird die numerische Tastatur geöffnet.

  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
quelle
Willkommen bei Stack Overflow! Bitte geben Sie zumindest einen Kontext an, wie es mit dem Code funktioniert.
Zixuan
0

Für die Zahleneingabe oder die numerische Tastatur können Sie keyboardType: TextInputType.number verwenden

TextFormField(
  decoration: InputDecoration(labelText:'Amount'),
    controller: TextEditingController(
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Enter Amount';
    }
  },
  keyboardType: TextInputType.number
)
Khuram treten
quelle