「Flutter/UI/TextField」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→入力フォームにスクロール追加) |
(→入力欄の下線を削除) |
||
行99: | 行99: | ||
), | ), | ||
), | ), | ||
+ | </pre> | ||
+ | |||
+ | ==パスワードとか== | ||
+ | 数字4文字のパスワード | ||
+ | <pre> | ||
+ | TextField( | ||
+ | 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(() { | ||
+ | }); | ||
+ | }, | ||
+ | ); | ||
</pre> | </pre> |
2019年11月29日 (金) 01:52時点における版
目次
入力フォーム
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
入力フォームにスクロール追加
TextField( keyboardType: TextInputType.multiline, maxLines: null, decoration: InputDecoration( border: InputBorder.none, hintText: 'ここに入力', ), autofocus: true, textCapitalization: TextCapitalization.words, onChanged: (text) { // }, ),
入力フォームにスクロール追加
これはスクロール操作がおかしいので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( 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(() { }); }, );