如何在Flutter中裁剪图像？ [英] How do I crop an image in Flutter?

问题描述

假设我有一个矩形的纵向图像：

我想裁剪它，使其呈现如下：

如何在Flutter中做到这一点？

（我不需要调整图像大小。）

（图片来自

  import'package：flutter / material.dart'; 
 
 void main（）{
 runApp（new MaterialApp（
 home：new MyHomePage（），
））; 
} 
 
类MyHomePage扩展了StatelessWidget {
 
 Widget build（BuildContext context）{
 return new Scaffold（
 appBar：new AppBar（ 
标题：new Text（ Image Crop Example），
），
正文：new Center（
 child：new AspectRatio（
 AspectRatio：487/451， 
子级：新Container（
装饰：new BoxDecoration（
图片：new装饰图像（
 fit：BoxFit.fitWidth，
对齐方式：FractionalOffset.topCenter，
图片：new NetworkImage（'https://i.stack.imgur.com/lkd0a.png'），
）
），
），
），
），
）； 
} 
} 
  

Let's say I have a rectangular, portrait image:

I'd like to crop it, such that it's rendered like this:

How can I do this in Flutter?

(I don't need to resize the image.)

(Image from https://flic.kr/p/nwXTDb)

解决方案

I would probably use a BoxDecoration with a DecorationImage. You can use the alignment and fit properties to determine how your image is cropped. You can use an AspectRatio widget if you don't want to hard code a height on the 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'),
              )
            ),
          ),
        ),
      ),
    );
  }
}

这篇关于如何在Flutter中裁剪图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！