如何在TextFormField的hintText中添加图标

Posted 2021-04-11

我想将Icon添加到TextFormField的hintText字段中。我已经读过有关prefixIcons和SuffixIcons的信息，但它们会永久添加图标。我希望将Icon作为hintText，以便当用户单击时，它像hintText一样消失。如何在颤抖中实现此目的

答案

您无法使用TextFormField的属性来实现，但是您可以基于Field的控制器来更改Icon的可见性：

bool isVisible = true;
TextEditingController controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: TextFormField(
        controller: controller,
        onChanged: (text){
          setState(() {
            controller.text.isEmpty ? isVisible = true : isVisible = false;
          });
        },
        decoration: InputDecoration(
          hintText: 'hintText',
          prefixIcon: Visibility(
            visible: isVisible,
            child: Icon(Icons.person, color: Colors.grey,),
          ),
        ),
      ),
    ),
  );
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}