![](/img/trans.png)
[英]Flutter error message in TextFormField resizes the text field as well as there is huge padding
[英]TextFormField "error message" breaks the shadow applied to the Text Field
我制作了一個 TextField 構建器並對其進行了自定義,並使用“Material”小部件為其添加了陰影當在應用程序中向用戶顯示錯誤消息時,TextField 被向上推,但陰影本身保持在原來的位置(包括代碼和圖片以下)
import 'package:flutter/material.dart';
import 'constants.dart';
class TextFieldBuilder extends StatefulWidget {
TextFieldBuilder({
Key key,
this.icon,
this.hint,
this.obscure,
this.height,
this.fontSize,
this.iconSize,
this.fillColor,
this.hintFontSize,
this.iconColor,
this.validatorFunction,
this.textInputType,
this.initialValue,
this.onSavedFunc,
}) : super(key: key);
final IconData icon;
final String hint;
final bool obscure;
final height, fontSize, iconSize, fillColor, hintFontSize;
final iconColor;
final validatorFunction;
final textInputType;
final initialValue;
final onSavedFunc;
@override
_TextFieldBuilderState createState() => _TextFieldBuilderState();
}
class _TextFieldBuilderState extends State<TextFieldBuilder> {
var _data;
@override
Widget build(BuildContext context) {
return Container(
child: Material(
color: Colors.transparent,
borderRadius: BorderRadius.circular(9),
child: Container(
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(9), boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.15),
blurRadius: 4,
offset: Offset(1, 3),
)
]),
child: TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
initialValue: widget.initialValue ?? null,
keyboardType: widget.textInputType ?? null,
onSaved: widget.onSavedFunc ??
(String value) {
_data = value.trim();
if (widget.hint != password &&
widget.hint != 'Confirm Password') {
print('${widget.hint} is $_data');
}
},
validator: widget.validatorFunction,
style: TextStyle(
color: Color(textColor),
fontSize: widget.fontSize ?? 18,
),
obscureText: widget.obscure ?? false,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 1.0),
prefixIcon: Icon(
widget.icon ?? Icons.error,
size: widget.iconSize ?? 35,
color: widget.iconColor ?? Color(iconColor),
),
filled: true,
fillColor: Color(textFieldColor),
hintText: widget.hint ?? placeholder,
hintStyle: TextStyle(
color: Color(textColor),
fontSize: widget.fontSize ?? 18,
height: widget.height ?? 0.9,
),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(9),
),
focusColor: Color(textFieldColor),
),
),
),
),
);
}
}
將您的TextField
與Text
結合起來,並將兩者都放在Column
中。 您將能夠復制錯誤顯示而不會弄亂陰影。 記住也要隱藏默認錯誤消息。
您可以使用Material
的elevation
和shadowColor
屬性來節省一些代碼行。 就像是:
Material(
color: Colors.transparent,
borderRadius: BorderRadius.circular(9),
elevation: 4,
shadowColor: Colors.black.withOpacity(0.15),
// ... other lines
);
示例代碼:
// ... other lines
class _TextFieldBuilderState extends State<TextFieldBuilder> {
var _data;
String _errorText = '';
@override
Widget build(BuildContext context) {
return Container(
//!! Place both Widgets inside a Column
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Material(
color: Colors.transparent,
borderRadius: BorderRadius.circular(9),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.15),
blurRadius: 4,
offset: Offset(1, 3),
)
]),
child: TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
initialValue: widget.initialValue ?? null,
keyboardType: widget.textInputType ?? null,
onSaved: widget.onSavedFunc ??
(String value) {
_data = value.trim();
if (widget.hint != password &&
widget.hint != 'Confirm Password') {
print('${widget.hint} is $_data');
}
},
//!! Set the errorText value here, the Future delayed is to avoid calling [setState] during [build]
validator: (value) {
Future.delayed(Duration.zero, () {
// calling [setState] during [build]
setState(() {
_errorText = widget.validatorFunction(value) ?? '';
});
});
return _errorText;
},
style: TextStyle(
color: Color(textColor),
fontSize: widget.fontSize ?? 18,
),
obscureText: widget.obscure ?? false,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 1.0),
prefixIcon: Icon(
widget.icon ?? Icons.error,
size: widget.iconSize ?? 35,
color: widget.iconColor ?? Color(iconColor),
),
filled: true,
fillColor: Color(textFieldColor),
//!! Hide the default error message here
errorStyle: TextStyle(fontSize: 0),
hintText: widget.hint ?? placeholder,
hintStyle: TextStyle(
color: Color(textColor),
fontSize: widget.fontSize ?? 18,
height: widget.height ?? 0.9,
),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(9),
),
focusColor: Color(textFieldColor),
),
),
),
),
//!! Display the error message here
if (_errorText.isNotEmpty)
Text(
_errorText,
style: TextStyle(color: Colors.red),
)
],
),
);
}
}
並在另一個小部件中顯示錯誤消息
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.