Flutter Container Border

The Container is a fundamental widget in Flutter, used to group and layout other widgets. You can customize the decoration of the Container using the border property.

Understanding Borders

Borders define the edge of a widget, separating it from its surroundings. In Flutter, there are four types of border classes:

• Border
• BorderDirectional
• InputBorder
• OutlineInputBorder

Each of these classes has different properties that you can use to customize the visual appearance of the border.

Border

The Border class is used to define a border that looks the same on all sides. You can use the Border class to specify properties such as color, style, and thickness of the border. For example:

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.blue,
      width: 3.0,
      style: BorderStyle.solid,
    ),
  ),
  child: // your child Widgets here
)

This will create a Container with a solid blue border that is 3.0 pixels wide.

BorderDirectional

The BorderDirectional class is similar to Border, but allows you to specify different border properties for each of the four directions. For example:

Container(
  decoration: BoxDecoration(
    border: BorderDirectional(
      start: BorderSide(
         color: Colors.pink,
         width: 3.0,
         style: BorderStyle.solid,
      ),
      end: BorderSide(
         color: Colors.pink,
         width: 3.0,
         style: BorderStyle.solid,
      ),
      top: BorderSide.none,
      bottom: BorderSide.none,
    ),
  ),
  child: // your child Widgets here
)

This will create a Container with pink borders on the left and right sides, and no border on the top and bottom.

InputBorder

The InputBorder class is primarily used with input widgets, such as TextField. It allows you to define a border that changes dynamically based on the state of the input widget. For example, when the user focuses the input, the border may change color or thickness.

OutlineInputBorder

The OutlineInputBorder class is a subclass of InputBorder, and is typically used with TextField widgets to create a border that is similar to a text field in a web form. It has the ability to add a roundness to the edges of the border, and also can change dynamically based on the state of the input widget. For example:

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(5.0),
    ),
  ),
);

This will create a circular OutlineInputBorder that wraps around the TextField widget.

Conclusion

In Flutter, the Container widget is an extremely versatile widget that can be used to group and layout other widgets. By using the border property, you can further customize the decoration of a Container widget. The Border, BorderDirectional, InputBorder, and OutlineInputBorder classes can be used to create different types of borders with varying properties.