Complete Guide: How to Crop an Image In Flutter??

· 3 min read
How to Crop an Image In Flutter
How to Crop an Image In Flutter

Image Widget is generally a simple component that represents a thing or a group of things pictorially or which simply boosts the message or the text with a pictorial example to make the user understand better through the images that are displayed along with the paragraphs or the blog of data. So let’s start with how to crop an image in flutter.

How to Crop an Image In Flutter??

I would probably use a BoxDecoration with a DecorationImage. The alignment and fit properties are used 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 Widget.

Consider a code snippet like the below:

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

We will get output like a below:

Image Crop In flutter
Image Crop In the flutter

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

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

Take a look at brendan-duncan/image, it’s a 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);

Conclusion:

So in this article, we have been through How to Crop an Image In Flutter.

Keep Learning !!! Keep Fluttering !!!

Do let us know in the comments if you are still confused in flutter!! We would love to help.

Also, don’t miss the article on MergeSemantics Widget.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply