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

Post Views: 15

Need Help with Your Next Project??

Looking for expert support or custom development in Flutter, HTML5, Vue.js, or any other web technologies? Our team is here to help you build and optimize your digital presence.

Contact us today to discuss your project and see how we can take it to the next level!