Руководство Flutter CircleBorder

View more Tutorials:

Pуководства Flutter

CircleBorder
Examples
side

Сайт бесплатного изучения языков:

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.

Facebook

1- CircleBorder

CircleBorder используется для создания круговой границы как можно большего размера в пределах доступного пространства. Он часто используется с ShapeDecoration для рисования кругов.

TODO Link?

Если доступное пространство представляет собой прямоугольник, CircleBorder нарисует круг как можно большего размера в центре прямоугольника.

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

Используйте оператор сложения (+), чтобы добавить 2 ShapeBorders для создания ассоциативной границы.

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

Например, создаем простой 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 - предоставляет параметры, связанные с границей, такие как цвет, ширина, стиль.


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:

Pуководства Flutter