如何在颤动中创建圆形文本字段？

IOS 的材质设计看起来不怎么样，尤其是 文本字段。那么有没有办法创造你自己的呢？或者有没有什么方法可以给 TextField 添加一些样式，使它看起来更圆润？

154402 次浏览
小开

在 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),
),
小开
最佳答案

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

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

@ Rockvole 的回答是正确的，但是如果你不喜欢 默认边界在 TextField附近，你可以通过覆盖 OutlineInputBorder的 borderSide属性来实现它，如下所示:

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,
),
),
小开

我从网上搜集了一些方法和解决方案，它们对我非常有用，所以可以帮助一些人: 此解决方案将控制 TextField的宽度和高度以及其他属性

Container(
child: Theme(
data: Theme.of(context).copyWith(splashColor: Colors.transparent),
child: TextField(
autofocus: false,
style: TextStyle(fontSize: 15.0, color: Color(0xFFbdc6cf)),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
hintText: 'Search',
contentPadding:
const EdgeInsets.only(left: 14.0, bottom: 12.0, top: 0.0),




focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(25.7),
),


enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(25.7),
),
),
),
),


decoration: new BoxDecoration (
borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
color: Colors.white   ),   width: 250,   height: 50,   margin: new EdgeInsets.fromLTRB(20, 20, 20, 210),   padding: new EdgeInsets.fromLTRB(8, 8, 8, 8),


),
小开

You could approach the purpose in a few different ways:

第一种方法:

Container(
child: new Text (
"Some Text",
style: TextStyle(
color: Colors.black
)
),
decoration: BoxDecoration (
borderRadius: BorderRadius.all( Radius.circular(15)),
color: Colors.white
),
padding: EdgeInsets.all(16.0),
),

Second Approach:

 TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
Radius.circular(15.0),
),
),
filled: true,
hintStyle: new TextStyle(color: Colors.grey[600]),
hintText: "Hint text",
fillColor: Colors.white),
)

第三种方法:

TextField(
textAlign: TextAlign.center,
controller: someTextXontroller,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: 'Hint Text',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
fillColor: Colors.blue,
),
),
小开

你可以试试下面的代码:

      decoration:  InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
)
小开

在 TextFormField试试这个:

border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
),

提交答案