Como criar um campo de entrada de número no Flutter?

127

Não consigo encontrar uma maneira de criar um campo de entrada no Flutter que abriria um teclado numérico. Isso é possível com widgets de material Flutter? Algumas discussões no github parecem indicar que este é um recurso compatível, mas não consigo encontrar nenhuma documentação sobre ele.

Janne Annala
fonte
adicionar tipo de teclado keyboardType: TextInputType.number,
Ishan Fernando

Respostas:

251

Você pode especificar o número como keyboardType para TextField usando:

keyboardType: TextInputType.number

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

insira a descrição da imagem aqui

Rissmon Suresh
fonte
3
Brilhante, obrigado! Eu realmente gostaria que a documentação do construtor do Flutter não estivesse tão mal formatada. Perdi completamente este.
Janne Annala
8
Mas eu posso colar os Textos (Personagens) nesse campo. Você tem alguma outra opção? @Rissmon Suresh
Thirumal Govindaraj
5
não se esqueça => import 'package: flutter / services.dart';
Wilmer
Permite colocar ponto, espaço e colar emoji
agilob
5
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly] também é necessário aqui, visto que vírgula e ponto ainda podem ser aceitos aqui na resposta.
Ravi Yadav
80

Para quem está procurando fazer TextFieldou TextFormFieldaceitar apenas números como entrada, tente este bloco de código:

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
fonte
3
Isso é bem-vindo para evitar que o usuário cole strings sem dígitos (inputFormatters), obrigado.
Mariano Argañaraz de
2
Isso funciona bem até mesmo no Flutter_web. A razão de estar em flutter_web não podemos impor um teclado numérico, então a restrição é a opção natural. Obrigado @ BilalŞimşek
Abhilash Chandran
1
Esta é a solução perfeita!
Kavinda Jayakody,
31

Através desta opção você pode restringir estritamente outro char sem número.

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

Para usar a opção acima, você deve importar este

import 'package:flutter/services.dart';

usando este tipo de opção o usuário não pode colar o caractere em um campo de texto

Hardik Kumbhani
fonte
esta é a resposta abrangente real. sem os formatadores, apenas configurar o teclado não é suficiente.
shababhsiddique
se eu quiser apenas decimais e dígitos. como adicionar o "." na lista de permissões do formatador?
shababhsiddique
19

Defina o teclado e um validador

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
fonte
Erro obtido: a variável local num não pode ser referenciada antes de ser declarada
kashlo
Ok, o nome numda variável não funciona. O nome precisa ser alterado
Günter Zöchbauer
1
Dos documentos: O parâmetro onError está obsoleto e será removido. Em vez de num.parse (string, (string) {...}), você deve usar num.tryParse (string) ?? (...).
kashlo
13

Para quem precisa trabalhar com formato de dinheiro nos campos de texto:

Para usar apenas :, (vírgula) e. (período)

e bloquear o símbolo: - (hífen, menos ou traço)

bem como: ⌴ (espaço em branco)

Em seu TextField, basta definir o seguinte código:

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

Os símbolos, hífen e espaço, ainda aparecerão no teclado, mas serão bloqueados.

Fellipe Sanches
fonte
Você sabe como permitir apenas uma vírgula ou ponto final?
Heddie Franco
1
@HeddieFranco leu sobre regex developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
Fellipe Sanches
2

Você pode facilmente alterar o tipo de entrada usando o parâmetro keyboardType e você tem muitas possibilidades, verifique a documentação TextInputType para que possa usar o número ou valor de telefone

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

Você pode tentar isto:

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

keyboardType: TextInputType.number abriria um teclado numérico no foco, limparia o campo de texto quando o usuário inserir / passar qualquer outra coisa.

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

Aqui está o código para o teclado real do telefone no Android:

Parte-chave: 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
fonte
0

Aqui está o código para teclado numérico: keyboardType: TextInputType.phone Quando você adiciona este código no campo de texto, ele abrirá o teclado numérico.

  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
fonte
Bem-vindo ao Stack Overflow! Inclua pelo menos algum contexto de como funciona com o código.
zixuan
0

Para entrada de número ou teclado numérico, você pode usar keyboardType: TextInputType.number

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