Search code examples
fluttertextformfieldflutter-textformfield

Flutter Textformfield prefix text

I am trying to create a textformfield with a prefix text that looks the images below. This one is before entering any text

textformfield 1

and this is after entering text

2

This is the code I have written

                TextFormField(
                  decoration: InputDecoration(
                    prefixIcon: Text(
                      '+254',
                      textAlign: TextAlign.center,
                      style: theme.textTheme.bodyText2!.copyWith(
                          color: Color(0xff000000),
                          fontWeight: FontWeight.w500),
                    ),
                    hintText: getTranslated(context, "label_hint")!,
                    hintStyle: theme.textTheme.bodyText2!.copyWith(
                      color: primaryLight.withOpacity(0.75),
                      fontWeight: FontWeight.w400,
                    ),
                    fillColor: const Color(0xffF5F5F5),
                    enabledBorder: OutlineInputBorder(
                      borderSide:
                          const BorderSide(width: 1, color: Color(0xffCCCCCC)),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: const BorderSide(width: 1, color: Color(0xffF38E30)),
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                ),

This is how my attempt looks 3

I'd like to achieve something close to the first two images, what can I change in my code

Solution

  • Try wrapping the text widget in prefixIcon: Text('+254', with a column, and give its main axis alignment a center. Or wrap your text widget with a Center widget.