文字数カウンター Character Counter

入力欄の右下に「12 / 140」のように打った文字数が出る。上限に近づくと色が変わり、それ以上は打てない。

別名: 文字数制限残り文字数文字数表示140文字入力制限maxLengthCharacter Limit
動き: 打つと数字が増える上限に近づくと色が変わる
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

TextField に maxLength を渡すだけで、右下に「今の文字数 / 上限」が出て、上限を超えて打てなくなります。

maxLengthEnforcement: MaxLengthEnforcement.none にすると上限を超えても打て、超えた分は赤く表示されます（投稿前に削ってもらう形）。

表示を変えたいときは buildCounter で好きなウィジェットを返します。「残り 10 文字」と出したり、上限が近づいたら色を変えたりできます。

絵文字は1文字が2つ以上の単位になることがあるので、Flutter は「見た目の1文字」（書記素）で数えます。

こんなときに

投稿・自己紹介・ニックネームなど、上限のある文章

避けたい場面

上限のない入力にまで付ける（数字が気になって書きにくくなる）

最小コード

TextField(
  maxLength: 140,
  maxLines: 4,
  buildCounter: (context,
      {required currentLength, required isFocused, maxLength}) {
    final left = maxLength! - currentLength;
    return Text(
      '残り $left 文字',
      style: TextStyle(color: left <= 10 ? Colors.red : null),
    );
  },
)