【Flutter】TextFieldの文字数カウンタを消す方法2選

結論を先にまとめると…

TextFieldのコンストラクタに以下のいずれかを指定する

本記事では、FlutterでTextFieldのmaxLengthを設定したときの、右下に出る文字数カウンタを非表示にする方法を2つ紹介します。

本記事では、右の状態を目指します！

本多

どっちの方法も数秒で簡単にできます！

手順は目次の通りです

方法1：decorationでカウンタを空文字にする

decorationプロパティにInputDecoration(counterText: ”,)を指定します。

child: TextField(
    maxLength: 20,
    decoration: InputDecoration(counterText: '',)
),

読んで字の如くですが、counterTextに空文字を指定しているので、文字数カウンタが表示されなくなります。

文字数制限をmaxLengthではなく、inputFormattersで指定します。

child: TextField(
    // maxLength: 20,
    inputFormatters: [
      LengthLimitingTextInputFormatter(20)
    ]
),

補足ですが、LengthLimitingTextInputFormatter(20)の「20」の部分が文字数制限になります。

本記事では、『【Flutter】TextFieldの文字数カウンタを消す方法2選』を紹介しました。

まとめ

TextFieldのコンストラクタに以下のいずれかを指定する

本多

本記事の画像では、「TextField」のことを「TextFiled」と書いちゃってますが気にしないでください…