Flutter TextField

本ドキュメントでは、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にフォーカスを当てる。