CODEWITHSUNDEEP
dartflutter
Osama Gamal
Osama Gamal

Reputation: 2570

Flutter circle file image with clip oval

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 ?

Upvotes: 21

Views: 40529

Answers (5)

Dmitrii Matunin
Dmitrii Matunin

Reputation: 747

This one worked for me in case when width constraint > height constraint. Not sure if this will work for opposite case (I think you can switch the numbers between height and width)

class CircleForceClipper extends CustomClipper<Rect> {
  CircleForceClipper();

  @override
  Rect getClip(Size size) {
    final minDimension = size.shortestSide;
    return Rect.fromLTWH(size.width / 2 - minDimension / 2, size.height - minDimension, minDimension, minDimension);
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return true;
  }
}

Upvotes: -1

Osama Gamal
Osama Gamal

Reputation: 2570

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

Upvotes: 4

Vinoth
Vinoth

Reputation: 9734

You can also use ClipOval to circle the image. Just wrap your file image with ClipOval.

ClipOval(
  child: FileImage(_image)
),

Upvotes: 13

Uchenna Nnodim
Uchenna Nnodim

Reputation: 484

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

Upvotes: 6

Vinoth Kumar
Vinoth Kumar

Reputation: 13431

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

Upvotes: 23

Related Questions