facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(パスワードとか)
(入力フォームにスクロール追加)
 
(同じ利用者による、間の3版が非表示)
行1: 行1:
  
==入力フォーム==
+
==入力フォーム(項目名をつける)==
 
  TextFormField(
 
  TextFormField(
 
               decoration: InputDecoration(
 
               decoration: InputDecoration(
 
                   labelText: 'Enter your username'
 
                   labelText: 'Enter your username'
 +
              ),
 +
),
 +
==入力フォーム(項目名+枠線をつける)==
 +
TextFormField(
 +
              decoration: InputDecoration(
 +
                  labelText: 'Enter your username',
 +
                  border: OutlineInputBorder()
 
               ),
 
               ),
 
  ),
 
  ),
行58: 行65:
 
       ),
 
       ),
 
</pre>
 
</pre>
==入力フォームにスクロール追加==
+
==入力フォームにスクロール追加(NG)==
 
これはスクロール操作がおかしいのでNG。201911現在では上のものでスクロールする。
 
これはスクロール操作がおかしいのでNG。201911現在では上のものでスクロールする。
 
<pre>
 
<pre>
行110: 行117:
 
       //maxLengthEnforced: false,
 
       //maxLengthEnforced: false,
 
       style: TextStyle(
 
       style: TextStyle(
           color: Colors.black,
+
           // color: Colors.black,
 
           locale: Locale("ja", "JP")),
 
           locale: Locale("ja", "JP")),
 
       obscureText: true,
 
       obscureText: true,
行124: 行131:
 
       },
 
       },
 
     );
 
     );
 +
</pre>
 +
color: Colors.black,はダークモードが効かなくなるので、記述しない方が良い。
 +
 +
==入力変更イベント==
 +
<pre>
 +
TextField(
 +
  onChanged: (text) {
 +
    if (text.length > 0) {
 +
      setState(() {
 +
        searchText = text;
 +
      });
 +
    }
 +
  },
 +
)
 
</pre>
 
</pre>

2020年1月28日 (火) 19:11時点における最新版

入力フォーム(項目名をつける)

TextFormField(
             decoration: InputDecoration(
                 labelText: 'Enter your username'
             ),
),

入力フォーム(項目名+枠線をつける)

TextFormField(
             decoration: InputDecoration(
                 labelText: 'Enter your username',
                 border: OutlineInputBorder()
             ),
),

複数行入力フォーム

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

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

TextField(
        keyboardType: TextInputType.multiline,
        maxLines: null,
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: 'ここに入力',
        ),
        autofocus: true,
        textCapitalization: TextCapitalization.words,
        onChanged: (text) {
          //
        },
      ),

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

これはスクロール操作がおかしいのでNG。201911現在では上のものでスクロールする。

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: 'ここに入力',
      ),
),

パスワードとか

数字4文字のパスワード

TextField(
      keyboardType: TextInputType.number,
      enabled: true,
      maxLength: 4,
      //maxLengthEnforced: false,
      style: TextStyle(
          // color: Colors.black,
          locale: Locale("ja", "JP")),
      obscureText: true,
      maxLines:1 ,
      decoration: const InputDecoration(
        icon: Icon(Icons.vpn_key),
        hintText: '数字4文字',
        labelText: 'パスロック *',
      ),
      onChanged: (String newValue) {
        setState(() {
        });
      },
    );

color: Colors.black,はダークモードが効かなくなるので、記述しない方が良い。

入力変更イベント

TextField(
  onChanged: (text) {
    if (text.length > 0) {
      setState(() {
        searchText = text;
      });
    }
  },
)