In Flutter, how do I style the label text in textformfield when in focus?

Question

I want to make the hint text to appear inside the textformfield when in focus, rather than at the top edge.

Currently it looks like this Image of textformfield with labeltext sitting at the edge when in focus

But I want the labeltext to appear inside the textformfield

Image of textformfield with labeltext inside the field when in focus

@override Widget build(BuildContext context) {
final InputDecorationTheme inputTheme = Theme.of(context).inputDecorationTheme;

return TextFormField(
  enabled: enabled,
  key: this.customKey,
  controller: textEditingController,
  initialValue: initialValue,
  inputFormatters: isNumericalOnly
      ? [
          FilteringTextInputFormatter.digitsOnly,
          FilteringTextInputFormatter.singleLineFormatter,
        ]
      : [
          FilteringTextInputFormatter.singleLineFormatter,
        ],
  keyboardType: isNumericalOnly ? TextInputType.number : TextInputType.text,
  focusNode: focusNodeToggle,
  maxLength: maxLength,
  validator: (String? value) {
    return validator != null ? validator!(value.toString()) : null;
  },
  onSaved: (String? value) {
    return onSaved != null ? onSaved!(value.toString()) : null;
  },
  onChanged: (String? value) {
    return onChanged != null ? onChanged!(value.toString()) : null;
  },
  buildCounter: maxLength != null && isCounterVisible == true
      ? (BuildContext context, {int? currentLength, int? maxLength, bool? isFocused}) =>
          Container(child: Text('$currentLength/$maxLength'))
      : (BuildContext context, {int? currentLength, int? maxLength, bool? isFocused}) => null,
  decoration: InputDecoration(
    floatingLabelBehavior: FloatingLabelBehavior.auto,
    hintText: customHintText,
    helperText: customHelperText,
    helperMaxLines: 2,
    border: inputTheme.border,
    focusedBorder: inputTheme.focusedBorder,
    filled: inputTheme.filled,
    fillColor: inputTheme.fillColor,
    labelStyle: inputTheme.labelStyle,
    label: Text.rich(
      TextSpan(
        children: [
          WidgetSpan(
            child: Text(
              label.toString(),
            ),
          ),
          WidgetSpan(
              child: isDataloading
                  ? LoadingIndicator(
                      width: 15,
                      height: 15,
                    )
                  : Text('')),
        ],
      ),
    ),
  ),
); here

user_13825240 · Answer

You can achieve the above result by wrapping your TextFormField with a container and giving the container some border and padding. Then make all the borders of TextFormField like focusedBorder, enabledBorder, etc to transparent color.

Take a look at the following snippet. It will be clear to you. I have also added a GIF as a proof of concept.

Container(
        padding: const EdgeInsets.only(top: 10, left: 10),
        decoration: BoxDecoration(color: Colors.white, border: Border.all(color: Colors.blue, width: 2), borderRadius: const BorderRadius.all(Radius.circular(5))),
      child: TextFormField(decoration: const InputDecoration(labelText: "TextField",focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)))),
   )               
  )

In Flutter, how do I style the label text in textformfield when in focus?

1 Answers