facebook twitter hatena line email

「Flutter/UI/TextField」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(入力フォームにデフォルトで文字入力)
(入力フォームにスクロール追加)
行43: 行43:
  
 
==入力フォームにスクロール追加==
 
==入力フォームにスクロール追加==
http://karmactonics.hatenablog.com/entry/2018/09/08/102436
+
<pre>
 +
return 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) {
 +
              // 変更時の処理
 +
            },
 +
          ),
 +
        ),
 +
      ],
 +
    );
 +
</pre>
 +
 
 +
参考:http://karmactonics.hatenablog.com/entry/2018/09/08/102436

2019年5月8日 (水) 15:09時点における版

入力フォーム

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

入力フォームにスクロール追加

return 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