Como Agregar Imagenes en Flutter

En el siguiente tutorial vamos a explicar como agregar imagenes en una aplicacion desarrollada 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")
      ],
    );

  }
}

Resultado

El resultado es el siguiente.