devstory

Le Tutoriel de Flutter ContinuousRectangleBorder

View more Tutorials:

1- ContinuousRectangleBorder

ContinuousRectangleBorder crée une bordure rectangulaire avec des transitions continues lisses entre les côtés droits et les coins arrondis.
  • TODO Link!
  • TODO Link!
ContinuousRectangleBorder constructor
const ContinuousRectangleBorder(
  {BorderSide side: BorderSide.none,
  BorderRadiusGeometry borderRadius: BorderRadius.zero}
)
Fondamentalement, l'utilisation de ContinuousRectangleBorder est similaire à celle de RoundedRectangleBorder. Ils créent tous une bordure rectangulaire aux coins arrondis. Cependant, les coins arrondis créés par ContinuousRectangleBorder sont plus lisses.

2- Examples

Par exemple: Utiliser ContinuousRectangleBorder pour un Container:
(ex1)
Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(32.0),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)
Utiliser l'opérateur d'addition (+) pour ajouter 2 ShapeBorder aux fins de créer une bordure associative:
(ex2)
Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(16.0),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      ) + ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(32.0),
          side: BorderSide(
              width: 20,
              color: Colors.green
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

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!
Remarque: La propriété ContinuousRectangleBorder.side ne fonctionne pas avec ElevatedButton, TextButton et OutlinedButton. Il est remplacé (override) par ButtonStyle.side.

4- borderRadius

borderRadius - Fournir la valeur du rayon de 4 coins du rectangle.
BorderRadiusGeometry borderRadius: BorderRadius.zero
  • TODO Link!
Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.zero,
              topLeft:   Radius.zero,
              bottomRight: Radius.circular(20),
              topRight: Radius.circular(45)
          ),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

View more Tutorials:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.