我需要添加一个文本字段,该文本字段具有3边的圆形形状和一个带有正常矩形边的右上角。我试图用OutlineInputBorder做到这一点,它给了我边界。但是,我需要实现此设计。
由于我没有足够的声誉,所以我无法添加图像。如果有人帮助我,将会有所帮助。
new Theme(
data: new ThemeData(
primaryColor: Colors.blue,
),
child: TextFormField(
style: new TextStyle(
color: Color(0xff651515),
),
autofocus: false,
obscureText: false,
keyboardType: TextInputType.text,
decoration: InputDecoration(
filled: true,
border: new OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
fillColor: Colors.black12,
labelText: TextDisplayConstants.EMAIL,
labelStyle: TextStyle(
color: Color(0xffa4a4a4),
fontSize: 14,
),
),[enter image description here][1]
),
),
只需在Textformfield代码中替换边框,例如
border: new OutlineInputBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(0),
),
),
在想要矩形边框的一侧添加Radius.circular(0),例如,[[bottomRight:Radius.circular(0)
border: new OutlineInputBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
topLeft: Radius.circular(20),
topRight: Radius.circular(20)
)
),
TextFormField
TextFormField( style: new TextStyle( color: Color(0xff651515), ), autofocus: false, obscureText: false, keyboardType: TextInputType.text, decoration: InputDecoration( filled: true, border: new OutlineInputBorder( borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20),topLeft: Radius.circular(20),topRight: Radius.circular(20)) ), fillColor: Colors.black12, labelStyle: TextStyle( color: Color(0xffa4a4a4), fontSize: 14, ), ) ),