TextFormField Flutter 中的前缀位置和大小答案

【问题标题】：Prefix position and size in TextFormField FlutterTextFormField Flutter 中的前缀位置和大小
【发布时间】：2021-11-06 16:12:17
【问题描述】：

有没有办法让前缀与输入字段对齐而不是那样浮动？

这是我的代码

                   TextFormField(
                        autovalidateMode: AutovalidateMode.always,
                        keyboardType: TextInputType.phone,
                        controller: noHpField,
                        decoration: const InputDecoration(
                          isDense: true,
                          prefixIcon:Text("+62", style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
                          prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),
                          icon: Icon(Icons.phone_android),
                          labelText: 'No HP',
                        ),
                        validator: (String? value) {
                          if (value == null || value.isEmpty) {
                            return 'Mohon Isikan Data';
                          }
                          return null;
                        },
                      ),

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

  TextFormField(
             autovalidateMode: AutovalidateMode.always,
              keyboardType: TextInputType.phone,
              controller: noHpField,
               decoration: const InputDecoration(
                border: OutlineInputBorder(),
                isDense: true,
                prefixIcon: Text("+62",
                style: TextStyle(
                           fontSize: 12,
                            fontWeight: FontWeight.bold)),
                                      prefixIconConstraints: 
                                  BoxConstraints(
                                     [![enter image description here][1]][1] minWidth: 0, minHeight: 0),
                                      icon: Icon(Icons.phone_android),
                                      labelText: 'No HP',
                                    ),
                                    validator: (String? value) {
                                      if (value == null || value.isEmpty) {
                                        return 'Mohon Isikan Data';
                                      }
                                      return null;
                                    },
                                  ),

您可以在prefixIcon 中使用Padding 属性使其看起来更整洁。

【讨论】：

很高兴我能帮上忙。 :D

【解决方案2】：

试试下面的代码希望它对你有帮助，并使用 OutlineInputBorder() 作为边框

    TextFormField(
              autovalidateMode: AutovalidateMode.always,
              keyboardType: TextInputType.phone,
              controller: noHpField,
              decoration:  InputDecoration(
                border: OutlineInputBorder(),
                isDense: true,
                prefixIcon: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    "+62",
                    style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                prefixIconConstraints: BoxConstraints(
                  minWidth: 0,
                  minHeight: 0,
                ),
                icon: Icon(Icons.phone_android),
                labelText: 'No HP',
              ),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Mohon Isikan Data';
                }
                return null;
              },
            ),

没有输入数据的屏幕结果，例如 ->

您的屏幕显示输入数据，例如 ->

【讨论】：