如何在Flutter中在Textformfield中的标签下创建，而不是边框

Question

我想创建一个文本表单字段。但标签显示在文本表单字段下方，而不是边框。并且 Textformfield 角是圆角的，验证错误位于 Textformfield 下方。

如何在 flutter 中实现这种类型的 UX 设计。

Answer 1

像这样创建您自己的 CustomTextField：将错误文本放在 TextFormField 下

 class CustomTextField extends StatelessWidget {
  const CustomTextField({
    super.key,
    this.controller,
    this.errorText,
    this.labelText,
  });

  final TextEditingController? controller;
  final String? errorText;
  final String? labelText;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TextFormField(
          controller: controller,
          decoration: InputDecoration(
            label: labelText != null
                ? Text(
                    labelText!,
                  )
                : null,
            error: errorText != null ? Container() : null,
            isDense: true,
          ),
        ),
        Visibility(
          visible: errorText != null,
          child: Padding(
            padding: const EdgeInsets.only(
              top: 4,
            ),
            child: Text(
              errorText ?? "",
              //style:errorStyle,
            ),
          ),
        )
      ],
    );
  }
}