How do I crop an image in Flutter?
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'),
)
),
),
),
),
);
}
}
Take a look to brendan-duncan/image, it's platform-independent library to manipulate images in Dart.
You can use the function:
Image copyCrop(Image src, int x, int y, int w, int h);
Provide a fit
factor to your Image
widget and then wrap it in AspectRatio
.
AspectRatio(
aspectRatio: 1.5,
child: Image.asset(
'your_image_asset',
fit: BoxFit.cover,
),
)
You can also directly use the Image class with BoxFit and do something like:
new Image.asset(
stringToImageLocation,
fit: BoxFit.cover,
)