devstory

Le Tutoriel de Flutter CircleBorder

View more Tutorials:

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

1- CircleBorder

CircleBorder est utilisé pour créer une bordure circulaire aussi grande que possible dans un espace disponible. Il est souvent utilisé avec ShapeDecoration pour dessiner des cercles.
  • TODO Link?
Si l'espace disponible est un rectangle, CircleBorder dessinera un cercle aussi grand que possible au centre du 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
            )
        )
    )
)
Utiliser l'opérateur d'addition (+) pour ajouter 2 ShapeBorder(s) aux fins de créer une bordure associative.
(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
            )
        )
    )
)
Par exemple: créer un Avatar simple:
(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 - Fournir des paramètres relatifs à la bordure tels que couleur, largeur, style.

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: