'Is there a way to create a text field with a prefix that is always visible in flutter

I would like to create a text field with a prefix that is always visible. I am creating a phone field similar to the one used for WhatsApp phone number entry. I would like to have the country code as a persistent prefix.

I have tried the prefix and prefixText options for InputDecoration, however, the prefixes are only visible when the textField is in focus. Any help offered on how to achieve this will be highly appreciated.

Solution 1:^[1]

UPDATE: We can now override the minimum padding of prefixIcon AND suffixIcon with prefixIconConstraints.

We can use prefixIcon instead of prefixText. Since prefixIcon accepts any widget, we can use prefixIcon: Text("$").

Here is an example:

InputDecoration(
   isDense: true,
   prefixIcon:Text("\$"),
   prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),
),

Solution 2:^[2]

This is the perfect solution that worked when I have to display the prefix always visible

prefixIcon: Padding(padding: EdgeInsets.all(15), child: Text('+91 ')),

Solution 3:^[3]

FocusNode focusNode = FocusNode();


@override
  void dispose() {

    focusNode.dispose();

    super.dispose();
  }

inside build write

hintText = prefix;


focusNode.addListener(() {
  if (focusNode.hasFocus) {

    setState(() {
      hintText = '';
      hasHint = false;
    });

  }
  else {

    setState(() {
      hintText = prefix;
      hasHint = true;
    });

  }

});

Inside InputDecoration, do this:

 InputDecoration(

      border: InputBorder.none,
      errorMaxLines: 1,          
      prefixText: hasHint ? '' : prefix,
      prefixStyle: TextStyle(
          color: Colors.black54
      ),
      hasFloatingPlaceholder: true,
      hintText: hasHint ? prefix : '',
      hintStyle: TextStyle(
          fontSize: 15.0,
          color: Colors.black54
      ),
    ),

wherein prefix variable is whatever you want to be the prefix. Please vote up this answer if it solves your issue. dubace's answer only made my prefixText go completely transparent.

This puts in a hint that takes the place of the prefixText when textField has not be focused on. When it is focused then the prefixText shows up and the hint disappears.Inside textField, consider putting an ontap method wherein you set the state so that the hint goes away and the prefix shows up. Because in some situation, when the textfield is tapped, the system still does not understand that is has focus unless something is actually typed.

Solution 4:^[4]

The prefixIcon work around did not work for me, as my input is multiline. After reaching two lines, the icon centers instead of staying aligned with the first line as true prefix text should.

As such I discovered CrossAxisAlignment.textBaseline, which allows one to simply attach a prefix widget using a Row as follows:

Row(
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: [Text("prefix: "), inputWidget]
)

Solution 5:^[5]

If you define an initial value in the TextField controller can also resolve this issue. Since TextField will own content, causing the prefix to appear.

Like so:

TextEditingController currencyField = TextEditingController(text: '0,00');

TextFormField(
  autofocus: false,
  controller: currencyField,
  decoration: InputDecoration(
    border: UnderlineInputBorder(),
    hintText: '0,00',
    prefixText: '\$ ',
    labelText: 'Price',
    floatingLabelBehavior: FloatingLabelBehavior.always,
  ),
  textInputAction: TextInputAction.next,
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
    CurrencyFormatter(), // My currency formatter
  ],
  enableSuggestions: true,
  enableInteractiveSelection: true,
  toolbarOptions: ToolbarOptions(
    copy: true,
    cut: true,
    paste: true,
    selectAll: true,
  ),
);

Solution 6:^[6]

A work around this for me was (used as textfield prefixIcon)

return Align(
        alignment: Alignment.centerLeft,
        child: Text(
          '${m4eWalletProvider.wallet.walletInfo.currency.toString()} ',
          style: Theme.of(context)
              .textTheme
              .headline
              .copyWith(fontWeight: FontWeight.bold),
        ),
      );

Solution 7:^[7]

Use the prefixIcon or suffixIcon attribute of the InputDecoration instead of the prefixText or suffixText.

Solution 8:^[8]

Use prefixIcon or suffixIcon instead of prefix or suffix

Solution 9:^[9]

You could use PrefixIcon instead Prefix, coz prefix alone will appears after the prefixIcon, if both are specified and try to override prefixIconConstraints to be with Zero padding and margin. for example :

 decoration: const InputDecoration(
                      prefixIcon: PhoneCode(),
                      prefixIconConstraints:
                          BoxConstraints(),
                    ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Jiten Basnet
Solution 3	Axes Grinds
Solution 4	jayjw
Solution 5	gjstos
Solution 6	Christian Onwe
Solution 7	Hardik Hirpara
Solution 8	Bhatti Shb The Great
Solution 9

'Is there a way to create a text field with a prefix that is always visible in flutter

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]