1. ホーム
  2. dart

[解決済み】Flutterで数値入力フィールドを作成する方法は?

2022-04-18 21:29:52

質問

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

どのように解決するのですか?

として指定することができます。 キーボードタイプ に対して テキストフィールド を使用しています。

keyboardType: TextInputType.number

main.dartファイルを確認する

import 'package:flutter/material.dart';
import 'package:flutter/services.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>[
    FilteringTextInputFormatter.digitsOnly
], // Only numbers can be entered
          ),
        ],
      )),
    );
  }
}