Flutter 中的 Textinputfield 背景形状和浮动提示

Question

我有一个 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,
      ),
    ),
  ),
),

https://i.stack.imgur.com/Qh4ie.png 图片供参考

https://i.stack.imgur.com/zocff.png 我的结果

Answer 1

最终使用以下代码得到了预期的解决方案：

                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(),
                    ),
                  ),
                ),

感谢所有回复的人。如果有人发现此解决方案有所帮助，我很高兴...

Flutter 中的 Textinputfield 背景形状和浮动提示

Textinputfield background shape and floating hint in flutter

forms

textinput

flutter