带有剪辑椭圆形的颤动圆形文件图像

Question

我想剪辑从图像选择器插件中提取的图像，但它不适用于

BoxDecoration.circle

，所以我想用椭圆形剪辑器将其剪辑为圆形。如何实现？

Answer 1

您可以使用

CircleAvatar

小部件来显示获取的图像，使其成为

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

您还可以使用 ClipOval 圈出图像。只需用

ClipOval

包裹文件图像即可。

ClipOval(
  child: FileImage(_image)
),

Answer 3

如果你想使用BoxDecoration.Circle，这就是你需要做的

                 Container(
                    width: 120.0,
                    height: 120.0,
                    decoration:  BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                            fit: BoxFit.fill,
                            image:  FileImage(_image)
                          )
                        )
                      ),

我希望这有帮助

Answer 4

我已经弄清楚了，这是一个我稍后将用于剪辑它的孩子的类

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