[Flutter]TextFormFieldに文字数(character counter)を表示するには？

どうも、ちょげ(@chogetarou)です。

TextFormFieldに文字数を表示する方法を紹介します。

方法
使用例

方法

TextFormFieldに文字数を表示するには、引数「onChanged」と引数「decoration」を使います。

まず、引数「onChanged」でテキストが変更された時に画面を再描画するようにします。

TextFormField(
  onChanged: (value) {
    setState(() {
      //Code
    });
  },
),

次に、TextFormFieldの引数「decoration」にInputDecorationを指定します。

そして、InputDecorationの引数「counterText」に、文字数をテキストとして指定します。

TextFormField(
  decoration: InputDecoration(
    counterText: '文字数',
  ),
  onChanged: (value) {
    setState(() {
      //Code
    });
  },
),

これでTextFormFieldに文字数が表示されます。

文字数のテキスト設定をするには、InputDecorationの引数「counterStyle」を使います。

TextFormField(
  decoration: InputDecoration(
    counterStyle: TextStyle(
      /*文字数のテキストの設定*/
    ),
  ),
),

使用例

以下は、使用例です。

  var _text = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextFormField(
            decoration: InputDecoration(
              counterText: '${_text.length}',
              counterStyle: TextStyle(
                color: Colors.pink,
                fontSize: 20,
              ),
            ),
            onChanged: (value) {
              setState(() {
                _text = value;
              });
            },
          ),
        ),
      ),
    );
  }