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

Add or remove specific borders of a Textfield – Flutter

I want to remove the topBorder and keep the rest of the borders (leftBorder, rightBorder, bottomBorder) for a Textfield. Is there any way to do this? If it’s not possible for Textfield then is it possible for TextFormField or any other similar widget?

Image of the Textfield

TextField used :-

TextField(
                decoration: InputDecoration(
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: primaryColor)),
                    border: OutlineInputBorder(
                        borderSide: BorderSide(color: primaryColor))),
              )
Tags:

2

Answers


  1. 0

    One of the way to solve your problem is that,
    You can wrap your textField with Container and assign the border to the container.
    You can refer to below code

            Container(
              decoration: BoxDecoration(
                //borderRadius: BorderRadius.circular(10),
                color: Colors.white,
                border: Border(
                  left: BorderSide(),
                  bottom: BorderSide(),
                  right: BorderSide(),
                ),
              ),
              child: TextField(
                decoration: InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                ),
              ),
            ),
    Login or Signup to reply.
  2. 0

    I recommend checking out this package https://pub.dev/packages/assorted_layout_widgets. The author answered a similar question to yours here How to hide one side of the border of a TextField, in Flutter?. Scroll to the bottom and you will see his answer.

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

Back To Top
Search