If you need to display image in circle in your Flutter application without pre-processing the source image, you'll find on this tutorial.
The idea is to create a Container. The width and height of the Container should be the same to make it a circle. Otherwise, you can use different value for width and height to create an oval. Then, pass a BoxDecoration to the decoration option of the Container. In the BoxDecoration, we make its shape circle by setting BoxShape.circle as the value. The BoxDecoration has image option which must be of type DecorationImage.
To set the image to be displayed, pass it as the image option of DecorationImage. You also need to control how the image will be fitted inside a circle. DecorationImage's fit option has some available values. However, there are only two values suitable for displaying image in circle: BoxFit.fill and BoxFit.cover. If you choose to use fill, the image will be distorted to fit the circle. That means the image ratio may be changed. If you choose cover, the image ratio remains unchanged, but outer parts may be cropped. Here is the comparison:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Circle Image Tutorial by Woolha.com',
home: Scaffold(
appBar: AppBar(
title: Text('Circle Image Tutorial by Woolha.com'),
),
body: CircleImage(),
),
);
}
}
class CircleImage extends StatelessWidget {
@override
Widget build(BuildContext context) {
double _size = 300.0;
return Center(
child: new Container(
width: _size,
height: _size,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
"https://www.woolha.com/media/2019/06/buneary.avif")
)
)
),
);
}
}