Cómo cargar imágenes con image.file

Solución:

La diferencia y la relación entre Image, ImageProvider:

Image:

Crea un widget que muestra una imagen.

Para mostrar una imagen de la red o un paquete de activos, considere usar [new Image.network] y [new Image.asset] respectivamente.

Entonces Image es un widget. Igual que <img> etiqueta en html.

ImageProvider:

Identifica una imagen sin comprometerse con el activo final preciso. Esto permite identificar un conjunto de imágenes y que la imagen precisa se resuelva posteriormente en función del entorno, por ejemplo, la relación de píxeles del dispositivo.

Entonces ImageProvider es como el src atributo para un Image.

Ahora Image toma una discusión image que es un ImageProvider. Hay 4 formas de obtener el ImageProvider

• AssetImage:

  Úselo para cargar un conjunto predefinido de imágenes que se empaquetan junto con el apk.

  por ejemplo, para mostrar imágenes de banner, algunos iconos personalizados.

• NetworkImage:

  Se utiliza para cargar imágenes dinámicas de Internet.

• FileImage:

  Se utiliza para cargar imágenes del sistema de archivos en el dispositivo de destino.

  por ejemplo, para mostrar una imagen recién descargada.

• MemoryImage:

  Se utiliza para cargar imágenes sin procesar desde la memoria.

  Por ejemplo, para obtener el fondo de pantalla del usuario y cargarlo en un widget.

Ahora son todos ImageProviders. Cualquiera de ellos puede utilizarse como image atribuir a la Image widget. Y la comunidad de flutter simplificó la sintaxis agregando clases extendidas al Image widget en sí.

Entonces

• Image.asset(name) Es esencial Image(image: AssetImage(name)),
• Image.file(path) Es esencial Image(image: FileImage(File(path))),
• Image.network(url) Es esencial Image(image: NetworkImage(url)),
• Image.memory(list) Es esencial Image(image: MemoryImage(list))

Ahora debería quedar claro que

• El tamaño de la apk aumenta con la cantidad de imágenes de activos.

• El tiempo de carga (lo que ve el usuario) para ellos estaría generalmente en el orden

  NetworkImage > FileImage > AssetImage > MemoryImage

A continuación se muestra un ejemplo del uso de Image.file. Esta no sería la forma recomendada, pero el caso de uso podría ser si descargó la imagen en su aplicación a través de http y luego quisiera mostrar la imagen (por ejemplo, la imagen no se almacena en los activos durante la instalación).

En su pubspec.yaml, agregue:

path_provider: ^0.2.2

Codigo:

import 'dart:io';
import 'dart:async';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {

  Future<File> _getLocalFile(String filename) async {
    String dir = (await getApplicationDocumentsDirectory()).path;
    File f = new File('$dir/$filename');
    return f;
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new FutureBuilder(
            future: _getLocalFile("flutter_assets/image.png"),
            builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
              return snapshot.data != null ? new Image.file(snapshot.data) : new Container();
            })
    );
  }
}

Para simular la descarga de la imagen, puede enviar la imagen usando adb:

adb push image.png /data/data/com.example.imagetest/app_flutter/flutter_assets/

Aquí hay otro ejemplo que usa un jpg como imagen de fondo. También aplica opacidad a la imagen.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        resizeToAvoidBottomPadding: false,
        appBar: new AppBar(
          title: new Text("test"),
        ),
        body: new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.dstATop),
              image: new AssetImage("assets/images/keyboard.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

---

---

Utiliza Nuestro Buscador