如何在flutter中为电子邮件和电话创建单个文本字段类

Question

我已经创建了配置文件设置页面，其中有姓名、电子邮件和电话文本字段。我创建了一个单独的文本字段类，在这里我将控制器、标题作为参数。如何通过在单个文本字段类中检查电子邮件或电话来创建验证器。这就是我如何创建视图类

ProfileTextFormField(
controller: _mobileNumberController,
title: "Mobile No",
hintText: "",
),
ProfileTextFormField(
controller: _emailIdController,
title: "Email Id",
hintText: "",
),

下面是我输入的文本字段的类。我需要在这里验证电子邮件或电话。

class ProfileTextFormField extends StatelessWidget {
final title;
final hintText;
final TextEditingController controller;
const ProfileTextFormField(
{Key? key,
required this.title,
required this.hintText,
required this.controller})
: super(key: key);
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 3.0, left: 24),
child: Text(
title,
style: AppTextStyle.latoMedium(
fontWeight: FontWeight.w700, color: AppColorPallet.profileText),
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Padding(
padding: EdgeInsets.only(bottom: 5.0, right: 24, left: 24),
child: TextField(
controller: controller,
decoration: InputDecoration(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: AppColorPallet.app_green_natural,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: AppColorPallet.app_Red,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: AppColorPallet.app_green_natural,
),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: AppColorPallet.app_green_natural,
),
),
hintText: hintText,
),
),
),
),
],
);
}
}

Answer 1

您也可以将验证器作为参数传递。试试这个：

class TextFormFieldWidget extends StatelessWidget {
final TextEditingController controller;
final String? title;
final String? Function(String?)? validator;
TextFormFieldWidget({
required this.controller,
this.validator,
this.title,
});
@override
Widget build(BuildContext context) {
return TextFormField(
controller: controller,
decoration: InputDecoration(
labelText: title,
),
validator: validator,
);
}
}

并像这样使用：

TextFormFieldWidget(
controller: TextEditingController(),
validator: (value) {
if (value == null || value.isEmpty) {
return 'empty value';
}
return null;
})