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

Issue

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

There is a bug that was closed with solution:

Closing for now as it's not possible to keep the prefix text visible in all states with a floating placeholder which is the main usage of this widget.

And some workaround that worked for me:

TextStyle _decorationStyleOf(BuildContext context) {
  final theme = Theme.of(context);
  return theme.textTheme.subhead
      .copyWith(color: theme.hintColor);
}

Stack(
  alignment: Alignment.centerLeft,
  children: <Widget>[
    Builder(
      builder: (context) {
        return Text(
          'prefix',
          style: _decorationStyleOf(context),
        );
      }
    ),
    TextField(
      decoration: InputDecoration(
        prefixText: 'prefix',
        prefixStyle: TextStyle(color: Colors.transparent),
      ),
    ),
  ],
)

Answered By - dubace