[Flutter/dart] 画像の角を丸めて表示する

概要

アプリ内で画像を表示する際、元画像の角を丸めて表示したい場合もありますよね。

そこで、今回はそんな方法を紹介します。

方法

まずはそのまま表示した場合はこうなります。

Widget _myImg(){
  return Image.asset('image/sample.jpg',);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: SingleChildScrollView(
      child: Center(
        child: Container(
          padding: const EdgeInsets.all(32),
          child: _myImg(),
          width: double.infinity,
        ),
      )
    ),
  );
}

角を丸めるためには、ClipRRectを使用します。

Widget _myImg(){
  return ClipRRect(
    child: Image.asset('image/sample.jpg',),
    borderRadius: BorderRadius.all(Radius.circular(10)),
  );
}