本ドキュメントでは、FlutterのTextFieldについて記述する。
以降の内容は、上記TextField一覧図の各TextField取得関数についてまとめる。
TextField
Widget getTextField() { TextEditingController tmpTextEditingController = TextEditingController(text: 'TextField Controller'); return TextField( controller: tmpTextEditingController, decoration: InputDecoration( hintText: 'TextField(Hint)', ), onChanged: (String text) {}, ); }
TextField Decoration Hint
Widget getTextFieldDecorationHint() { return TextField( decoration: InputDecoration( hintText: 'TextField Decoration Hint', ), onChanged: (String text) {}, ); }
TextField Decoration Label
Widget getTextFieldDecorationLabel() { return TextField( decoration: InputDecoration( labelText: 'TextField Decoration Label', ), onChanged: (String text) {}, ); }
TextField Decoration Label In Text
Widget getTextFieldDecorationLabelInText() { TextEditingController tmpTextEditingController = TextEditingController(text: 'In Text'); return TextField( controller: tmpTextEditingController, decoration: InputDecoration( labelText: 'TextField Decoration Label', ), onChanged: (String text) {}, ); }
TextField Decoration Error
Widget getTextFieldDecorationError() { return TextField( decoration: InputDecoration( errorText: 'TextField Decoration Error', ), onChanged: (String text) {}, ); }
TextField Decoration Border (外枠)
Widget getTextFieldDecorationBorder() { return TextField( decoration: InputDecoration( hintText: 'TextField Decoration Border', border: OutlineInputBorder(), ), onChanged: (String text) {}, ); }
TextField Decoration Border In Label
Widget getTextFieldDecorationBorderInLabel() { TextEditingController tmpTextEditingController = TextEditingController(text: 'TextField Decoration Border'); return TextField( decoration: InputDecoration( labelText: ' In Label', border: OutlineInputBorder(), ), controller: tmpTextEditingController, onChanged: (String text) {}, ); }
TextField MaxLine (最大行数)
Widget getTextFieldMaxLine() { TextEditingController tmpTextEditingController = TextEditingController(text: 'TextField MaxLine 1\nTextField MaxLine 2\nTextField MaxLine 3\n'); return TextField( controller: tmpTextEditingController, maxLines: 2, onChanged: (String text) {}, ); }
TextField KeyboardType Multiline (自動改行)
Widget getTextFieldKeyboardTypeMultiline() { TextEditingController tmpTextEditingController = TextEditingController(text: 'TextField Keyboard Type Multiline 1\nTextField Keyboard Type Multiline 2'); return TextField( keyboardType: TextInputType.multiline, maxLines: null, controller: tmpTextEditingController, onChanged: (String text) {}, ); }
TextField TextCapitalization Characters (大文字入力)
Widget getTextFieldTextCapitalizationCharacters() { TextEditingController tmpTextEditingController = TextEditingController(text: 'TEXTFIELD CAPITALIZATION CHARACTERS'); return TextField( textCapitalization: TextCapitalization.characters, controller: tmpTextEditingController, onChanged: (String text) {}, ); }
その他
以下UIに反映されないため、TextField一覧図に表示されていない項目
TextField InputFormatter (半角英数字のみ許容)
Widget getTextFieldInputFormatter() { return TextField( inputFormatters: <TextInputFormatter>[ FilteringTextInputFormatter.allow(RegExp(r'^[0-9a-zA-Z@_.-]+$')), ], decoration: InputDecoration( hintText: 'TextField InputFormatter', ), onChanged: (String text) {}, ); }
TextField (フォーカス指定)
Widget getTextFieldFocusNode() { FocusNode tmpFocusNode = FocusNode(); return TextField( focusNode: tmpFocusNode, decoration: InputDecoration( hintText: 'TextField FocusNode', ), onChanged: (String text) {}, ); }
FocusNode.requestFocus()メソッドにて、対象のTextFieldにフォーカスを当てる。