🔢

キーボード入力を数字でやりたい

2023/02/04に公開

Flutter

inputnumber

tech

数字だけど文字

Flutterのキーボードで数字を入力したいと思って調べたら、keyboardType:TextInputType.numberというものがあった!
String型でないと入力できないみたいです。
電話番号の入力フォームに使えば便利そう。
こちらのサイトを参照

TextFieldにkeyboardType: TextInputType.numberを追加

TextField(
  keyboardType: TextInputType.number,
),

サンプルコード

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var inputNumber = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            TextField(
              onChanged: (value) {
                inputNumber = value;
              },
              keyboardType: TextInputType.number,
            ),
            ElevatedButton(
                onPressed: () {
                  print(inputNumber);
                  print(inputNumber.runtimeType);
                },
                child: Text('Test'))
          ],
        ),
      ),
    );
  }
}

スクリーンショット

実行結果

Reloaded 1 of 594 libraries in 1,006ms (compile: 23 ms, reload: 350 ms, reassemble: 450 ms).
I/flutter (11190): 070-4456 3896
I/flutter (11190): String

まとめ

毎回普通の入力フォームを使うと入力が面倒くさいので、数値だけ入力できる機能を使った方が、操作性が向上しますね。
電話番号以外に、郵便番号の入力で使えそうですね。

数字だけど文字

サンプルコード

スクリーンショット

まとめ

Discussion