wake-up-neo.net

Wie erstelle ich ein Zahleneingabefeld in Flutter?

Ich kann keinen Weg finden, ein Eingabefeld in Flutter zu erstellen, das eine numerische Tastatur öffnen würde. Ist das mit Flattermaterial-Widgets möglich? Einige Github-Diskussionen deuten darauf hin, dass dies eine unterstützte Funktion ist, ich kann jedoch keine Dokumentation dazu finden.

23
Janne Annala

Sie können die Nummer als keyboardType für das TextField angeben:

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

 enter image description here

35
Rissmon Suresh

Legen Sie die Tastatur und einen Prüfer fest

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

für diejenigen, die suchen, dass TextField oder TextFormField nur Zahlen akzeptiert. Versuchen Sie diesen Codeblock. 

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

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

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

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

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

und blockiere das Symbol: - (Bindestrich, Minuszeichen oder Bindestrich)

sowie die: ⌴ (Leerzeichen)

Setzen Sie in Ihrem Textfeld einfach den folgenden Code:

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

Die Symbole für Bindestrich und Leerzeichen werden weiterhin auf der Tastatur angezeigt, werden jedoch blockiert.

1
Fellipe Sanches

keyboardType: TextInputType.number würde einen Nummernblock mit Fokus öffnen, ich würde das Textfeld löschen, wenn der Benutzer etwas anderes eingibt/daran vorbeigeht.

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;
}
1
Lahar Shah

Sie können dies versuchen:

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