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

Posted 2023-04-18

【中文标题】颤动中的Textinputfield背景形状和浮动提示

【英文标题】：Textinputfield background shape and floating hint in flutter

【发布时间】：2020-04-24 00:33:28

【问题描述】：

我有一个带有背景形状的 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 我的结果

【问题讨论】：

我已经尝试了您的代码并得到了您在屏幕截图中分享的结果。你能分享一下你看到的截图吗？

同样，我试过你的代码，它看起来像你参考截图上的结果。

用我的结果截图编辑。

【参考方案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(),
                    ),
                  ),
                ),

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