よく使うのに毎回忘れるのでメモ
複数行入力する
3行まで表示
TextField(
keyboardType: TextInputType.multiline,
maxLines: 3,
)
![](https://i0.wp.com/mem-archive.com/wp-content/uploads/2023/12/textfield_maxline3.jpg?resize=291%2C90&ssl=1)
行数制限なしで表示
TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
)
![](https://i0.wp.com/mem-archive.com/wp-content/uploads/2023/12/textfield_maxline_null.jpg?resize=295%2C151&ssl=1)
下線を表示しない
TextField(
decoration: InputDecoration(
border: InputBorder.none,
),
)
![](https://i0.wp.com/mem-archive.com/wp-content/uploads/2023/12/no_line-1.jpg?resize=116%2C55&ssl=1)
プレースホルダーを表示する
TextField(
decoration: InputDecoration(
hintText: 'プレースホルダー', // プレースホルダーに表示した文字列
hintStyle: TextStyle(
color: Colors.grey, // プレースホルダーの文字列の色
)
),
),
![](https://i0.wp.com/mem-archive.com/wp-content/uploads/2024/06/textfield_placeholder.jpg?resize=385%2C80&ssl=1)
参考:
![](https://i0.wp.com/417.run/wp-content/uploads/2021/12/kaigyou2.gif?resize=160%2C90&ssl=1)
【Flutter】TextFieldで改行する方法
以下2行を追加 keyboardType: TextInputType.multiline, maxLines: null, 使い方 const TextField( style: TextStyle(fontSize: ...
![](https://i0.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?resize=160%2C90&ssl=1)
Flutter TextField デザイン サンプル集 - Qiita
前書き「あれ、TextFieldであの表現...どうするんだっけ...」となった時にでもこの記事を参照していただけますと幸いです。参考サイト…
コメント