mydomain
No ADS
No ADS

Flutter CircleBorder Tutorial with Examples

  1. CircleBorder
  2. Examples
  3. side

1. CircleBorder

No ADS
CircleBorder is used to create a circular border as large as possible within an available space. It is often used with ShapeDecoration to draw circles.
  • Flutter ShapeDecoration
If the available space is a rectangle, CircleBorder will draw a circle as large as possible at the center of the rectangle.
CircleBorder constructor
const CircleBorder(
    {BorderSide side: BorderSide.none}
)

2. Examples

No ADS
(ex1)
Container(
    width: 150,
    height: 300,
    child: Center(
        child: Text(
            "GO",
            style: TextStyle(fontSize: 50)
        )
    ),
    decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder (
            side: BorderSide(
                width: 10,
                color: Colors.blue
            )
        )
    )
)
Use addition operator (+) to add 2 ShapeBorder(s) in order to create an associative border.
(ex2)
Container(
    width: 150,
    height: 300,
    child: Center(
        child: Text(
            "GO",
            style: TextStyle(fontSize: 50)
        )
    ),
    decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder (
            side: BorderSide(
                width: 10,
                color: Colors.blue
            )
        ) +  CircleBorder (
            side: BorderSide(
                width: 20,
                color: Colors.green
            )
        )
    )
)
For example, create a simple Avatar:
(ex3)
Container(
    width: 200,
    height: 200,
    child: Center(
        child: Image.network("https://s3.o7planning.com/images/boy-128.png")
    ),
    decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder (
            side: BorderSide(
                width: 10,
                color: Colors.blue
            )
        )
    )
)

3. side

side - Provides parameters related to the 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
No ADS

Flutter Programming Tutorials

Show More
No ADS