1

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))),
              )
Moulik Gupta 50
  • 141
  • 1
  • 9

2 Answers2

2

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.

Dino Melunović
  • 21
  • 3
1

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,
                ),
              ),
            ),
Rohan Jariwala
  • 1,564
  • 2
  • 7
  • 24
  • I believe if you use this you will loose some of the functionality the border has. https://api.flutter.dev/flutter/material/InputBorder-class.html For example it does not change color when it's selected – MaLa Dec 30 '22 at 17:24