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.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles