如何在颤动中创建圆形TextField？

Question

iOS的Material Design看起来不太好，尤其是TextField。那么有没有办法创建自己的？或者是否可以向TextField添加一些样式以使其看起来圆润？

Answer 1

您可以在TextField的装饰参数中为TextField添加圆角

new TextField(
  decoration: new InputDecoration(
      border: new OutlineInputBorder(
        borderRadius: const BorderRadius.all(
          const Radius.circular(10.0),
        ),
      ),
      filled: true,
      hintStyle: new TextStyle(color: Colors.grey[800]),
      hintText: "Type in your text",
      fillColor: Colors.white70),
)

Answer 2

你可以在Container的帮助下获得所需的输出看看..

new Container(
  child: new Text (
      "Text with rounded edges.",
      style: new TextStyle(
          color: Colors.blue[500],
          fontWeight: FontWeight.w900
      )
  ),
  decoration: new BoxDecoration (
      borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
      color: Colors.black
  ),
  padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
),

Answer 3

@Rockvole答案是正确的但是如果你不喜欢TextField周围的默认边框，你可以通过覆盖borderSide的OutlineInputBorder属性来实现它，如下所示：

TextField(
    textAlign: TextAlign.center,
    controller: searchCtrl,
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
        hintText: 'Enter a product name eg. pension',
        hintStyle: TextStyle(fontSize: 16),
        border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide(
                width: 0, 
                style: BorderStyle.none,
            ),
        ),
        filled: true,
        contentPadding: EdgeInsets.all(16),
        fillColor: colorSearchBg,
    ),
),