codestory

Die Anleitung zu Flutter CircleBorder

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

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: