[Flutter]アイコン(Icon)を円にするには？

どうも、ちょげ(@chogetarou)です。

アイコンを円にする方法を紹介します。

方法

アイコンを円にする方法は、４つあります。

CircleAavatar

１つ目は、CircleAvatarを使う方法です。

CircleAvatar(
  child: Icon(Icons.ac_unit),
)

ClipOval + Material

２つ目は、ClipOvalとMaterialを使う方法です。

ClipOval(
  child: Material(
    color: Colors.blue,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Icon(Icons.access_alarm),
    ),
  ),
)

Material

３つ目は、Materialを使う方法です。

Material(
  shape: CircleBorder(),
  child: Icon(Icons.accessibility),
  color: Colors.pink,
)

Container

４つ目は、Containerを使う方法です。

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.blue,
  ),
  child: Icon(Icons.account_balance),
  padding: EdgeInsets.all(8),
)

まとめ

Iconを丸くする方法は、次の４つです。

• CircleAvatar
• ClipOval + Material
• Material
• Container