flutter - 当用户输入正确长度时如何使后缀图标标记为绿色，否则它将显示红色十字图标

Question

图片请点击这里。每当用户不保持实际输入长度时，我希望此绿色刻度线转换为红十字标记。

我希望每当用户离开文本表单字段而没有输入正确长度的输入（假设最大 6）时，绿色后缀按钮应该变成红色十字后缀按钮。

 Widget userField(){
return TextFormField(                                                                             
  decoration: InputDecoration(

    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color:Colors.grey),
        borderRadius:BorderRadius.only( bottomLeft: Radius.circular(20)  ,topRight: Radius.circular(20)   )
       ),


       focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color:Colors.green),
       borderRadius:BorderRadius.only( bottomLeft: Radius.circular(20)  ,topRight: Radius.circular(20)   )
       ),


    suffixIcon:Icon(Icons.check,color: Colors.green,),             //??????????????




    labelText: 'User ID',
    hintText: 'Enter your 6 digit user id',
    filled: true,
    fillColor: Colors.grey[200],
    icon: Icon(Icons.account_circle),
  ),


  keyboardType:
   TextInputType.number,
  inputFormatters:[                        
    LengthLimitingTextInputFormatter(6),      
    WhitelistingTextInputFormatter.digitsOnly
  ],


  validator: (String value){
    if (value.length<6)
     {
      return 'User ID must have 6 characters'; 
     }

      return null;


  },


);

}

标签： flutterdart

Answer 1

添加

int textLength = 0;

在您的 TextFormField 小部件内

onChanged: (text){
  setState((){
    textLength = text.length;
  });
}
suffixIcon: Icon(textLength > 5 ? Icons.check : Icons.cancel, color: textLength < 5 ? Colors.green : Colors.red)