[Flutter] Containerで画像を円形に切り抜いて表示する

アイコン画像などを円形で表示したいけどパッケージを追加したくないという方向けです。
やり方はContainerのdecorationでshapeとimageを設定するだけ！

ContainerはBoxDecorationのshapeで形状を変化させられるので、ここで円形のウィジェットを作成します。
あとはimageにAssetImageやNetworkImageを追加します！
　→ AssetImageの設定方法
　→ NetworkImageの設定方法
ローカルで保存できる画像はAssetImage、インターネット上の画像を表示するときはNetworkImageを使うと良いでしょう！

Container(
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage("<Your Image URL here>"),
    ),
  ),
);

mainも含めた完成版です

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final String imageUrl = "https://fuyuki-connect.net/wp-content/uploads/2024/11/icon_image.webp";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Center(child: Text("Crop an Image into a circle")),
        ),
        body: Align(
          alignment: Alignment.topCenter,
          child: Container(
            height: 100,
            width: 100,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage(imageUrl),
              ),
            ),
          ),
        ),
      ),
    );
  }
}