Flutter - Floating hint inside the OutlineInputBorder

AJSeraspi
August 25, 2023
182 views
0 votes
2 Answers

I am trying to achieve the TextFormField just like the image attached.

This is my code currently:

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      focusNode: _textFieldFocus,
      controller: widget.controller,
      decoration: InputDecoration(
        filled: true,
        fillColor: _color,
        prefixIcon: _buildPrefixIcon(),
        labelText: widget.hintText,
        hintStyle: context.textStyle.subHeadline.copyWith(color: widget.hintColor ?? context.colors.textSecondaryOnLightBackground),
        contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 8),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(color: context.colors.fieldsColor),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(color: context.colors.fieldsColor),
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(color: context.colors.fieldsColor),
        ),
      ),
      style: context.textStyle.subHeadline.copyWith(color: widget.textColor ?? context.colors.textPrimaryOnLightBackground),
      textInputAction: widget.textInputAction,
      keyboardType: widget.keyboardType,
      obscureText: widget.obscureText ?? false,
      onChanged: widget.onChanged,
    );
  }

Is there a way to create a floating hint inside the outline border?

Tags: dart flutter

Answers

Chosen as BEST ANSWER

I just managed to find a workaround. I just wrap the TextFormField with Container, set the TextFormField border as UnderlineInputBorder, and make the border side transparent or the background color of the screen so that the underline border will disappear.

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 8),
      decoration: BoxDecoration(
        border: Border.all(color: _borderColor),
        borderRadius: const BorderRadius.all(Radius.circular(8.0))
      ),
      child: TextFormField(
        focusNode: _textFieldFocus,
        controller: widget.controller,
        decoration: InputDecoration(
          filled: true,
          fillColor: _fillColor,
          prefixIcon: _buildPrefixIcon(),
          labelText: widget.hintText,
          labelStyle: context.textStyle.subHeadline.copyWith(color: _borderColor),
          contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 8),
          border: UnderlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide(color: context.colors.backgroundLightColor),
          ),
          focusedBorder: UnderlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide(color: context.colors.backgroundLightColor),
          ),
          enabledBorder: UnderlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide(color: context.colors.backgroundLightColor),
          ),
        ),
        style: context.textStyle.subHeadline.copyWith(color: widget.textColor ?? context.colors.textPrimaryOnLightBackground),
        textInputAction: widget.textInputAction,
        keyboardType: widget.keyboardType,
        obscureText: widget.obscureText ?? false,
        onChanged: widget.onChanged,
      ),
    );
  }

Let me know if there's any solution that can also worked.

(Edit)

Remove the border from the TextField itself, and wrap it with a Container that you will use to theme your text field.

Output:

Code:

class MyTextField extends StatelessWidget {
  const MyTextField({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 72.0,
      padding: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 8.0),
      decoration: const BoxDecoration(
        color: Colors.lightGreenAccent,
        borderRadius: BorderRadius.all(Radius.circular(6.0)),
      ),
      alignment: Alignment.centerLeft,
      clipBehavior: Clip.antiAlias,
      child: const TextField(
        decoration: InputDecoration(
          contentPadding: EdgeInsets.zero, // remove; managed by Container.
          border: InputBorder.none, // as above
          labelText: "Mobile number",
        ),
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Floating hint inside the OutlineInputBorder

Answers