Saltar al contenido

¿Cómo determino el ancho y el alto de una imagen en Flutter?

Ya no tienes que investigar más por todo internet porque llegaste al lugar perfecto, poseemos la solución que quieres hallar pero sin liarte.

Solución:

Las otras respuestas parecen demasiado complicadas si solo desea el ancho y el alto de una imagen en una función asíncrona. Puede obtener la resolución de la imagen usando flutter lib directamente de esta manera:

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);

SOLUCIÓN ACTUALIZADA:

Con la nueva versión de flutter, la solución antigua queda obsoleta. Ahora el addListener necesita un ImageStreamListener.

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

VERSIÓN ORIGINAL:

Si ya tienes un Image widget, puede leer el ImageStream fuera de eso llamando resolve en sus ImageProvider.

captura de pantalla

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 completer = new Completer();
    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(
            future: completer.future,
            builder: (BuildContext context, AsyncSnapshot snapshot) 
              if (snapshot.hasData) 
                return new Text(
                  '$snapshot.data.widthx$snapshot.data.height',
                  style: Theme.of(context).textTheme.display3,
                );
               else 
                return new Text('Loading...');
              
            ,
          ),
          image,
        ],
      ),
    );
  

Puede resolve los ImageProvider para obtener un ImageStreamluego usa addListener para recibir una notificación cuando la imagen esté lista.

captura de pantalla

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 _getImage() 
    Completer completer = new Completer();
    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(
          future: _getImage(),
          builder: (BuildContext context, AsyncSnapshot snapshot) 
            if (snapshot.hasData) 
              ui.Image image = snapshot.data;
              return new Text(
                '$image.widthx$image.height',
                style: Theme.of(context).textTheme.display4);
             else 
              return new Text('Loading...');
            
          ,
        ),
      ),
    );
  

Aquí tienes las comentarios y puntuaciones

Si estás contento con lo expuesto, tienes la libertad de dejar un post acerca de qué le añadirías a esta reseña.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *