如何将带有浮动标签的文本窗体字段导入容器?
我试着让文本字段像这样,但我不居中我的标签,如果输入没有焦点。
我该怎么修?
我的代码。
class CustomInput extends StatefulWidget {
final bool enabled;
final bool readOnly;
final double? width;
final double? borderRadius;
final bool autofocus;
final int? maxLines;
final int? maxLength;
final bool obscureText;
final String? hintText;
final String? labelText;
final String? errorText;
final String? helperText;
final String? counterText;
final String? initialValue;
final FocusNode? focusNode;
final void Function()? onTap;
final EdgeInsetsGeometry? margin;
final TextInputType? keyboardType;
final Function(String)? onChanged;
final Widget? suffixIcon, prefixIcon;
final TextInputAction? textInputAction;
final TextEditingController? controller;
final String? Function(String?)? validator;
final Iterable<String>? autofillHints;
final String? Function(String?)? onFieldSubmitted;
final BoxConstraints? suffixIconConstraints;
CustomInput({
Key? key,
this.controller,
this.labelText,
this.maxLength,
this.focusNode,
this.enabled = true,
this.onChanged,
this.textInputAction,
this.keyboardType,
this.onFieldSubmitted,
this.validator,
this.hintText,
this.errorText,
this.margin,
this.obscureText = false,
this.suffixIcon,
this.autofillHints,
this.helperText = '',
this.prefixIcon,
this.initialValue,
this.onTap,
this.readOnly = false,
this.autofocus = false,
this.maxLines = 1,
this.suffixIconConstraints,
this.width,
this.counterText,
this.borderRadius,
}) : super(key: key);
@override
_CustomInputState createState() => _CustomInputState();
}
class _CustomInputState extends State<CustomInput> {
final _key = GlobalKey<FormFieldState<String>>();
@override
Widget build(BuildContext context) {
OutlineInputBorder outlineInputBorder = OutlineInputBorder(
gapPadding: 0,
// borderSide: BorderSide(color: Colors.green),
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.circular(widget.borderRadius ??),
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: widget.width,
alignment: Alignment.centerLeft,
// margin: widget.margin,
padding: EdgeInsets.only(left: 16, right: 16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(widget.borderRadius ?? 8),
color: !widget.enabled
? Theme.of(context).disabledColor
: Theme.of(context).scaffoldBackgroundColor,
border: Border.all(
width: 1,
color: !widget.enabled
? Theme.of(context).disabledColor
: Theme.of(context).dividerColor,
),
),
child: TextFormField(
key: _key,
onTap: widget.onTap,
enabled: widget.enabled,
readOnly: widget.readOnly,
maxLines: widget.maxLines,
onChanged: widget.onChanged,
autofocus: widget.autofocus,
maxLength: widget.maxLength,
focusNode: widget.focusNode,
validator: widget.validator,
controller: widget.controller,
obscureText: widget.obscureText,
initialValue: widget.initialValue,
keyboardType: widget.keyboardType,
autofillHints: widget.autofillHints,
textInputAction: widget.textInputAction,
onFieldSubmitted: widget.onFieldSubmitted,
cursorColor: Theme.of(context).primaryColor,
textAlignVertical: TextAlignVertical.bottom,
decoration: InputDecoration(
isCollapsed: true,
// Theme config
// alignLabelWithHint: true,
labelStyle: TextStyle(
height: 3.8,
fontSize: 16.0,
backgroundColor: Colors.transparent,
// color: Theme.of(context).primaryColorLight,
),
contentPadding: EdgeInsets.only(
top: 28,
left: 0,
right: 0,
bottom: 10,
),
fillColor: Colors.transparent,
border: outlineInputBorder,
focusedBorder: outlineInputBorder,
enabledBorder: outlineInputBorder,
disabledBorder: outlineInputBorder,
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Theme.of(context).errorColor),
borderRadius: BorderRadius.circular(widget.borderRadius ?? 8),
),
errorStyle: TextStyle(
color: Theme.of(context).errorColor,
fontSize: 14,
height: 0.56,
),
// Custom input config
filled: !widget.enabled,
hintText: widget.hintText,
labelText: widget.labelText,
errorText: widget.errorText,
// helperText: 'widget.helperText',
suffixIcon: widget.suffixIcon,
prefixIcon: widget.prefixIcon,
// helperStyle: TextStyle(height: 0.55),
helperStyle: TextStyle(height: 0),
counterText: widget.counterText ?? '',
suffixIconConstraints: widget.suffixIconConstraints,
),
),
),
if (widget.helperText != null)
Padding(
padding: EdgeInsets.only(left: 16, right: 16, top: 4),
child: Text(
widget.helperText!,
style: Theme.of(context).textTheme.caption,
),
),
],
);
}
}
下一行不承载任何语义负载,它是leash,以便在发送帖子时不会出错。下一行不承载任何语义负载,它是leash,以便在发送帖子时不会出错。
2条答案
按热度按时间rfbsl7qr1#
You should try below code :
Create Controller
Create TextFormFiled Widget:
then execute above code your screen look like this
Try below code I think this is help you
sd2nnvve2#