Question 366048 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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.

enter image description here
How to achieve in this type UX design in flutter .

Tags:

2

Answers


  1. 0

    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,
            ),
          ),
        )
      ],
    );
  }
}
    Login or Signup to reply.
  2. 0

    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 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search