Flutter : comment créer un coin arrondi avec fond transparent ?
Le framework Flutter utilise des containers et des widgets répartis dans une arborescence. L'application que vous créez est le point de départ de cette arborescence. Grâce à ce système, vous pouvez créer l'architecture de votre application. C'est grâce à ce système d'arborescence que l'on peut notamment créer un coin arrondi avec un fond transparent.
Pour réaliser ce procédé, il faut deux containers. Le premier container représentera le fond. Pour lui donner une couleur transparente, il faut donner la valeur "Colors.transparent" à la propriété "Color". Ce container va avoir comme enfant le deuxième container qui, lui, aura les bords arrondis. Pour cela, on utilise la propriété "decoration", qui permet de définir plus d'éléments pour designer un container. L'objet "BoxDecoration" permet de définir un habillage élaboré pour un widget ou un container. Il supporte comme un container la propriété "Color" pour définir la couleur. Il accepte d'autres propriétés plus avancées, ce qui lui permet notamment de définir des bordures. Dans ce cas, la propriété "borderRadius" permet de créer des coins arrondis. On peut directement y assigner l'arrondi via l'objet "Radius.circular". Il sera alors défini pour tous les coins. On peut aussi utiliser la méthode "only()" pour indiquer précisément quels sont les coins que l'on souhaite arrondir avec quel angle.
new Container(
height: 200.0,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0),
)
),
child: new Center(
child: new Text("Je suis un container aux bords arrondis en haut."),
)
),