Flutter TextFormField 提示 label 和 cursor Z4757FE07FD492A8BE0EA6A760D683D6ZE

Question

I want to do this:

But I can only create this:

Unfortunately the hint label goes up to the top border.

This is my code:

TextFormField(
    cursorColor: Colors.black,
    decoration: customInputDecoration("Nickname")
),

// ...

InputDecoration customInputDecoration(String labelText) {
    return InputDecoration(
        labelText: labelText,
        labelStyle: TextStyle(color: Color.fromRGBO(69,202,255, 0.3)),
        fillColor: Colors.white,
        focusedBorder: _outlineInputBorder(30),
        enabledBorder: _outlineInputBorder(30),
        border: _outlineInputBorder(30),
        focusedErrorBorder: _outlineInputBorder(30),
        errorBorder: _outlineInputBorder(30),
    );
}

OutlineInputBorder _outlineInputBorder(double radius) {
    return OutlineInputBorder(
        borderRadius: BorderRadius.circular(radius),
        borderSide: BorderSide(
            width: 3,
            color: Color.fromRGBO(69,202,255, 0.3),
        ),
    );
}

Answer 1

Remove the default borders of textformfield. If you don't wrap it with the container and give it a border, the situation you want will go away. But now it is not possible to do it using textformfield properties.

  Container(
     margin: EdgeInsets.only(left: 20, right: 20, top: 50),
     padding: EdgeInsets.all(5),
     decoration: _outlineInputBorder(30),
     child: TextFormField(
        cursorColor: Colors.black,
        decoration: customInputDecoration("Nickname")),
  )

 InputDecoration customInputDecoration(String labelText) {
  return InputDecoration(
   labelText: labelText,
   labelStyle: TextStyle(color: Color.fromRGBO(69, 202, 255, 0.3)),
   fillColor: Colors.white,
   focusedBorder: InputBorder.none,
   enabledBorder: InputBorder.none,
   border: InputBorder.none,
   focusedErrorBorder: InputBorder.none,
   errorBorder: InputBorder.none,
   );
 }
 BoxDecoration _outlineInputBorder(double radius) {
   return BoxDecoration(
      border: Border.all(
      color: Color.fromRGBO(69, 202, 255, 0.3),
      style: BorderStyle.solid,
      width: 3.0,
    ),
    color: Colors.transparent,
    borderRadius: BorderRadius.circular(radius),
  );
}