Flutter - Using BorderSide Examples

In this tutorial, I am going to show you how to create a BorderSide and modify its styles.

In Flutter, BorderSide represents a side of a border of a box. It's used as the element that constructs some of ShapeBorder classes, such as BorderBox and StadiumBorder. This tutorial shows you several ways to create a BorderSide instances and how to modify the styles.

Using BorderSide Constructor

You can create a BorderSide using the constructor. Below is the constructor along with the available properties and the default values.

  const BorderSide({
    this.color = const Color(0xFF000000),
    this.width = 1.0,
    this.style = BorderStyle.solid,
  })

You can use width property for setting the border width.

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: BorderSide(
            width: 10
        ),
      ),
    ),
    child:
        Center(child: Text("MyText", style: TextStyle(fontSize: 20))),
  )

Output:

 

For changing the border color, use color property.

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: BorderSide(
            color: Colors.red, width: 10
        ),
      ),
    ),
    child:
        Center(child: Text("MyText", style: TextStyle(fontSize: 20))),
  )

Output:

 

Using copyWith

BorderSide has a method named copyWith. It's used to make a copy of the instance by optionally changing some properties.

For example, there is a red BorderSide with a width value of 10.

  static BorderSide borderSide1 = BorderSide(color: Colors.red, width: 10);

  BorderSide copyWith({
    Color color,
    double width,
    BorderStyle style,
  })

If you don't pass any property in the constructor, the result is identical.

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: borderSide.copyWith(),
      ),
    ),
    child: Center(
        child: Text("MyText", style: TextStyle(fontSize: 20))
    ),
  )

Output:

 

The below example makes a copy with different color.

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: borderSide.copyWith(color: Colors.blue),
      ),
    ),
    child: Center(
        child: Text("MyText", style: TextStyle(fontSize: 20))
    ),
  )

Output:

 

Using scale

scale is used to multiply the width value of the instance by the given value.

  BorderSide scale(double t)

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: borderSide.scale(2.0),
      ),
    ),
    child: Center(
        child: Text("MyText", style: TextStyle(fontSize: 20))
    ),
  )

Output:

 

Using BorderSide.merge

BorderSide.merge is used to merge two instances into one. To merge successfully, the color and style of both instances must be the same. Otherwise you will get assertion error.

  static BorderSide merge(BorderSide a, BorderSide b)

Below is an example that works because both instances have the same color and style (using default). As for width, the resulting instance has a width value of the sum of the first and second instances'.

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: BorderSide.merge(
            BorderSide(color: Colors.red, width: 10),
            BorderSide(color: Colors.red, width: 5)
        ),
      ),
    ),
    child: Center(
        child: Text("MyText", style: TextStyle(fontSize: 20))
    ),
  )

Output:

 

Trying to merge different colors like in the below example will throw Failed assertion error.

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: BorderSide.merge(
            BorderSide(color: Colors.red, width: 10),
            BorderSide(color: Colors.green, width: 5)
        ),
      ),
    ),
     child: Center(
        child: Text("MyText", style: TextStyle(fontSize: 20))
    ),
  )

Using canMerge

The static method canMerge can be used to check whether two instances can be merged. It can be useful if you are not sure before using merge

  static bool canMerge(BorderSide a, BorderSide b)

The below example returns true because both instances have the same color and style (using default).

  static BorderSide borderSide1 = BorderSide(color: Colors.red, width: 10);
  static BorderSide borderSide2 = BorderSide(color: Colors.red, width: 5);
  bool canMerge = BorderSide.canMerge(borderSide1, borderSide2);

Output:

true

 

The below example returns false because of different color value.

  static BorderSide borderSide1 = BorderSide(color: Colors.red, width: 10);
  static BorderSide borderSide2 = BorderSide(color: Colors.green, width: 5);
  bool canMerge = BorderSide.canMerge(borderSide1, borderSide2);

Output:

false

Using lerp

lerp is used to interpolate styles of two instances.

  static BorderSide lerp(BorderSide a, BorderSide b, double t)

It has three parameters. The first two are the BorderSide instances whose styles are going to be interpolated. The last parameter t refers to the interpolation, which is used to set which instance (the first (a) or the second (b)) is more dominant in the result.

If you set the t value to 0, it will completely use a's style.

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: BorderSide.lerp(
            BorderSide(color: Colors.red, width: 10),
            BorderSide(color: Colors.green, width: 5, style: BorderStyle.none),
            0
        ),
      ),
    ),
    child: Center(
        child: Text("MyText", style: TextStyle(fontSize: 20))
    ),
  )

Output:

 

If you set the t value to 1, it will completely use b's style (not visible because of its style)

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: BorderSide.lerp(
            BorderSide(color: Colors.red, width: 10),
            BorderSide(color: Colors.green, width: 5, style: BorderStyle.none),
            1
        ),
      ),
    ),
    child: Center(
        child: Text("MyText", style: TextStyle(fontSize: 20))
    ),
  )

Output:

 

If you set the t value to 0.5, it will use a and b's style equally.

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: BorderSide.lerp(
            BorderSide(color: Colors.red, width: 10),
            BorderSide(color: Colors.green, width: 5, style: BorderStyle.none),
            0.5
        ),
      ),
    ),
    child: Center(
        child: Text("MyText", style: TextStyle(fontSize: 20))
    ),
  )

Output:

 

Setting the value to 0.1 means it uses a's style for 90% and b's style for 10%.

  Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        left: BorderSide.lerp(
            BorderSide(color: Colors.red, width: 10),
            BorderSide(color: Colors.green, width: 5, style: BorderStyle.none),
            0.1
        ),
      ),
    ),
    child: Center(
        child: Text("MyText", style: TextStyle(fontSize: 20))
    ),
  )

Output: