During Flutter app development, you have to use a lot of widgets. These widgets could be text, rows, columns, stacks, 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. Flutter container border helps to organize content, draw attention to specific parts of the UI, and enhance the overall aesthetic. In this practical guide, we are going to learn how to give borders to containers in Flutter.
You can simply add borders to a 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.
What You Need to Know About Flutter Containers and BoxDecoration
In Flutter, the Container widget is one of the most versatile widgets, often used as a building block for more complex UIs. The Flutter BoxDecoration border class provides customization options that can be applied to containers to add styles like borders, shadows, background colors, gradients, and more. This allows you to create unique, customized elements in your app’s interface.
Why Add Borders to Containers in Flutter?
Adding borders to Flutter containers is one of those small changes that can significantly improve the appearance and feel of your app. Flutter container borders are your go-to tool for highlighting buttons, creating visual hierarchy, or simply adding flair. Flutter’s Container widget allows you to easily customize the border color, width, and radius to meet your design requirements. It’s all about making your app both functional and visually appealing. Borders can:
- Highlight specific parts of the app, such as buttons or active items.
- Create distinct sections in a list or layout.
- Enhance the visual design by adding style and structure to the UI.
- Help achieve consistency across different widgets or screens in an app.
Add Border to Containers
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.
Customizing the Container Border Color
You can use different colors to create visually appealing borders. The flutter container border color feature provides a wide range of color options in the Colors class, such as blue, Colors.red, and even custom color values using Color(0xFF000000). Here’s an example:
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.blueAccent,
),
),
),
In this example, the border is blue with a thickness of 3 pixels. You can customize the container border color Flutter offers to match your app’s color scheme or design preferences. Whether you’re using predefined colors Colors.blue or custom ones with Color(0xFF000000)Flutter makes it easy to style borders for a polished look.
Changing Border Thickness
The width parameter in Border allows you to adjust the thickness of the border. The default thickness is 1.0, but you can set it to any value. Here’s how to change the border thickness:
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
border: Border.all(
width: 8, // Adjust the thickness as desired
color: Colors.green,
),
),
),
By setting the width to 8, the border is now thicker and more prominent.
Adding Rounded Corners to Borders
To create a rounded Flutter container border, use the border-radius property in the Flutter BoxDecoration border. This is particularly useful when creating buttons or cards.
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.red, width: 3),
borderRadius: BorderRadius.circular(15), // Radius for rounded corners
),
),
With BorderRadius.circular(15), the container now has rounded corners, giving it a softer, more polished look.
Add Border to Specific Sides of Container
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: BoxDecoration(
border: Border(
left: BorderSide(color: Colors.yellow, width: 6),
top: BorderSide(color: Colors.pink, width: 10),
),
),
),
In this code, the border is applied only to the left and top sides of the container, using different colors and thicknesses for each side.
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: BoxDecoration(
border: Border.symmetric(
horizontal: BorderSide(color: Colors.grey, width: 2),
vertical: BorderSide(color: Colors.purple, width: 7),
),
),
),
With Border symmetric, you can apply borders to symmetrical sides, making the container visually balanced
Adding Dashed or Dotted Borders
While Flutter doesn’t have built-in support for dashed or dotted borders, you can achieve this effect by using third-party packages like flutter_dash. Here’s an example using the dotted_border package, which you’ll need to add to your pubspec.YAML file.
dependencies: dotted_border: ^2.0.0
Once you have the package, you can use it as follows:
import 'package:dotted_border/dotted_border.dart';
DottedBorder(
color: Colors.red,
dashPattern: [6, 3],
strokeWidth: 2,
child: Container(
width: 150,
height: 150,
color: Colors.white,
),
),
This code will create a dotted red border around the container. You can adjust the dash pattern to control the length and spacing of the dots or dashes.
Adding Shadows to Borders in Flutter
Adding shadows to the Flutter container border can give your containers a 3D effect, making them look more prominent on the screen. Use the boxShadow property in the Flutter BoxDecoration border to achieve this effect.
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.black, width: 2),
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 5,
offset: Offset(0, 3),
),
],
),
),
The box-shadow property adds a subtle shadow to the container, enhancing its depth and making it stand out.
Using Gradient Borders in Flutter
Flutter doesn’t directly support gradient borders, but you can create the effect by layering widgets. Here’s how to create a gradient border using a Container wrapped in a Stack
Stack(
children: [
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
borderRadius: BorderRadius.circular(10),
),
),
Container(
width: 140,
height: 140,
margin: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
),
],
),
In this example, a smaller container with a white background is placed inside a larger container with a gradient background, creating a gradient border effect.
Creating Animated Borders in Flutter
For dynamic UIs, you may want animated borders that change size, color, or shape. Flutter’s AnimatedContainer widget allows you to animate these properties smoothly.
AnimatedContainer(
duration: Duration(seconds: 1),
width: 150,
height: 150,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: isExpanded ? 5 : 2,
),
),
),
This example animates the border width based on the value of is expanded, making the border appear to expand or contract smoothly.
Common Mistakes When Adding Borders to Containers
- Forgetting BoxDecoration: Borders require a BoxDecoration. Ensure you apply it, or the border won’t appear.
- Overlapping Widgets: When stacking containers, be mindful of widget placement to avoid unintended overlaps.
- Using Colors Incorrectly: Use colors that match your theme; clashing colors can disrupt the app’s design.
Conclusion
In this blog, we have learned how to add a border to a container in Flutter and how to add borders to one side or more than one side of a container in Flutter. Hopefully, this will help you add borders to a container in Flutter. The Flutter container border plays an essential role in UI design, and understanding it will allow you to create visually appealing Flutter apps effortlessly.
Also, leave a comment below if you have any suggestions or questions. FlutterDesk always inspires Flutter enthusiasts to learn Flutter App Development and helps individuals in every way possible.
