我有一个TextFormField,其背景形状如图所示。但是我遇到的问题是,提示浮在字段顶部,因为我使用了启用的border(OutlineInputBorder)提供bg形状和颜色。
但是我需要在文本上方设计提示,如图所示。我写的代码如下...
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(),
),
),
),
感谢所有回答。如果有人找到了该解决方案的帮助,那么我的荣幸...