Tuto simple pour arrondir une image dans Flutter

Comment rendre une image ronde dans Flutter ?

Dans Flutter, le widget Image ne dispose pas directement d’une propriété « shape » pour le rendre rond. La solution va donc être de le placer dans un Container, qui lui va pouvoir prendre une forme arrondir en lui appliquant un BorderRadius.

La première étape va donc être de placer votre image dans un Container auquel vous allez ajouter une propriété decoration, prenant comme valeur BoxDecoration().

C’est dans cette BoxDecoration que vous allez pouvoir ajouter la propriété borderRadius qui permet de définir la courbure des coins du Container en utilisant BorderRadius.circular(x). Pour obtenir un cercle, vous devrez fixer le rayon des bords à la moitié de la taille du Container. Si votre container fait 100 pixels sur 100 pixels, la valeur de BorderRadius sera donc de 50.

En revanche, si vous souhaitez simplement arrondir les bords, appliquez plutôt une valeur plus petite, selon le rendu espéré.

Voici un code d’exemple mettant en pratique ce guide :

'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Ronde dans Flutter'),
        ),
        body: Center(
          child: Container(
            width: 200.0,
            height: 200.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(
                  100.0), // Rayon pour rendre l'image ronde
              image: const DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                    'https://cdn.pixabay.com/photo/2024/02/15/16/57/cat-8575768_1280.png'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}