文本输入字段背景形状和在Flutter中的浮动提示

huangapple go评论73阅读模式
英文:

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: &#39;BasisGrotesquePro&#39;,
                            fontWeight: FontWeight.w200,
                            color: Color(0xffb7b7b7)),
                        suffixIcon: new Image.asset(
                          &#39;assets/subject_ic.png&#39;,
                        ),
                        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&lt;SubjectResponse&gt;(
                          value: subject,
                          child: new Text(
                            subject.subject,
                            style: new TextStyle(
                              fontFamily: &#39;BasisGrotesquePro&#39;,
                              fontWeight: FontWeight.w400,
                              color: Color(0xff651515),
                            ),
                          ),
                        );
                      }).toList(),
                    ),
                  ),
                ),

Thanks for all those who responded. If anyone founds helped by this solution, its my pleasure...

huangapple
  • 本文由 发表于 2020年1月6日 20:58:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/59612549.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定