codestory

Die Anleitung zu Flutter CircleBorder

View more Tutorials:

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.
  • TODO Link?
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}
)
  • TODO Link?

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.