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

【Flutter】TextFieldの文字数カウンタを消す方法2選アイキャッチ 技術メモ
結論を先にまとめると…

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」と書いちゃってますが気にしないでください…

コメント

タイトルとURLをコピーしました