英文:
Textinputfield background shape and floating hint in flutter
问题
我有一个背景形状如图所示的TextFormField。但我遇到的问题是,提示文字浮在字段上方,因为我使用了启用边框(OutlineInputBorder)来提供背景形状和颜色。
但我需要设计提示文字显示在文本上方,如图所示。我编写的代码如下...
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,
),
// Add this line to position the hint text above the text
contentPadding: EdgeInsets.fromLTRB(12, 20, 12, 10),
),
),
),
图片供参考:
图片链接
英文:
I have a TextFormField with background shape as shown in image. But the problem I am having is, the hint is floating on top of field because I have used enabled border(OutlineInputBorder) to provide bg shape and color.
But I need to design the hint just above the text as shown in image. The code I wrote is as below...
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,
),
),
),
),
https://i.stack.imgur.com/Qh4ie.png
Image for reference
https://i.stack.imgur.com/zocff.png
My result
答案1
得分: 0
以下是您要翻译的部分:
最终使用下面的代码获得了预期的解决方案:
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(),
),
),
),
感谢所有回应的人。如果有人发现这个解决方案有帮助,我很高兴...
英文:
Finally got the solution as expected using the below code:
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(),
),
),
),
Thanks for all those who responded. If anyone founds helped by this solution, its my pleasure...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论