結論を先にまとめると…
TextFieldのコンストラクタに以下のいずれかを指定する
- decoration: InputDecoration(counterText: ”,)
- inputFormatters:[LengthLimitingTextInputFormatter(1),]
(これを指定する場合maxLengthは消す)
本記事では、FlutterでTextFieldのmaxLengthを設定したときの、右下に出る文字数カウンタを非表示にする方法を2つ紹介します。
本記事では、右の状態を目指します!
文字数カウンタあり 文字数カウンタなし

本多
どっちの方法も数秒で簡単にできます!
手順は目次の通りです
方法1:decorationでカウンタを空文字にする
decorationプロパティにInputDecoration(counterText: ”,)を指定します。
child: TextField(
maxLength: 20,
decoration: InputDecoration(counterText: '',)
),
読んで字の如くですが、counterTextに空文字を指定しているので、文字数カウンタが表示されなくなります。
方法2:maxLengthではなくinputFormattersで文字数制限する
文字数制限をmaxLengthではなく、inputFormattersで指定します。
child: TextField(
// maxLength: 20,
inputFormatters: [
LengthLimitingTextInputFormatter(20)
]
),
補足ですが、LengthLimitingTextInputFormatter(20)の「20」の部分が文字数制限になります。
まとめ
本記事では、『【Flutter】TextFieldの文字数カウンタを消す方法2選』を紹介しました。
まとめ
TextFieldのコンストラクタに以下のいずれかを指定する
- decoration: InputDecoration(counterText: ”,)
- inputFormatters:[LengthLimitingTextInputFormatter(1),]
(これを指定する場合maxLengthは消す)

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