🍎

【Flutter】TextFieldに文字数や文字の種類を制限する方法

2023/07/08に公開

Flutter

TextFieldとは

Textを入力できるWidgetです。

文字数や文字の種類を制限する方法

下記のソースコードを使って解説します。

まず、最大文字数を８文字にする設定について解説します。
TextFieldのinputFormattersにLengthLimitingTextInputFormatter(8),と記載します。
こうすることで、最大文字数を８文字にすることができます。

LengthLimitingTextInputFormatterとは、使用されるテキストの長さを制限するためのフォーマッターです。
こちらの引数(maxLength)に8を渡すことで、最大文字数を８に設定することができます。

次に、半角英数字のみ入力可能にする方法について解説します。
FilteringTextInputFormatterのallowメソッドの引数に入力を許可する文字の条件を渡します。
今回の場合ですと、RegExp(r'[a-zA-Z0-9]')を渡し、半角英数字のみ入力できるようにしています。

FilteringTextInputFormatterとは、テキストの入力を制御するためのフォーマッターです。

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AppBar'),
        ),
        body: Column(
          children: [
            TextField(
              controller: controller,
              keyboardType: TextInputType.text,
              inputFormatters: [
                // 最大8文字まで入力可能
                LengthLimitingTextInputFormatter(8),
                // 半角英数字のみ許可
                FilteringTextInputFormatter.allow(
                  RegExp(r'[a-zA-Z0-9]'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

RegExpとは

RegExpは、正規表現（Regular Expression）を表すためのオブジェクトです。
正規表現は、文字列のパターンを表現するためのツールです。
DartとFlutterでは、RegExpクラスを使用して正規表現を作成および操作します。

RegExp(r'[a-zA-Z0-9]')の引数がどういった意味があるか解説します。

rは、Raw String（生の文字列）を示すプレフィックスです。Raw Stringは、エスケープ文字（\など）を特別な意味ではなく、そのままの文字として扱うことができる文字列です。
ですので、r'文字列'とすることで、文字列の中にエスケープ文字があったとしても、それら全てをそのままの文字として扱うことができます。

[ ]は、指定した文字のどれかを判定します。
今回の場合ですと、[a-zA-Z0-9]としているので、aからzまでの文字とAからZまでの文字と0から9までの文字を入力することができます。

TextFieldとは

文字数や文字の種類を制限する方法

RegExpとは

Discussion