英文:
Error message in flutter form is not showing completely
问题
以下是您要翻译的部分：
在为我的项目创建Flutter应用程序中的注册表单时，当表单不正确时，遇到了显示错误消息的问题。
以下是完整名称输入字段的代码。
SizedBox(
width: 200.0,
child: TextFormField(
decoration: kInputDecorationOfAuth,
onChanged: (value){
FullName=value;
},
validator: (value){
if(value== null) {
return "选项为空";
} else if (value.contains(RegExp(r'[0-9]'))) {
return "姓名不应包含数字。";
} else if(value.length < 5) {
return "姓名至少应包含5个字符";
}
return null;
},
)
),
至于常量 kInputDecorationOfAuth，以下是相应的代码。
const kInputDecorationOfAuth = InputDecoration(
errorStyle: TextStyle(color: Color(0xFFE3242B), fontFamily: "Eastman",),
hintText: '',
fillColor: Colors.white,
filled: true,
contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0xFF40513B), width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0xFF9DC08B), width: 3.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
);
现在的问题是错误消息显示得非常紧凑且不完整。对于表单的其余部分也是如此，但我只展示了完整名称的代码，因为它们几乎都相同。
以下是供参考的结果照片链接：
考虑到所有这些，如果有人可以帮助我修复这个问题，我将非常感激 :).
英文:
So while creating my Registration form in the flutter app for my project. I encountered a problem in the display of error messages when a form is not correct.
The following is the code for the Full name input field.
SizedBox(
width: 200.0,
child: TextFormField(
decoration: kInputDecorationOfAuth,
onChanged: (value){
FullName=value;
},
validator: (value){
if(value== null) {
return "option vide";
} else if (value.contains(RegExp(r'[0-9]'))) {
return "Le nom ne contient pas de chiffres.";
} else if(value.length <5) {
return"un nom doit avoir min 5 caractères";
}
return null;
},
)
),
As for the constant kInputDecorationOfAuth here is the code that corresponds to it.
const kInputDecorationOfAuth = InputDecoration(
errorStyle: TextStyle(color: Color(0xFFE3242B),fontFamily: "Eastman",),
hintText: '',
fillColor: Colors.white,
filled: true,
contentPadding:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0xFF40513B), width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0xFF9DC08B), width: 3.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
);
Now the problem is that the error message comes up very cramped and not complete. And this goes for the rest of the form, but I have just shown the code for Full name since they are pretty all the same.
Here is a photo of the result for reference:
With all of that in mind if someone can help me fix this I would be most appreciative :).
答案1
得分: 0
问题出在SizedBox上，您将TextFormField的宽度限制为200px。尝试使用Expanded小部件包装它，这将使TextFormField获得最大可用空间，或者如果您需要固定宽度为200，将此添加到您的InputDecoration中：
const InputDecoration(
errorMaxLines: 2,
英文:
The issue is with the SizedBox, you have restricted TextFormField width to 200px. Try wrapping it with an Expanded widget, which will enable the TextFormField to get the max available space or if you need a fixed width of 200, add this to your InputDecoration
const InputDecoration(
errorMaxLines: 2,
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论