How do I crop an image in Flutter?

Question

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)

Answer 1

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

Answer 2

You can also directly use the Image class with BoxFit and do something like:

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