How can I read (from disk) and resize an image, in Flutter/Dart

To resize an image that is defined in pubspec.yaml use "BoxFit":

@override
Widget build(BuildContext context) {
  return (new Container(
    width: 250.0,
    height: 250.0,
      alignment: Alignment.center,
      decoration: new BoxDecoration(

      image: DecorationImage(
          image: AssetImage('assets/Launcher_Icon.png'),
          fit: BoxFit.fill
      ),
    ),
  ));
}

also reference how to access images: https://flutter.io/assets-and-images/


You can read image from the disk using the image.file constructor.

For more features you can use the Image library

A Dart library providing the ability to load, save and manipulate images in a variety of different file formats.

Sample from the documentation examples

Load a jpeg, resize it and save it as a png

    import 'dart:io' as Io;
    import 'package:image/image.dart';
    void main() {
      // Read a jpeg image from file.
      Image image = decodeImage(new Io.File('test.jpg').readAsBytesSync());

      // Resize the image to a 120x? thumbnail (maintaining the aspect ratio).
      Image thumbnail = copyResize(image, width: 120);

      // Save the thumbnail as a PNG.
      new Io.File('out/thumbnail-test.png')
            ..writeAsBytesSync(encodePng(thumbnail));
    }

Use the ResizeImage image provider.

Using a separate package is nice if you want to use many of the functionality, or if you can't do otherwise. But just to depend on something instead of what the framework itself (and its underlying graphics engine) can do easily... :-)

If you have an ImageProvider now, say, to display an image from the bytes in memory:

Image(image: MemoryImage(bytes))

Just wrap it inside a ResizeImage:

Image(image: ResizeImage(MemoryImage(bytes), width: 50, height: 100))

And if you want even more control, just create your own image provider based on the source code of this one.


It's not a very good way to resize picture via Image library, since it blocks ui thread, and it brings very bad UX. There is a a maxWidth argument in image_picker lib, you can set it, so these writing files manipulation will be unnecessary in some cases.