Flutter circle file image with clip oval - dart

Question

I want to clip an image that I extracted from the image picker plugin and it does not work with BoxDecoration.circle , so I want to clip it as circle with oval clipper. How to achive it ?

Answer 1

You can use CircleAvatar widget to display the obtained image to make it circular.
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
void main() => runApp(new MaterialApp(debugShowCheckedModeBanner: false, home: new MyApp()));
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
File _image;
Future getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = image;
});
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Home'),
),
body: new Center(
child: _image == null
? new Text('No image selected.')
: new CircleAvatar(backgroundImage: new FileImage(_image), radius: 200.0,),
),
floatingActionButton: new FloatingActionButton(
onPressed: getImage,
tooltip: 'Pick Image',
child: new Icon(Icons.add_a_photo),
),
);
}
}

Answer 2

You can also use ClipOval to circle the image. Just wrap your file image with ClipOval.
ClipOval(
child: FileImage(_image)
),

Answer 3

If you want to make use of BoxDecoration.Circle, this is what you need to do
Container(
width: 120.0,
height: 120.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: FileImage(_image)
)
)
),
I hope this helps

Answer 4

I have figured it out, this a class that I will use later for clipping it's child
class CircleRevealClipper extends CustomClipper<Rect> { CircleRevealClipper();
#override Rect getClip(Size size) {
final epicenter = new Offset(size.width, size.height);
// Calculate distance from epicenter to the top left corner to make sure clip the image into circle.
final distanceToCorner = epicenter.dy;
final radius = distanceToCorner;
final diameter = radius;
return new Rect.fromLTWH(
epicenter.dx - radius, epicenter.dy - radius, diameter, diameter); }
#override bool shouldReclip(CustomClipper<Rect> oldClipper) {
return true; } }