FlutterのTextField要素について

概要

TextFieldウィジェットは、ユーザに文字を入力させたいときに使用する。

以下にコード例を示す。

TextField(),

これは、最も最小なTextFieldの形態である。

TextFieldはInputDecorationによって装飾可能である。

以下にコード例を示す。

TextField( 
	decoration: InputDecoration( 
		border: InputBorder.none, 
		hintText: '入力',
		autoFocus: true,
	), 
);

TextField内のdecorationプロパティにて装飾を行うことが出来る。
このコードでは、ボーダーをなくして、htmlでいうplaceholderを付けている。
autoFocusプロパティは、この要素が描画されたときに、自動的にキーボードを出すかどうかを決めるものである。

maxLinesプロパティをnullに設定する。

maxLines: null,

TextFieldの値の取得には、onChangedプロパティを使用する。

String _enteredText = "";
 
TextField(
	decoration: InputDecoration(
		hintText: '入力',
	),
	onChanged: (textArg) {
		_enteredText = textArg;
	},
),

TextFormに最初から値を入れるには、TextEditingControllerを使用する。

final _textController = TextEditingController(text: "初期値");