Flutter: Container border examples

Last updated on November 28, 2020 A Goodman Loading... Post a comment

This article walks you through 3 examples of setting borders for a Container in Flutter.

Example 1: Set a border for all sides

This example creates a square yellow box enclosed by a red border.

Preview:

The code:

Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
                color: Colors.yellow,
                // Red border with the width is equal to 5
                border: Border.all(
                    width: 5, 
                    color: Colors.red
                )
          ),
     ),
)

Example 2: Set a different border for each side

In this example, we specify a different border for each side of a box (top, right, bottom, and left) by using the BorderSide class.

Preview:

The code:

Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
                color: Colors.blue[100],
                // Set a border for each side of the box
                border: Border(
                  top: BorderSide(width: 15, color: Colors.yellow),
                  right: BorderSide(width: 20, color: Colors.purple),
                  bottom: BorderSide(width: 25, color: Colors.green),
                  left: BorderSide(width: 18, color: Colors.black)
                )
          ),
))

Example 3: A border with rounded corners

Preview:

The code:

Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
                color: Colors.orange,
                border: Border.all(
                  width: 5,
                  color: Colors.purple,
                ),
                // Make rounded corners
                borderRadius: BorderRadius.circular(30)
          ),
 ))

Conclusion

In this article, you explored several examples of how to set borders for a Container in Flutter. If you’d like to learn more about Flutter, check out our Flutter category page or Dart category page for more tutorials and examples.

Related Articles

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x