Prefix position and size in TextFormField Flutter

Issue

is there any way to make the prefix is alligned with the input field and not floating like that?

This is my code for it

                   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;
                        },
                      ),

Solution

  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;
                                    },
                                  ),

You can use Padding property in the prefixIcon to make it look more neat.

Answered By – Arijeet

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0