Flutter TextFormFieldの入力欄とエラーメッセージの間隔を変えるサンプル

環境
Windows11 pro 64bit
Flutter 3.3.7

構文

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
decoration: InputDecoration(
errorStyle: TextStyle(
height: エラーテキストの高さ,
),
),
decoration: InputDecoration( errorStyle: TextStyle( height: エラーテキストの高さ, ), ),
 decoration: InputDecoration(
   errorStyle: TextStyle(
     height: エラーテキストの高さ,
   ),
),

TextFormFieldの入力欄とエラーメッセージの間隔を変えるには、InputDecorationを使います。

作成方法
1.TextFormFieldの引数「decoration」にInputDecorationを指定します。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
TextFormField(
decoration: InputDecoration(xxx
TextFormField( decoration: InputDecoration(xxx
TextFormField(
decoration: InputDecoration(xxx

2.InputDecorationの引数「errorStyle」にTextStyleを指定します。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
errorStyle: TextStyle(xxx
errorStyle: TextStyle(xxx
errorStyle: TextStyle(xxx

3. 引数「height」にエラーテキストの高さを指定します。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
height: xxxx
height: xxxx
height: xxxx

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
TextFormField(
decoration: InputDecoration(
errorStyle: TextStyle(
height: 6,
),
border: OutlineInputBorder(),
),
validator: (value) {
return 'ユーザー名を入力してください';
},
),
TextFormField( decoration: InputDecoration( errorStyle: TextStyle( height: 6, ), border: OutlineInputBorder(), ), validator: (value) { return 'ユーザー名を入力してください'; }, ),
TextFormField(
  decoration: InputDecoration(
    errorStyle: TextStyle(
      height: 6,
    ),
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    return 'ユーザー名を入力してください';
  },
),

 

Flutter

Posted by arkgame