How to Add a Border to a Container in Flutter

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. Borders help 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 add a border to a container in Flutter.

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.

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 BoxDecoration 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 containers serves both functional and aesthetic purposes. 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 Border Color

You can use different colors to create visually appealing borders. Flutter provides a wide range of color options in the Colors class, such as Colors.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 border to match your app’s color scheme or design preferences.

Changing Border Thickness

The width parameter in Border.all 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 width: 8, the border is now thicker and more prominent.

Adding Rounded Corners to Borders

To create a rounded border, use the borderRadius property in BoxDecoration. 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 dashPattern to control the length and spacing of the dots or dashes.

Adding Shadows to Borders in Flutter

Adding shadows to borders can give your containers a 3D effect, making them look more prominent on the screen. Use the boxShadow property in BoxDecoration 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 boxShadow 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

1. Forgetting BoxDecoration: Borders require BoxDecoration. Ensure you apply it, or the border won’t appear.
2. Overlapping Widgets: When stacking containers, be mindful of widget placement to avoid unintended overlaps.
3. 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. 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.