![見出し画像](https://assets.st-note.com/production/uploads/images/99243394/rectangle_large_type_2_22cc03b3e38a058987a708b3ea04b984.jpeg?width=1200)
「FlutterFlow」 TextFieldの高さを変更する方法
みなさんこんにちは!Taiyoと申します!今回は、TextFieldの高さの変更について解説していきます!
Max LinesとMin Lines
FlutterFlowでアプリを作っている途中、ある違和感に気がつきました。あれ、TextFieldだけ高さの設定ができないぞと😇
![](https://assets.st-note.com/img/1677683761595-tYhhQAKahy.png?width=1200)
これでは、大きめのインプットを作成することができません!でもご心配なく!Google大先生に聞いたところ解決策がありました!
それは、MaxLines と MinLinesです!
![](https://assets.st-note.com/img/1677684242465-eT4hyJSUQH.png?width=1200)
使い方としては、MinLines を 1 に設定すると、TextField は通常どおり表示され、MaxLines を 5 に設定すると、TextField の 5 行目まで高さが増加します。
Text Fieldの応用編として自動拡張と、垂直スクロールバーの表示についても解説します!!
Text Fieldの自動拡張
TextFieldの自動拡張をするには、MaxLinesの値を削除し、MinLinesを1に設定します。
![](https://assets.st-note.com/production/uploads/images/99243057/picture_pc_64f0f42a871a4ef544d3cf9dbb282899.gif?width=1200)
垂直スクロールバーの表示
Text Fieldを数行まで自動拡張し垂直スクロールバーを表示してメッセージ全体を表示するには、最大行数をメッセージ全体を表示する値 (4 など) に設定し、最小行数を1に設定することで実装することができます!
![](https://assets.st-note.com/production/uploads/images/99243327/picture_pc_7e2eb765782ce0b4e6b04fe2a5e3be87.gif?width=1200)
みなさま良いFlutter Flowライフをお過ごしください〜!!ではまた〜🌞