如何在Flutter中裁剪图像？

Question

假设我有一个长方形的肖像图像:

我想裁剪它,使它像这样渲染:

我怎么能在Flutter做到这一点？

(我不需要调整图像大小.)

(图片来自https://flic.kr/p/nwXTDb)

Answer 1

我可能会用BoxDecoration一个DecorationImage.您可以使用alignment和fit属性来确定图像的裁剪方式.AspectRatio如果您不想硬编码高度,可以使用小部件Container.

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Image Crop Example"),
      ),
      body: new Center(
        child: new AspectRatio(
          aspectRatio: 487 / 451,
          child: new Container(
            decoration: new BoxDecoration(
              image: new DecorationImage(
                fit: BoxFit.fitWidth,
                alignment: FractionalOffset.topCenter,
                image: new NetworkImage('https://i.stack.imgur.com/lkd0a.png'),
              )
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

fit为您的小部件提供一个因素Image，然后将其包装在AspectRatio.

AspectRatio(
  aspectRatio: 1.5, 
  child: Image.asset(
    'your_image_asset',
    fit: BoxFit.cover,
  ),
)

Answer 3

Take a look to brendan-duncan/image, it's platform-independent library to manipulate images in Dart.

您可以使用该功能：

Image copyCrop(Image src, int x, int y, int w, int h);

Answer 4

您还可以直接将Image类与BoxFit一起使用，并执行以下操作：

new Image.asset(
  stringToImageLocation,
  fit: BoxFit.cover,
)

Answer 5

仅使用这两个属性为我工作：

CachedNetworkImage(
  fit: BoxFit.cover,// OR BoxFit.fitWidth
  alignment: FractionalOffset.topCenter,
  ....
)