flutterflutter-form-builder

Left Align the labelText of FormBuilderTextField in Flutter


I want to left-align the FormBuilderTextField label of the second text field like in the first text field. The label was pushed to the center as I added a dropdown for prefixIcon. I want to bring that label to left.

enter image description here

Padding(
  padding: EdgeInsets.only(top: 8, bottom: 8),
  child: FormBuilderTextField(
    controller: controller,
    name: name!,
    initialValue: initialValue,
    style: TextStyle(color: Colors.black),
    enabled: enabled,
    keyboardType: keyBoardType,
    decoration: InputDecoration(
      prefixIcon: Container(
        width: 120.0,
        child: FormBuilderDropdown(
          name: "countryList",
          iconSize: 0.0,
          decoration: InputDecoration(
            icon: null,
            labelStyle: TextStyle(
                color: enabled
                    ? Colors.black54
                    : Theme.of(context).disabledColor),
            contentPadding: EdgeInsets.all(8),
            enabledBorder: InputBorder.none,
          ),
          enabled: enabled,
          items: countries
              .map((Country country) => DropdownMenuItem(
                    value: country.id,
                    child: Row(
                      children: [
                        CachedNetworkImage(
                          width: 30,
                          height: 20,
                          imageUrl: country.photo!.path!,
                          imageBuilder: (context, imageProvider) =>
                              Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: imageProvider, fit: BoxFit.fill),
                            ),
                          ),
                          placeholder: (context, url) =>
                              CircularProgressIndicator(),
                          errorWidget: (context, url, error) =>
                              Icon(Icons.error),
                        ),
                        SizedBox(
                          width: 10.0,
                        ),
                        Text("+${country.phoneCode}" ?? "")
                      ],
                    ),
                  ))
              .toList(),
        ),
      ),
      labelText: label,
      labelStyle: TextStyle(
          color:
              enabled ? Colors.black54 : Theme.of(context).disabledColor),
      contentPadding: EdgeInsets.all(16),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Theme.of(context).primaryColor),
      ),
      border: new OutlineInputBorder(borderSide: new BorderSide()),
    ),
    validator: validator,
    obscureText: obscureText!,
  ),
);

Solution

  • Use prefix instead of prefixIconit should solve in your case.