Die Anleitung zu Flutter CircleBorder

CircleBorder
Examples
side

1. CircleBorder

CircleBorder wird verwendet, um eine kreisförmige Rand zu erstellen, die innerhalb eines vorhandenen Raum so groß wie möglich ist. Es wird oft mit ShapeDecoration verwendet um eine Kreis zu bezeichnen.

Die Anleitung zu Flutter ShapeDecoration

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

Wenn der vorhandene Raum ein Rechteck ist, wird CircleBorder eine Kreis so groß wie möglich in der Mitte des Rechteck bezeichnen.

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
            )
        )
    )
)

Verwenden Sie den Operator Addition ( + ) um 2 ShapeBorder zur Erstellung eines kombinierten Rand zu additieren.

(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
            )
        )
    )
)

Das Beispiel über die Erstellung eines einfachen 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 -bietet die Parameter über die Rand wie Farbe, Breite, Stil an.

BorderSide side: BorderSide.none

BorderSide constructor

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

Die Anleitung zu Flutter BorderSide

Die Anleitung zu Flutter CircleBorder

1. CircleBorder

2. Examples

3. side

Anleitungen Flutter

Anleitungen Flutter

Neueste Artikel