Flutterでテキストフィールドが最大3行になるようにするには

Posted by on Wed, Aug 22, 2018

やりたいこと

Flutterで、LINEでメッセージ入力するときのように、テキストフィールドが最大3行になるようにしたい。 つまり、下の動画のようにしたい。

コード例とポイント説明

ポイントとなる部分だけのコードと説明します。

TextEditingControllerを使って、TextFieldに入力されたテキスト取得できるようにしておきます。

また、TextFieldになにか変更があったら通知されるlistenerを登録します。

_textEditingController.addListener(_textEditListener);

このとき通知される関数はここでは_textEditListenerとしていて、変更があるたびに _maxLinesにセットされます。

次に、TextFormFieldのプロパティのkeyboardTypeは複数行に最適なmultilineを設定し、キーボードのエンターキーに当たる部分の改行できるように変更します。

keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.newline,

maxLinesnullを指定すると、どこまででも改行します。

maxLines: _maxLines

これらを組み合わせて、テキストが入力されるたびに改行コードを数え、改行コードが2つ以上(全体としては3行になっている)の場合は、maxLines3に設定すればいいので、_textEditListener関数で次のようにしています。

void _textEditListener() {
  setState(() {
    // TextFieldに改行が2つ以上入っていたら、3行以上になるので、3行までに止める。
    _maxLines = '\n'.allMatches(_textEditingController.text).length >= 2 ? 3 : null;
  });
}

これで最初の動画のような動きになります。



comments powered by Disqus