やりたいこと
Flutterで、LINEでメッセージ入力するときのように、テキストフィールドが最大3行になるようにしたい。 つまり、下の動画のようにしたい。
コード例とポイント説明
ポイントとなる部分だけのコードと説明します。
TextEditingControllerを使って、TextFieldに入力されたテキスト取得できるようにしておきます。
また、TextFieldになにか変更があったら通知されるlistenerを登録します。
_textEditingController.addListener(_textEditListener);
このとき通知される関数はここでは_textEditListenerとしていて、変更があるたびに _maxLinesにセットされます。
次に、TextFormFieldのプロパティのkeyboardTypeは複数行に最適なmultilineを設定し、キーボードのエンターキーに当たる部分の改行できるように変更します。
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.newline,
maxLinesはnullを指定すると、どこまででも改行します。
maxLines: _maxLines
これらを組み合わせて、テキストが入力されるたびに改行コードを数え、改行コードが2つ以上(全体としては3行になっている)の場合は、maxLinesを3に設定すればいいので、_textEditListener関数で次のようにしています。
void _textEditListener() {
setState(() {
// TextFieldに改行が2つ以上入っていたら、3行以上になるので、3行までに止める。
_maxLines = '\n'.allMatches(_textEditingController.text).length >= 2 ? 3 : null;
});
}
これで最初の動画のような動きになります。
comments powered by Disqus