Flutterで丸アイコンを表示する

Flutterでは、プロフィール画像などでよく見られる丸アイコンを、ImageにWidgetをラップすることで、簡単に実装することができます。

Assetsに画像を追加する方法はこちらの記事を参考にしていただければと思います。

ClipOvalをラップする

####コードサンプル

ClipOval(
          child: Image.asset(
            'assets/images/sample.png',
            width: 200,
            height: 200,
            fit: BoxFit.fill,
          ),
        ),

ClipOvalは楕円形にするWidgetです。

ClipRRectをラップする

####コードサンプル

ClipRRect(
          borderRadius: BorderRadius.circular(100),
          child: Image.asset(
            'assets/images/sample.png',
            width: 200,
            height: 200,
            fit: BoxFit.fill,
          ),
        ),

円形にする場合は、imageの半分のサイズをborderRadius: BorderRadius.circularに指定する必要があります。

borderRadiusの値を変更することで、自由に角丸の大きさを変えることができます。

↓borderRadiusを50に指定した場合

実行結果

今回紹介したコードのどちらで実行しても、見え方は同じになります。

##公式ドキュメント
ClipOval
https://api.flutter.dev/flutter/widgets/ClipRect-class.html
ClipRRect
https://api.flutter.dev/flutter/widgets/ClipOval-class.html