[Flutter]iOS環境でキーボードにドットが表示されない

4727 ワード
テキストリンク

iOS独自仕様の影響でバグが発生したので、個人用メモです

TextFieldに数値のみ入力させたい

TextFieldを使って小数を含む数値のみ入力したい場合、keyboardTypeとinputFormattersプロパティを適用すれば、いい感じに入力制限できます。

TextField(
...
keyboardType: const TextInputType.numberWithOptions(decimal: true),
inputFormatters: [フィルター]
)

フィルタークラス（整数9桁、小数6桁とドット一文字を許可する）

class DecimalTextInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
  final regEx = RegExp(r"^\d{0,9\.?\d{0,6}");
      String newString = regEx.stringMatch(newValue.text) ?? "";
      return newString == newValue.text ? newValue : oldValue;
  }
}

Androidでは問題ないけど、iOSだと動かへん...?

iOS動かしてみたら小数桁の入力ができない！？　よく見るとiPhone8のキーボードにドットが表示されておらず
言語設定ロケールによって、ドットだったりカンマになるようです？👀　（なんなんこの仕様...）
まぁ国によって小数の区切りがカンマとかドットになるのは知っているけど。
statckoverflowとかapple developer見たけど、ドット文字を強制的に表示させる方法は無いようです。xcodeからロケールをUSなどに設定すればドットが表示されるらいしいけど、自分環境では再現できず。

別の方法としてはカンマをドットに変換するやり方が良さそう。

ってことでAndroidとiOSで別々に実装にしてみた。

使い方はこんな感じ

TextField(
...
keyboardType: const TextInputType.numberWithOptions(decimal: true)
inputFormatters: [DecimalTextInputFormatter(defaultTargetPlatform)]
)
Supabase を使ってユーザー招待を実装する
【eslint】or条件のpathを追加