Forms Textinputfield背景形状和颤振中的浮动提示
我有一个TextFormField,背景形状如图所示。但我遇到的问题是,提示在字段顶部浮动,因为我使用了enabled border(OutlineInputBorder)来提供bg形状和颜色 但我需要在文本上方设计提示,如图所示。我写的代码如下Forms Textinputfield背景形状和颤振中的浮动提示,forms,flutter,textinput,Forms,Flutter,Textinput,我有一个TextFormField,背景形状如图所示。但我遇到的问题是,提示在字段顶部浮动,因为我使用了enabled border(OutlineInputBorder)来提供bg形状和颜色 但我需要在文本上方设计提示,如图所示。我写的代码如下 new Theme( data: new ThemeData( primaryColor: Colors.green, ), child: new TextFormField( style: new TextStyle(
new Theme(
data: new ThemeData(
primaryColor: Colors.green,
),
child: new TextFormField(
style: new TextStyle(
color: Color(0xff651515),
),
autofocus: false,
obscureText: false,
controller: date_picker,
decoration: InputDecoration(
suffixIcon: new Image.asset(
'assets/calendar_ic.png',
),
enabledBorder: new OutlineInputBorder(
borderSide: BorderSide(color: Colors.black38),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
topRight: Radius.circular(0)),
),
filled: true,
fillColor: Colors.black12,
labelText: TextDisplayConstants.ENTER_DATE,
labelStyle: TextStyle(
color: Colors.black45,
fontSize: 14,
),
),
),
),
供参考的图像
我的结果最终使用以下代码获得了预期的解决方案:
Material(
color: Color(0xFFF8F8F8),
shape: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
topRight: Radius.circular(0)),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(15, 0, 0, 0),
child: FormBuilderDropdown(
isExpanded: false,
decoration: InputDecoration(
labelText: TextDisplayConstants.SELECT_SUBJECT,
labelStyle: TextStyle(
fontFamily: 'BasisGrotesquePro',
fontWeight: FontWeight.w200,
color: Color(0xffb7b7b7)),
suffixIcon: new Image.asset(
'assets/subject_ic.png',
),
hintStyle: new TextStyle(color: Colors.grey),
border: InputBorder.none,
),
initialValue: _subjectList[0],
onChanged: (val) {
model.subject = val.id;
},
validators: [FormBuilderValidators.required()],
items: _subjectList.map((SubjectResponse subject) {
return new DropdownMenuItem<SubjectResponse>(
value: subject,
child: new Text(
subject.subject,
style: new TextStyle(
fontFamily: 'BasisGrotesquePro',
fontWeight: FontWeight.w400,
color: Color(0xff651515),
),
),
);
}).toList(),
),
),
),
材料(
颜色:颜色(0xFFF8),
形状:OutlineInputBorder(
borderSide:borderSide(颜色:颜色。透明),
borderRadius:仅限borderRadius(
左上:半径。圆形(10),
左下角:半径。圆形(10),
右下角:半径。圆形(10),
右上角:半径。圆形(0)),
),
孩子:填充(
padding:const EdgeInsets.fromLTRB(15,0,0,0),
子:FormBuilderDropdown(
isExpanded:错,
装饰:输入装饰(
labelText:TextDisplayConstants.SELECT_SUBJECT,
标签样式:文本样式(
fontFamily:“BasisGrotesquePro”,
fontWeight:fontWeight.w200,
颜色:颜色(0xffb7b7b7)),
suffixIcon:newimage.asset(
“资产/主题_ic.png”,
),
hintStyle:新文本样式(颜色:Colors.grey),
边框:InputBorder.none,
),
初始值:_主题列表[0],
一旦更改:(val){
model.subject=val.id;
},
验证器:[FormBuilderValidators.required()],
项目:_subjectList.map((SubjectResponse subject){
返回新的DropdownMenuItem(
价值:主体,
儿童:新文本(
主题,主题,
样式:新文本样式(
fontFamily:“BasisGrotesquePro”,
fontWeight:fontWeight.w400,
颜色:颜色(0xff651515),
),
),
);
}).toList(),
),
),
),
感谢所有回应的人。如果有人发现这个解决方案有帮助,我很高兴…我已经尝试了你的代码,并得到了你在屏幕截图上分享的结果。你能分享一下你看到的你这边的截图吗?同样,我在这里尝试了你的代码,它看起来像你参考人截图上的结果。用我的结果截图编辑。