Validator消息移动TextFormField的占位符

Question

我正在使用flutter创建一个登录页面。如果没有验证器错误，我的输入字段看起来像这样:InputImage

但是如果验证器返回一个消息，消息会移动我输入字段的图标和占位符，像这样:

InputImage2

我该如何修复它?

我的输入小部件代码如下:

class InputFieldWidget extends StatelessWidget {
final TextEditingController cnt;
final String placeholder;
final Widget? icon;
final GlobalKey formKey;
const InputFieldWidget(
{required this.cnt, required this.placeholder, required this.icon, required this.formKey} );
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Palette.lightGrey,
),
height: 50,
margin: EdgeInsets.all(10),
child: Form(
key: formKey,
child: TextFormField(
validator: (value){
if(value == null || value.isEmpty) {
return "      $placeholder is not valid!";
}
},
cursorColor: Palette.lightPurple,
controller: cnt,
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(vertical: 15),
prefixIcon: icon,
hintText: placeholder,
focusColor: Palette.lightPurple),
),
),
);
}
}

Answer 1

我定制了你的代码:

你不需要为你的Ui使用Container。TextFormField给我们的属性来实现像你的Ui:}

在示例代码下面，它可以帮助你:

import 'package:flutter/material.dart';
class InputFieldWidget extends StatelessWidget {
final TextEditingController cnt;
final String placeholder;
final Widget? icon;
final GlobalKey? formKey;
InputFieldWidget(
{required this.cnt,
required this.placeholder,
required this.icon,
this.formKey});
@override
Widget build(BuildContext context) {
return Form(
key: formKey,
child: TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return "      $placeholder is not valid!";
}
},
cursorColor: Colors.grey,
controller: cnt,
decoration: InputDecoration(
border: InputBorder.none,
fillColor: Palette.lightGrey, 
filled: true,
contentPadding: const EdgeInsets.symmetric(vertical: 15),
prefixIcon: icon,
hintText: placeholder,
focusColor: Colors.grey),
),
);
}
}