Bagaimana cara membuat field input angka di Flutter?


127

Saya tidak dapat menemukan cara untuk membuat kolom input di Flutter yang akan membuka keyboard numerik. Apakah ini mungkin dengan widget material Flutter? Beberapa diskusi github tampaknya menunjukkan bahwa ini adalah fitur yang didukung tetapi saya tidak dapat menemukan dokumentasi apa pun tentangnya.


tambahkan keyboard type keyboardType: TextInputType.number,
Ishan Fernando

Jawaban:


251

Anda dapat menentukan nomor sebagai keyboardType untuk BidangTeks menggunakan:

keyboardType: TextInputType.number

Periksa file main.dart saya

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

masukkan deskripsi gambar di sini


3
Brilian, terima kasih! Saya sangat berharap dokumentasi konstruktor Flutter tidak diformat dengan buruk. Sangat merindukan yang satu ini.
Janne Annala

8
Tetapi saya dapat menempelkan Teks (Karakter) di bidang itu apakah Anda memiliki opsi lain? @Resmon Suresh
Thirumal Govindaraj

5
jangan lupa => import 'package: flutter / services.dart';
Wilmer

Memungkinkan untuk meletakkan titik, spasi, dan menempelkan emoji
agilob

5
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly] juga diperlukan di sini, karena koma dan titik masih dapat diterima di sini dalam jawaban.
Ravi Yadav

80

Bagi mereka yang mencari membuat TextFieldatau TextFormFieldhanya menerima angka sebagai input, coba blok kode ini:

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)
    )
)

3
Ini dipersilakan untuk menghindari pengguna menempelkan string non digit (inputFormatters), terima kasih.
Mariano Argañaraz

2
Ini bekerja dengan baik bahkan di Flutter_web juga. Alasan berada di flutter_web kami tidak dapat menerapkan keyboard numerik jadi pembatasan adalah opsi alami. Terima kasih @ BilalŞimşek
Abhilash Chandran

1
Ini adalah solusi yang tepat!
Kavinda Jayakody

31

Melalui opsi ini Anda dapat secara ketat membatasi karakter lain tanpa nomor.

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

Untuk menggunakan opsi di atas, Anda harus mengimpor ini

import 'package:flutter/services.dart';

menggunakan opsi semacam ini, pengguna tidak dapat menempelkan karakter di bidang teks


ini adalah jawaban komprehensif yang sebenarnya. tanpa pemformat, pengaturan keyboard saja tidak cukup.
shababhsiddique

jika saya hanya ingin desimal dan angka. bagaimana menambahkan "." ke dalam daftar putih formatter?
shababhsiddique

19

Atur keyboard dan validator

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
    ...

Got error: Jumlah variabel lokal tidak dapat direferensikan sebelum dideklarasikan
kashlo

Oke, nama numvariabel tidak berfungsi. Nama perlu diubah
Günter Zöchbauer

1
Dari dokumen: Parameter onError tidak digunakan lagi dan akan dihapus. Daripada num.parse (string, (string) {...}), Anda harus menggunakan num.tryParse (string) ?? (...).
kashlo

13

Bagi mereka yang perlu bekerja dengan format uang di bidang teks:

Untuk hanya menggunakan :, (koma) dan. (Titik)

dan blok simbol: - (tanda hubung, minus atau tanda hubung)

serta: ⌴ (spasi kosong)

Di BidangTeks Anda, cukup setel kode berikut:

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

Tanda hubung dan spasi pada simbol akan tetap muncul di keyboard, tetapi akan terhalang.


Apakah Anda tahu cara mengizinkan hanya satu koma atau titik?
Heddie Franco

1
@HeddieFranco membaca tentang pengembang
Fellipe Sanches


2

Anda dapat dengan mudah mengubah Jenis Input menggunakan Parameter keyboardType dan Anda memiliki banyak kemungkinan untuk memeriksa dokumentasi TextInputType sehingga Anda dapat menggunakan nomor atau nilai telepon

 new TextField(keyboardType: TextInputType.number)

2

Anda bisa mencoba ini:

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

1

keyboardType: TextInputType.number akan membuka tombol angka pada fokus, saya akan menghapus bidang teks saat pengguna memasukkan / melewati hal lain.

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

Berikut adalah kode untuk keyboard Telepon yang sebenarnya di Android:

Bagian kunci: 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;
    },
  ),

0

Berikut adalah kode untuk keyboard numerik: keyboardType: TextInputType.phone Ketika Anda menambahkan kode ini di textfield maka keyboard numerik akan terbuka.

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

Selamat datang di Stack Overflow! Harap sertakan setidaknya beberapa konteks tentang cara kerjanya dengan kode.
zixuan

0

Untuk input angka atau keyboard numerik Anda dapat menggunakan keyboardType: TextInputType.number

TextFormField(
  decoration: InputDecoration(labelText:'Amount'),
    controller: TextEditingController(
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Enter Amount';
    }
  },
  keyboardType: TextInputType.number
)
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.