【Flutter】テキストフィールドウィジェット
Flutter
2021/09/24
TextField
Flutter でテキストフィールドは、TextFieldを用います。
以下の例では、ボタンを押すことで入力した内容をテキストに反映します。
class MyForm extends StatefulWidget {
@override
_MyFormState createState() => _MyFormState();
}
class _MyFormState extends State<MyForm> {
var _message = '';
final controller = TextEditingController();
void _apply() {
setState(() {
_message = controller.text;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Padding(
padding: EdgeInsets.all(10),
child: TextField(controller: controller),
),
Padding(
padding: EdgeInsets.all(10),
child: ElevatedButton(
child: Text("Apply"),
onPressed: _apply,
)),
Padding(
padding: EdgeInsets.all(10),
child: Text(_message),
)
],
);
}
}Controller
Controllerは、ウィジェットの値を管理するためのクラスです。
上記の例でもTextEditingController()として、TextFieldのcontrollerプロパティに設定することで入力値を管理しています。
//Controllerの定義
final controller = TextEditingController();
//Controllerの設定
TextField(
controller: controller,
)
//Controllerから値の取得
_message = controller.text;制御
以下のプロパティにより、TextFieldの各制御の設定を行います。
入力制御
readOnly：読み込み専用に設定enabled：入力可否を設定inputFormatters：正規表現により入力可能な文字の制限を設定FilteringTextInputFormatter.allow()：一致するものを許可FilteringTextInputFormatter.deny()：一致しないものを許可
readOnly: true,
enabled: true,
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp(r'[a-z]')), //英小文字のみ許可
FilteringTextInputFormatter.deny(RegExp(r'[0-9]')), //数字以外を許可
],文字数制御
maxLength：入力可能な最大文字数を設定maxLengthEnforcement：最大文字数を超える入力に対する制御none：最大文字数以上入力可能enforced：最大文字数以上の入力は不可truncateAfferCompositionEnds：最大文字数以上入力可能だが、入力完了時に切り捨てられる
maxLength: 10,
maxLengthEnforcement: MaxLengthEnforcement.none,行数制御
maxLines：入力可能な最大行数を設定minLines：入力可能な最小行数を設定expands：maxLines: nullが設定されている場合、高さを親ウィジェットと同じに設定
maxLength: 10,
maxLines: 3,
minLines: 1,
expands: true,表示制限
obscureText：入力した文字を隠すように設定（パスワード）obscuringCharacter：隠す文字を設定（デフォルトは ●）
obscureText: true,
obscuringCharacter: '*',デコレーション
TextFieldのデザインやラベル、ヒントなどの設定を、decorationプロパティにInputDecorationによって行います。
詳細についてはこちらを参照してください。
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'ラベル',
helperText: 'ヘルパー',
icon: Icon(Icons.edit),
),
)Label / Helper / Hint / Counter
Label
labelText：ラベルのテキストlabelStyle：ラベルのスタイル
labelText: 'ラベル',
labelStyle: TextStyle(
color: Colors.red,
),Helper
helperText：ヘルパーの内容helperStyle：ヘルパーのスタイルhelperMaxLines：ヘルパーの表示最大行
helperText: 'ヘルパー',
helperStyle: TextStyle(
color: Colors.gray,
),
helperMaxLines: 3,Hint
hintText：ヒントの内容hintStyle：ヒントのスタイルhintMaxLines：ヒントの最大行
hintText: 'ヒント',
hintStyle: TextStyle(
color: Colors.red,
),
hintMaxLines: 3,Counter
counterText：カウンターのテキスト（maxLengthのテキストを上書き）counterStyle：カウンターのスタイル
counterText: 'カウンター',
counterStyle: TextStyle(
color: Colors.blue,
),Filled
filled：背景の ON/OFFfillColor：背景色
filled: true,
fillColor: Colors.blue[50],Border
border：線の設定UnderlineInputBorder：下線OutlineInputBorder：囲み線
border: OutlineInputBorder(),Enabled
enabled：enabled の ON/OFFenabledBorder：enabled 時の線の設定disabledBorder：disabled 時の線の設定
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),disabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.yellow,
),
),
enabled: false,Error
errorText：エラーテキストerrorStyle：エラーテキストのスタイルerrorMaxLines：エラーテキストの最大行errorBorder：エラー時線の設定
errorText: 'エラーメッセージ',
errorStyle: TextStyle(
color: Colors.red,
),
errorMaxLines: 3,
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
),Focus
focusedBorder：フォーカス時の線の設定（通常時）focusedErrorBorder：フォーカス時の線の設定（エラー時）
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
),Prefix
prefixText：プレフィックス（接頭辞）にテキストを設定prefixStyle：プレフィックスのスタイルを設定prefixIcon：プレフィックスにアイコンを設定prefixIconConstraints：プレフィックスのアイコン部分のサイズ
prefixText: 'Pre',
prefixStyle: TextStyle(
color: Colors.blue,
),
prefixIcon: Icon(Icons.edit),
prefixIconConstraints: BoxConstraints.expand(width: 30),Suffix
suffixText：サフィックス（接尾辞）にテキストを設定suffixStyle：サフィックスのスタイルを設定suffixIcon：サフィックスにアイコンを設定suffixIconConstraints：サフィックスのアイコン部分のサイズ
suffixText: 'Suf',
suffixStyle: TextStyle(
color: Colors.blue,
),
suffixIcon: Icon(Icons.edit),
suffixIconConstraints: BoxConstraints.expand(width: 30),Icon
icon：アイコンを設定
icon: Icon(Icons.edit),その他
contentPadding：パディングの設定isCollapsed：入力スペースのみに設定idDense：高さを低く設定
contentPadding: EdgeInsets.all(10),
isCollapsed: true,
isDense: true,キーボード
以下のプロパティにより、入力に使用するキーボードの設定を行います。 言語やプラットフォームによって機能しないものもあります。
KeyboardType
キーボードの種類を設定します。
keyboardType: TextInputType.text,text：テキストmultiline：複数行入力（maxLines: nullの設定が必要）number：数字phone：電話番号datetime：日時emailAddress：メールアドレスurl：URLvisiblePassword：パスワードname：人名streetAddress：住所
TextInputAction
キーボードの入力完了ボタンのマークを設定します。
textInputAction: TextInputAction.done,nonedonesearchgosendnextprevious
TextCapitalization
英字キーボードの大文字・小文字の入力を制御します。
textCapitalization: TextCapitalization.characters,none：すべて小文字入力characters：すべて大文字入力sentences：文章の最初のみ大文字入力word：単語の最初のみ大文字入力
イベント
以下のプロパティにより、イベントに関する処理の設定を行います。
onTap
TextFieldをタップした時の処理を設定します。
onTap: () => print('Tap!!'),onChanged
入力値が変化した時の処理を設定します。
onChanged: (text) => print('Changed!!'),onEditingComplete
キーボードの完了ボタンを押した時の処理を設定します。
onEditingComplete: () => print('Editing Complete!!'),onSubmitted
キーボードの完了ボタンを押した時の処理を設定します。
onEditingCompleteとは、引数に入力値を持つ点と、TextInputAction.noneを設定した場合は発火しない点が異なります。
onSubmitted: (text) => print('Submitted!!'),