How do I determine the width and height of an image in Flutter?

Question

Assume I have declared my image in my pubspec.yaml like this:

  assets:
    - assets/kitten.jpg

And my Flutter code is this:

void main() {
  runApp(
    new Center(
      child: new Image.asset('assets/kitten.jpg'),
    ),
  );
}

Now that I have a new Image.asset(), how do I determine the width and height of that image? For example, I just want to print out the image's width and height.

(It looks like dart:ui's Image class has width and height, but not sure how to go from widget's Image to dart:ui's Image.)

Thanks!

Answer 1

The other answers seem overly complicated if you just want the width and height of an image in an async function. You can get the image resolution using flutter lib directly like this:

import 'dart:io';

File image = new File('image.png'); // Or any other way to get a File instance.
var decodedImage = await decodeImageFromList(image.readAsBytesSync());
print(decodedImage.width);
print(decodedImage.height);

Answer 2

UPDATED SOLUTION:

With the new version of flutter old solution is obsolete. Now the addListener needs an ImageStreamListener.

import 'dart:ui' as ui;

Widget build(BuildContext context) {
    Image image = Image.network('https://i.stack.imgur.com/lkd0a.png');
    Completer<ui.Image> completer = Completer<ui.Image>();
    image.image
      .resolve(ImageConfiguration())
      .addListener(
          ImageStreamListener(
              (ImageInfo info, bool _) => completer.complete(info.image)));
    ...
    ...

---

ORIGINAL VERSION:

If you already have an Image widget, you can read the ImageStream out of it by calling resolve on its ImageProvider.

import 'dart:ui' as ui;
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {

  Widget build(BuildContext context) {
    Image image = new Image.network('https://i.stack.imgur.com/lkd0a.png');
    Completer<ui.Image> completer = new Completer<ui.Image>();
    image.image
      .resolve(new ImageConfiguration())
      .addListener((ImageInfo info, bool _) => completer.complete(info.image));
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Image Dimensions Example"),
      ),
      body: new ListView(
        children: [
          new FutureBuilder<ui.Image>(
            future: completer.future,
            builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
              if (snapshot.hasData) {
                return new Text(
                  '${snapshot.data.width}x${snapshot.data.height}',
                  style: Theme.of(context).textTheme.display3,
                );
              } else {
                return new Text('Loading...');
              }
            },
          ),
          image,
        ],
      ),
    );
  }
}

Answer 3

Create a method, like:

Future<Size> _calculateImageDimension() {
  Completer<Size> completer = Completer();
  Image image = Image.network("https://i.stack.imgur.com/lkd0a.png");
  image.image.resolve(ImageConfiguration()).addListener(
    ImageStreamListener(
      (ImageInfo image, bool synchronousCall) {
        var myImage = image.image;
        Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
        completer.complete(size);
      },
    ),
  );
  return completer.future;
}

And use it like:

_calculateImageDimension().then((size) => print("size = ${size}")); // 487.0,696.0

Answer 4

You can resolve the ImageProvider to get an ImageStream, then use addListener to be notified when the image is ready.

import 'dart:ui' as ui;
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {

  Future<ui.Image> _getImage() {
    Completer<ui.Image> completer = new Completer<ui.Image>();
    new NetworkImage('https://i.stack.imgur.com/lkd0a.png')
      .resolve(new ImageConfiguration())
      .addListener((ImageInfo info, bool _) => completer.complete(info.image));
    return completer.future;
  }

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Image Dimensions Example"),
      ),
      body: new Center(
        child: new FutureBuilder<ui.Image>(
          future: _getImage(),
          builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
            if (snapshot.hasData) {
              ui.Image image = snapshot.data;
              return new Text(
                '${image.width}x${image.height}',
                style: Theme.of(context).textTheme.display4);
            } else {
              return new Text('Loading...');
            }
          },
        ),
      ),
    );
  }
}

Answer 5

With new version of flutter old solution not working example:

  image.image
  .resolve(new ImageConfiguration())
  .addListener((ImageInfo info, bool _) => completer.complete(info.image));

Below the Working version:

_image.image
    .resolve(new ImageConfiguration())
    .addListener(new ImageStreamListener((ImageInfo image, bool _) {
  completer.complete(image.image);
}));

Answer 6

If you don't want to use FutureBuilder or then, you can also use await like this:

Don't forget to import the Image. But as there are two Image classes, import it like this and use with ui.Image

 import 'dart:ui' as ui

Then you can fetch the dimensions of the image as follows.

 final Image image = Image(image: AssetImage('assets/images/someimage.png'));
 Completer<ui.Image> completer = new Completer<ui.Image>();
    image.image
        .resolve(new ImageConfiguration())
        .addListener(new ImageStreamListener((ImageInfo image, bool _) {
      completer.complete(image.image);
    }));
 ui.Image info = await completer.future;
 int width = info.width;
 int height = info.height;

Answer 7

A way for who only want decode image bounds:

import 'dart:ui' as ui;

final buffer = await ui.ImmutableBuffer.fromUint8List(bytes);
final descriptor = await ui.ImageDescriptor.encoded(buffer);

final imageWidth = descriptor.width;
final imageHeight = descriptor.height;
print("imageWidth: $imageWidth, imageHeight: $imageHeight");

descriptor.dispose();
buffer.dispose();

Answer 8

Here's a handy helper function, based on other solutions

helper function

Future<ImageInfo> getImageInfo(Image img) async {
  final c = new Completer<ImageInfo>();
  img.image
    .resolve(new ImageConfiguration())        
    .addListener(new ImageStreamListener((ImageInfo i, bool _) {
      c.complete(i);
    }));
  return c.future;    
}

usage

Image image = Image.network("https://example.com/pic.png");
ImageInfo info = await getImageInfo(image);

Answer 9

A simple way how to check image dimensions that is loaded from assets.

var img = await rootBundle.load("Your image path");
var decodedImage = await decodeImageFromList(img.buffer.asUint8List());
int imgWidth = decodedImage.width;
int imgHeight = decodedImage.height;

Answer 10

Easy way to get asset images size.

import 'dart:ui' as ui;
import 'package:flutter/services.dart'; 

          Future<Size> _loadAssetImageSize(String asset) async{
             ByteData data = await rootBundle.load(asset);
             ui.Codec codec = await 
             ui.instantiateImageCodec(data.buffer.asUint8List());
             ui.FrameInfo fi = await codec.getNextFrame();
             return Size(fi.image.width.toDouble(), fi.image.height.toDouble());
      }

 

Answer 11

Does any of the solution works for Flutter web? I am unable to find any solution, if i try to use image_size_getter package its throws "Error: Unsupported operation: _Namespace".

Answer 12

All the answers on this page currently only get the raw image size: that is the pixel height and width of the original image. Not the size of the image on the Flutter app. I needed that to resize bounding boxes as the page was resized. I need the current image size, and also know when it changes so I can resize the bounding box.

My solution involves:

• GlobalKey and addPostFrameCallback to get the image size
• Some logic to render when the image size changes

At the top of my build method:

  final _imageKey = GlobalKey();
  Size imageSize = Size.zero;

  @override
  Widget build(BuildContext context) {
    MediaQuery.of(context); // Trigger rebuild when window is resized. This updates the bounding box sizes.
    final image = Image.asset(exampleImagePath, key: _imageKey);
    // Yes, we call this every time the widget rebuilds, so we update our understanding of the image size.
    WidgetsBinding.instance.addPostFrameCallback(_updateImageSize);

My _updateImageSize

  void _updateImageSize(Duration _) {
    final size = _imageKey.currentContext?.size;
    if (size == null) return;
    if (imageSize != size) {
      imageSize = size;
      // When the window is resized using keyboard shortcuts (e.g. Rectangle.app),
      // The widget won't rebuild AFTER this callback. Therefore, the new
      // image size is not used to update the bounding box drawing. 
      // So we call setState
      setState(() {});
    }
  }

Answer 13

This code loads an image asset asynchronously and obtains its width and height. This code loads an image asset named "my_image.png" from the "assets" directory using the Image.asset() method.

A Completer object is created to handle the asynchronous loading of the image. The Completer is used to complete the future when the image is loaded.

An ImageStreamListener is added to the image's image stream using the addListener() method. The ImageStreamListener is triggered when the image is fully loaded and provides an ImageInfo object containing information about the loaded image. The Completer is then completed with the loaded ui.Image object.

Finally, the future from the Completer is awaited to get the ui.Image object. The width and height of the ui.Image object are then obtained using the width and height properties respectively.

Image image = Image.asset('assets/my_image.png');
Completer<ui.Image> completer = Completer<ui.Image>();
image.image.resolve(ImageConfiguration()).addListener(  
ImageStreamListener((ImageInfo info, bool _) {
    completer.complete(info.image); 
 }), 
);
ui.Image myImage = await completer.future; 
int width = myImage.width;
int height = myImage.height;