Làm thế nào để tạo trường nhập số trong Flutter?

Tôi không thể tìm thấy cách tạo trường nhập liệu trong Flutter sẽ mở ra bàn phím số. Điều này có khả thi với các vật liệu Flutter không? Một số cuộc thảo luận trên github dường như chỉ ra rằng đây là một tính năng được hỗ trợ nhưng tôi không thể tìm thấy bất kỳ tài liệu nào về nó.

Bạn có thể chỉ định số làm keyboardType cho TextField bằng cách sử dụng:

keyboardType: TextInputType.number

Kiểm tra tệp main.dart của tôi

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

Đối với những người đang tìm kiếm TextFieldhoặc TextFormFieldchỉ chấp nhận các số làm đầu vào, hãy thử khối mã này:

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

Thông qua tùy chọn này, bạn có thể hạn chế nghiêm ngặt một char khác không có số.

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

Để sử dụng tùy chọn trên, bạn phải nhập

import 'package:flutter/services.dart';

sử dụng loại tùy chọn này, người dùng không thể dán ký tự vào trường văn bản

Đặt bàn phím và trình xác thực

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

• https://docs.flutter.io/flutter/material/TextFormField/TextFormField.html
• https://docs.flutter.io/flutter/services/TextInputType-class.html

Đối với những người cần làm việc với định dạng tiền trong các trường văn bản:

Chỉ sử dụng :, (dấu phẩy) và. (giai đoạn = Stage)

và chặn ký hiệu: - (gạch nối, dấu trừ hoặc dấu gạch ngang)

cũng như: ⌴ (khoảng trống)

Trong Trường văn bản của bạn, chỉ cần đặt mã sau:

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

Dấu gạch ngang và dấu cách của simbols sẽ vẫn xuất hiện trong bàn phím, nhưng sẽ bị chặn.

Bạn có thể sử dụng hai thuộc tính này cùng với TextFormField

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

Nó chỉ cho phép đặt số, không có thứ gì khác ..

https://api.flutter.dev/flutter/services/TextInputFormatter-class.html

Bạn có thể dễ dàng thay đổi Kiểu nhập bằng Thông số kiểu bàn phím và bạn có nhiều khả năng kiểm tra tài liệu TextInputType để bạn có thể sử dụng số hoặc giá trị điện thoại

 new TextField(keyboardType: TextInputType.number)

Bạn có thể thử điều này:

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

keyboardType: TextInputType.number sẽ mở một num pad trên tiêu điểm, tôi sẽ xóa trường văn bản khi người dùng nhập / qua bất kỳ thứ gì khác.

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;
}

Đây là mã cho bàn phím Điện thoại thực tế trên Android:

Phần chủ chốt: 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;
    },
  ),

Đây là mã cho bàn phím số: keyboardType: TextInputType.phone Khi bạn thêm mã này vào trường văn bản, nó sẽ mở ra bàn phím số.

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

Để nhập số hoặc bàn phím số, bạn có thể sử dụng keyboardType: TextInputType.number

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