[Flutter/dart] Display the image with rounded corners

Overview

When displaying an image in the app, you may want to round the corners of the original image.

So, this time, I will introduce such a method.

Method

First of all, it will be like this when displayed as it is.

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,
        ),
      )
    ),
  );
}

Use ClipRRect to round the corners.

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