Flutter/UI/TextField
提供: 初心者エンジニアの簡易メモ
入力フォーム
TextFormField( decoration: InputDecoration( labelText: 'Enter your username' ), ),
複数行入力フォーム
Container( margin: EdgeInsets.all(8.0), // hack textfield height padding: EdgeInsets.only(bottom: 40.0), child: TextField( keyboardType: TextInputType.multiline, maxLines: 6, decoration: InputDecoration( hintText: "テキストを作成", border: OutlineInputBorder(), ), autofocus: true, onChanged: (text) { // value = text; }, ), ),
入力フォームにデフォルトで文字入力
TextEditingController _controller; @override void initState() { super.initState(); _controller = new TextEditingController(); _controller.text = "hogehoge"; // _controller = new TextEditingController(text: 'hogehoge'); // こちらでもよい } // 略 child: TextField( controller: _controller, keyboardType: TextInputType.multiline, ),
参考:https://stackoverflow.com/questions/43214271/how-do-i-supply-an-initial-value-to-a-text-field
入力フォームにスクロール追加
child: ListView( children: [ Container( padding: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 0.0), child: TextField( keyboardType: TextInputType.multiline, maxLines: 20, decoration: InputDecoration( hintText: "テキストを作成", ), autofocus: true, onChanged: (text) { // 変更時の処理 }, ), ), ], );
参考:http://karmactonics.hatenablog.com/entry/2018/09/08/102436
入力欄のスタイル(フォントサイズや色)
TextField( style: TextStyle( locale: Locale("ja", "JP"), color: Colors.red, fontSize: 20.0, ),
入力欄の下線を削除
TextField( decoration: InputDecoration( border: InputBorder.none, hintText: 'ここに入力', ), ),