💬

Containerを使って画像を表示する方法

2023/01/10に公開

はじめに

Containerを使って画像を表示する方法を紹介します。
Containerのdecorationプロパティから、簡単に画像を表示できます。
コード例を使うと下のような表示になります。

Screenshot_20230110_071203.png

コード例

ImageContainer
class ImageContainer extends StatelessWidget {
  const ImageContainer({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 220,
        height: 220,
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),
          color: Colors.black12,
          image: DecorationImage(image: AssetImage("assets/images/flutter.png"),fit: BoxFit.contain)
        ),
      ),
    );
  }
}

あとがき

この方法を使えば、Containerの形を決定すれば、その枠の中に収まるように画像を表示することができます。

Discussion