如何使我的TextField看起来像下面这样(颤音)

Question

所以在我的设计中，我有这样的Textfield：

​

我怎么才能让它飘飘欲仙？

Answer 1

我不知道正确的大小和颜色，所以根据您的设计改变他们，如果您希望您可以使用您的图标资产，而不是图标类。

     @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    return Scaffold(
      backgroundColor: Colors.pink.shade50,
      body: Center(
        child: Container(
          width: width * 0.8,
          height: height * 0.07,
          padding: EdgeInsets.all(width * 0.03),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6),
              color: Colors.white,
              border: Border.all(color: Colors.grey)),
          child: Center(
            child: Row(
              children: <Widget>[
                const Icon(
                  Icons.email,
                  color: Colors.grey,
                ),
                SizedBox(
                  width: width * 0.04,
                ),
                const Expanded(
                  child: TextField(
                    decoration: InputDecoration.collapsed(
                        hintText: 'abc@email.com',
                        hintStyle: TextStyle(color: Colors.grey)),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

​

​

Answer 2

如果您的意思是边框少文本框，那么您可以很容易地更改边框的颜色与背景色相同，

否则遵循下面的代码

TextFormField(
    cursorColor: Colors.black,
    keyboardType: inputType,
    decoration: new InputDecoration(
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        contentPadding:
            EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
        hintText: "abc@gmail.com"),
  )