mydomain
No ADS
No ADS

Flutter ContinuousRectangleBorder Tutorial with Examples

  1. ContinuousRectangleBorder
  2. Examples
  3. side
  4. borderRadius

1. ContinuousRectangleBorder

No ADS
ContinuousRectangleBorder creates a rectangular border with smooth continuous transitions between the straight sides and the rounded corners.
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.

2. Examples

No ADS
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

No ADS
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)
      )
  ),
)
No ADS

Flutter Programming Tutorials

Show More
No ADS