我怎样才能让我的 TextField 看起来像下面这样 (FLUTTER)

Question

所以在我的设计中，我有这样的文本字段：

如何在 Flutter 中实现？

Answer 1

我不知道正确的尺寸和颜色，所以根据您的设计更改它们，如果您愿意，可以使用您的图标资源而不是图标 class。

     @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

如果你的意思是 border less textfield ，那么你可以轻松地将边框颜色更改为与背景颜色相同，

或者遵循此代码

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"),
  )

我怎样才能让我的 TextField 看起来像下面这样 (FLUTTER)

How can I make my TextField look like the following (FLUTTER)

textfield

flutter