Como Agregar Imagenes en Flutter

En el siguiente tutorial vamos a explicar como agregar imagenes en una aplicacion desarrollada en Flutter.

Este articulo es parte de la Guia Maestra para crear aplicaciones en Flutter →

Para agregar imagenes en Flutter debemos crear una carpeta para agregar las imagenes en la carpeta de nuestro proyecto en flutter.

Lo mas comun seria crear la carpeta “assets/images” y dentro de la carpeta “images” vamos a guardar nuestras imagenes.

Modificar el archivo pubspec.yaml

El archivo pubspec.yaml contiene las rutas , permisos y mas configuraciones que va a tener nuestra aplicacion.

Dentro de uno de los parametros debemos agregar la carpeta assets donde vamos a tener nuestras imagenes.

En el siguiente texto de codigo YAML les muestro como debe quedar la configuracion para que Flutter acepte nuestras imagenes.

flutter:
  uses-material-design: true
  assets:
    - assets/images/

Aqui definimos la carpeta donde vamos a poner nuestras imagenes para despues usarlas en el codigo.

Agregar una imagen en Flutter

Ahora que ya tenemos imagenes en la carpeta “assets/images” vamos a usar o llamar las imagenes en nuestro codigo.

El siguiente codigo es la funcion o Widget para agregar imagenes.

Image.asset("assets/images/gorilla.jpg")

Para agregar la imagen debemos agregar toda la ruta donde se encuentra la imagen.

Codigo

Aqui les dejo el codigo completo del ejemplo que hice para este tutorial.

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home:HelloImage(),
    );
  }
}

class HelloImage extends StatelessWidget{
  const HelloImage({super.key});
  
  @override
  Widget build(BuildContext context) {
    return Column (
      children: [
        const Text("Hola"),
        Image.asset("assets/images/gorilla.jpg")
      ],
    );

  }
}

Flutter nos ofrece cuatro constructores principales para manejar imágenes de forma sencilla:

1. Image.network: Para cargar imágenes desde una URL de internet. Ideal para mostrar avatares de usuarios o productos de una base de datos MySQL.
2. Image.asset: Para cargar imágenes almacenadas localmente en los archivos de tu proyecto (debes registrarlas en el archivo pubspec.yaml).
3. Image.file: Para cargar imágenes directamente desde el almacenamiento del dispositivo (como una foto recién tomada con la cámara).
4. Image.memory: Para mostrar imágenes a partir de una lista de bytes (útil cuando recibes datos binarios de una API).

Resultado

El resultado es el siguiente.