Flutter TextFormField的输入文本被覆盖

时间:2019-11-08 19:42:29

标签: flutter flutter-layout

问题在字段完全填满时出现在字段的末尾。字母的底部似乎有一个黑匣子。

当您删除helperText属性时,不会出现问题,但是 如果出现错误消息,则TextFormField会更改。

为确保helperText的容器不覆盖输入文本,请将helperText和background设置为随机值(无关紧要)。如图所示。

TextFormField(
    textInputAction: TextInputAction.next,
    focusNode: focusNode,
    decoration: InputDecoration(
      helperStyle: TextStyle(
        backgroundColor: color1,
      ),
      helperText: "", //like an spacer
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(360.0),
        borderSide: BorderSide(
          color: Colors.red,
          width: 1.0,
        ),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(360.0),
        borderSide: BorderSide(
          color: Colors.red,
          width: 2.0,
        ),
      ),
      labelText: labelText,
      labelStyle: TextStyle(
          fontFamily: 'QuicksandFont',
          fontWeight: FontWeight.bold,
          color: Colors.white),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(360.0),
        borderSide: BorderSide(
          color: color1,
          width: 1.0,
        ),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(360.0),
        borderSide: BorderSide(
          color: color1,
          width: 2.0,
        ),
      ),
      fillColor: Colors.white,
    ),
    validator: (val) {
      if (val.length < 2) {
        return warningMessage;
      } else {
        return null;
      }
    },
    keyboardType: TextInputType.text,
    style: TextStyle(
      fontFamily: 'QuicksandFont',
      color: Colors.white,
      fontSize: 22.0,
    ),
    onFieldSubmitted: (term) {
      focusNode.unfocus();
      FocusScope.of(context).requestFocus(focusNodeNext);
    },
  );
}

Picture with Overflow Picture with one letter less

0 个答案:

没有答案