Comment obtenir une image à coin arrondi dans Flutter ?
Le framework Flutter propose un ensemble de widgets vaste. Ils sont tous customisables, afin qu'un développeur puisse créer l'application de la façon qu'il souhaite. Si vous souhaitez insérer une image avec des bords arrondis, vous allez pouvoir utiliser plusieurs widgets possibles, selon l'arrondi.
Dans Flutter, les images peuvent être encapsulées dans des clips. C'est avec ces clips que l'on peut définir une forme particulière pour contenir les images. La classe "ClipRRect" permet de définir des bords arrondis grâce à la propriété "borderRadius". La méthode "borderRadius.circular" définit un bord arrondi. Plus la valeur en paramètre est élevée, plus le bord est arrondi.
ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.network(
'http://url-vers-mon-image.jpg',
height: 100.0,
width: 100.0,
),
)
Une classe spécifique permet de créer un widget arrondi avec une image. Il s'agit de la classe "CircleAvatar". Comme son nom l'indique, elle est prévue pour afficher l'avatar d'un compte. Mais on peut utiliser n'importe quelle image comme source. La propriété "Radius" permet d'avoir un arrondi plus ou moins prononcé, et la propriété "backgroundImage" définit une image source qui sera affichée.
CircleAvatar(
radius: 20,
backgroundImage: NetworkImage('http://url-vers-mon-image.jpg')
)
Si vous souhaitez utiliser un cercle complet, la classe "ClipOval" va vous simplifier la tâche. On définit juste l'image qui sera dans le widget et c'est tout. Si l'on choisit une image avec une largeur et une hauteur identiques, on obtient un cercle. Sinon, le découpage sera de forme elliptique.
ClipOval(
child: Image.network(
"http://url-vers-mon-image.jpg",
height: 100,
width: 100,
fit: BoxFit.cover,
),
),