Flutter ContinuousRectangleBorder Tutorial with Examples

ContinuousRectangleBorder
Examples
side
borderRadius

1. ContinuousRectangleBorder

ContinuousRectangleBorder creates a rectangular border with smooth continuous transitions between the straight sides and the rounded corners.

ShapeBorder
OutlinedBorder
RoundedRectangleBorder
StadiumBorder
CircleBorder
Border
BoxBorder
InputBorder
BorderDirectional
BeveledRectangleBorder
StadiumBorder
OutlineInputBorder
UnderlineInputBorder

ContinuousRectangleBorder constructor

const ContinuousRectangleBorder(
  {BorderSide side: BorderSide.none,
  BorderRadiusGeometry borderRadius: BorderRadius.zero}
)

Basically, ContinuousRectangleBorder's usage is the same as RoundedRectangleBorder. They all create a rectangular border with rounded corners. However, the rounded corners created by ContinuousRectangleBorder are smoother.

Flutter RoundedRectangleBorder

2. Examples

For example: Use ContinuousRectangleBorder for a Container:

(ex1)

Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(32.0),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

Use addition operator (+) to add 2 ShapeBorder in order to create an associative border:

(ex2)

Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(16.0),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      ) + ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(32.0),
          side: BorderSide(
              width: 20,
              color: Colors.green
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

3. side

side - Provides parameters related to border such as color, width, style.

BorderSide side: BorderSide.none

BorderSide constructor

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

Flutter BorderSide

Note: ContinuousRectangleBorder.side property does not work with ElevatedButton, TextButton and OutlinedButton. It is overridden by ButtonStyle.side.

4. borderRadius

borderRadius - Provides 4 corner radius value of the rectangle.

BorderRadiusGeometry borderRadius: BorderRadius.zero

Flutter BorderRadiusGeometry

Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.zero,
              topLeft:   Radius.zero,
              bottomRight: Radius.circular(20),
              topRight: Radius.circular(45)
          ),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)