web-dev-qa-db-ja.com

Flutterで数値入力フィールドを作成する方法は？

Flutterで数値キーボードを開く入力フィールドを作成する方法が見つかりません。これはFlutterマテリアルウィジェットで可能ですか？いくつかのgithubの議論は、これがサポートされている機能であることを示しているようですが、それに関するドキュメントを見つけることができません。

dartflutter
42
Janne Annala

次を使用して、 keyboardType として TextField として番号を指定できます。

keyboardType: TextInputType.number

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

enter image description here

83
Rissmon Suresh

TextFieldまたはTextFormFieldが入力として数字のみを受け入れるようにしたい場合は、次のコードブロックを試してください。

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)
    )
)
19
Bilal Şimşek

キーボードとバリデーターを設定します

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
    ...
13
Günter Zöchbauer

テキストフィールドでmoney formatを使用する必要がある場合：

のみを使用する場合：、（カンマ）および。 （期間）

シンボルをブロックします：-（ハイフン、マイナス、またはダッシュ）

同様に：⌴（空白スペース）

TextFieldで、次のコードを設定するだけです。

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

記号のハイフンとスペースは引き続きキーボードに表示されますが、ブロックされます。

5
Fellipe Sanches

keyboardType パラメータを使用して入力タイプを簡単に変更でき、ドキュメントを確認する多くの可能性があります TextInputType 数値または電話値を使用できます

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

keyboardType: TextInputType.numberはフォーカス時にnumパッドを開きます。ユーザーが何かを入力または貼り付けると、テキストフィールドがクリアされます。

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

これを試すことができます：

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