💁

ダイアログで入力する英文字を大文字にだけにしたい

2024/06/10に公開

Tips💡

招待コードや何らかの英文字を入力したいユースケースで、小文字なし。大文字のみ入力したい場面があった。どうやら、カスタムクラスを作らないと実現できないようだ?

Formに入力されると表示されているテキストを小文字から大文字に変換するtoUpperCase()を使用したカスタムクラスを作成する。

/// [英語を大文字に変換するカスタムクラス]
class UpperCaseTextFormatter extends TextInputFormatter {
  
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    return TextEditingValue(
      text: newValue.text.toUpperCase(),
      selection: newValue.selection,
    );
  }
}

ダイアログのTextFormFieldに、カスタムクラスを組み込んでみる。

showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('招待コードを入力してください', style: TextStyle(fontSize: 16.0)),
          content: TextFormField(
            // 文字数8桁の制限
            maxLength: 8,
            // 英語は大文字に変換
            inputFormatters: [
              UpperCaseTextFormatter(),
            ],
            decoration: const InputDecoration(hintText: '招待コードを入力してください'),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('キャンセル'),
            ),
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('OK'),
            ),
          ],
        );
      },
    );

[こんな感じになります]

Discussion