devstory

Le Tutoriel de Flutter CircleBorder

  1. CircleBorder
  2. Examples
  3. side

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.
  • Le Tutoriel de Flutter ShapeDecoration
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}
)
  • Le Tutoriel de Flutter BorderSide

Tutoriels de programmation Flutter

Show More

Tutoriels de programmation Flutter

Show More

Articles les plus récents

Show More