Add or remove specific borders of a Textfield

December 30, 2022

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?

TextField used :-

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

>Solution :

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,
                ),
              ),
            ),