[Flutter/dart]画像を楕円形に切り抜く

概要

スマホアプリ上に画像を表示する際、元画像を切り抜いて表示することも多いと思います。

円形に切り抜く場合はCircleAvatorを使いますが、元画像が縦長の場合は楕円形に切り抜きたいこともあるでしょう。その方法について解説します。

方法

ClipOvalを使います。

Widget _myImg(){
  return ClipOval(
    child: Image.asset('image/rect.png',),
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        Center(
          child: _myImg()
        )
      ],
    ),
  );
}

元画像：

これがこのようになります。