During flutter app development, you have to use a lot of widgets. These widgets could be text, row, columns, stack, and containers. Sometimes you might need to add a border to a container widget to create a UI box like a button, key, or card. In this practical guide, we are going to learn how to add a border to a container in Flutter.
Related Post – Flutter Conditional Show Widgets
You can simply add borders to container flutter by applying the BoxDecoration class. I will be giving you an example with a code to add borders to containers in Flutter. Moreover, you can change the border’s width, height, color, or radius. You can also add a border to only one or more than one side of the container. Such as only the left side of the container or only the top and bottom of the container etc.
Add Border to Containers in Flutter
To add a border to a container in flutter is not a big deal. You just need to wrap a widget in a container and add BoxDecoration class to it as in the code below.
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
border: Border.all(
width: 5,
color: Colors.black,
),
),
),
As you can see there are some defined parameters like width, height, and colors. You can change the values of these parameters and put them according to your needs.
Related Post – animatedcontainer drawer flutter
Add Border to Specific Sides of Container in Flutter
As discussed earlier, you can add borders to specific sides of a container in Flutter. You just need to specify the side to which you want to add borders and the rest of the code will be the same as above. You can also use the code given below to add a border to a specific side of a container.
Container(
width: 150,
height: 150,
decoration: const BoxDecoration(
border: Border(
left: BorderSide(
color: Colors.yellow,
width: 6.0,
),
top: BorderSide(
color: Colors.pink,
width: 10.0,
),
),
),
),
Add Borders to Symmetrical Sides of a Container
You can also add borders to the symmetrical side of a container. The side may be symmetrical vertically or horizontally. Use the code given below to add a border to the symmetrical side of a container.
Container(
width: 150,
height: 150,
decoration: const BoxDecoration(
border: Border.symmetric(
horizontal: BorderSide(
color: Colors.grey,
width: 2,
),
vertical: BorderSide(
color: Colors.purple,
width: 7,
),
),
),
),
Conclusion
In this blog, we have learned how to add a border to a container in Flutter. We’ve also learned how to add borders to one side or more than one side of a container in Flutter. Hopefully, this helps you out with adding borders to a container in Flutter. Also leave a comment below if you have any suggestions or questions to ask. FlutterDesk always inspires Flutter enthusiasts to learn Flutter App Development and help individuals in every way possible.
