How to create under the label in Textformfield, not a border, in Flutter

Question

I want to create a Textformfield. But the label shows under the Textformfield, not the border. And Textformfield corner is rounded and the validation error is below the Textformfield.

How to achieve in this type UX design in flutter .

Answer 1

Create your own CustomTextField like this: put error text under TextFormField

 class CustomTextField extends StatelessWidget {
  const CustomTextField({
    super.key,
    this.controller,
    this.errorText,
    this.labelText,
  });

  final TextEditingController? controller;
  final String? errorText;
  final String? labelText;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TextFormField(
          controller: controller,
          decoration: InputDecoration(
            label: labelText != null
                ? Text(
                    labelText!,
                  )
                : null,
            error: errorText != null ? Container() : null,
            isDense: true,
          ),
        ),
        Visibility(
          visible: errorText != null,
          child: Padding(
            padding: const EdgeInsets.only(
              top: 4,
            ),
            child: Text(
              errorText ?? "",
              //style:errorStyle,
            ),
          ),
        )
      ],
    );
  }
}

Answer 2

Here is Code that you need:

TextField(
                  decoration: InputDecoration(
                    fillColor: Colors.amber,
                    filled: true,
                    label: const Text(
                      'Email',
                      style: TextStyle(fontSize: 20, color: Colors.black),
                    ),
                    disabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                ),

And for the showing error under textfield, simply use

 errorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(40),
                    borderSide: BorderSide(color: Colors.red, width: 5)),

For more info and details about flutter textfields, visit this article.

Happy Coding :)