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.
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!,
),
);
Use prefix
instead of prefixIcon
it should solve in your case.