Flutter CircleBorder Tutorial with Examples

CircleBorder
Examples
side

1. CircleBorder

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

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

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

(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

Flutter CircleBorder Tutorial with Examples

1. CircleBorder

2. Examples

3. side

Flutter Programming Tutorials

Flutter Programming Tutorials

Newest Articles