我正在尝试为TextFormField的后缀图标创建一个覆盖小部件。通常我们会使用ToolTip,但是我只是想尝试一些新的东西,因为覆盖小部件可以自定义。 我想在TextFormField的后缀图标没有通过验证时将其颜色从灰色更改为红色。 因此,当图标变为红色时,它会向用户发出警告,当用户单击它时,覆盖小部件将显示。
我的覆盖小部件代码。
void _showOverlay(BuildContext context) async {
OverlayState? overlayState = Overlay.of(context);
OverlayEntry overlayEntry;
overlayEntry = OverlayEntry(builder: (context) {
return Positioned(
left: MediaQuery.of(context).size.width * 0.1,
top: MediaQuery.of(context).size.height * 0.23,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Material(
child: Container(
alignment: Alignment.center,
color: Colors.grey.shade200,
padding:
EdgeInsets.all(MediaQuery.of(context).size.height * 0.02),
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.06,
child: const Text(
'Name should be more than 2 characters',
style: TextStyle(color: Colors.black),
),
),
),
),
);
});
overlayState!.insert(overlayEntry);
await Future.delayed(const Duration(seconds: 3));
overlayEntry.remove();
}
我的提交按钮方法:
void _submitForm() {
setState(() {
_autoValidateMode = AutovalidateMode.always;
});
final form = _formKey.currentState;
if (form == null || !form.validate()) return;
form.save();
print(_name);
}
我的TextFormField小部件:
TextFormField(
controller: nameController,
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next,
textCapitalization: TextCapitalization.words,
validator: (String? value) {
if (value == null || value.trim().isEmpty) {
return;
}
return null;
},
onSaved: (String? value) {
_name = value;
},
decoration: kTextInputDecoration.copyWith(
labelText: 'Full Name',
prefixIcon: const Icon(Icons.person),
suffixIcon: IconButton(
padding: EdgeInsets.zero,
onPressed: () {
_showOverlay(context);
},
icon: const Icon(
Icons.info,
color: Colors.grey //change icon color according to form validation
))),
提交按钮。
ElevatedButton(
onPressed: () {
_submitForm();
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(10)),
child: const Text(
'Submit',
style: TextStyle(fontSize: 20),
)),
当提交按钮按下时,我想要改变后缀图标的颜色。如果表单未经验证,则颜色应更改为红色或默认为灰色。非常感谢您的帮助。
kTextInputDecoration
,并且将包括表单小部件。 - Yeasin Sheikh