flutter

How to add a border to a widget in Flutter?

In Flutter, you can give a border to a Container or an Input TextField inside the BoxDecoration or InputDecoration fields respectively. In this example, we will show you how to add a border, change its thickness, color, radius, and other properties in Flutter.

Adding a border to a Container

Full Border


Container(
    width: 300,
    height:100,
    decoration:BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.circular(20.0),
        border: Border.all(
            width: 8.0,
            color: Colors.black,
        )
    )
)

For a full border, we can use Border.all constructor. Inside Border.all constructor, you can change properties like color and width. You can also change the border-radius using the borderRadius property inside BoxDecoration.


Border Side


Container(
    width: 300,
    height:100,
    decoration:BoxDecoration(
        color: Colors.yellow,
        border: Border(
            bottom: BorderSide(
                color: Colors.black,
                width: 10.0
            ),
            left: BorderSide(
                color: Colors.black,
                width: 10.0
            ),
        )
    )
)

BorderSide can be used to give border to selected sides of the Container. Here in this example, we have used left and bottom properties to add a border to the left and bottom of the container. You can customize the border using the color and width properties inside the BorderSide class.

Adding a border to a TextField

Underline Input Border


Container(
    width: 300,
    child: TextField(
        decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                    color: Colors.yellow,
                    width: 2.0
                ),
            ),
            focusedBorder: InputBorder.none,
            disabledBorder: InputBorder.none,
            hintText: "Underline input border example"
        ),
    )
)

Border to a TextField can be given inside the InputDecoration class. In this example shown above, we have used an UnderlineInputBorder with color and width properties. Here we have given the border when the input is enabled. For all other cases, we have given the border as none.

Outline Input Border


Container(
    width: 300,
    child: TextField(
        decoration: InputDecoration(
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(
                    color: Colors.green,
                    width: 2.0
                ),
                borderRadius: BorderRadius.all(
                    Radius.circular(14.0)
                )
            ),
            hintText: "Outline input border example"
        ),
    )
)

Looking to start a project?

Get in touch with us and turn your dream into reality today.

Contact us

Interactive Example