Añadir imágenes a proyecto Flutter

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos añadir imágenes dentro de un proyecto Flutter.

Supongamos que tenemos creada nuestro proyecto Flutter:

1. Creación de la Estructura de Carpetas:

Primero, asegúrate de tener la estructura de carpetas con la carpeta assets. Si aún no la tienes, crea una carpeta llamada assets en la raíz de tu proyecto.

proyecto_flutter/
├── android/
├── assets/
│   ├── images/
├── ios/
├── lib/
├── test/
├── .gitignore
├── pubspec.yaml
└── ...

2. Añadir Imágenes:

Coloca las imágenes que desees en la carpeta assets/images/. Puedes organizarlas en subcarpetas si lo prefieres.

3. Modificar pubspec.yaml:

Abre el archivo pubspec.yaml y añade la configuración para las imágenes en la sección flutter. Asegúrate de respetar la indentación y la sintaxis YAML.

flutter:
  assets:
    - assets/images/

4. Ejecutar flutter pub get:

Guarda los cambios en pubspec.yaml y ejecuta el siguiente comando en la terminal para que Flutter cargue las nuevas configuraciones:

flutter pub get

5. Usar las Imágenes en tu Código:

Puedes utilizar las imágenes en tu código Flutter. Por ejemplo, si tienes una imagen llamada imagen1.png, puedes usarla así:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Image Tutorial'),
        ),
        body: Center(
          child: Image.asset('assets/images/imagen1.png'),
        ),
      ),
    );
  }
}

Ajusta la ruta de la imagen según la estructura de tus carpetas.

6. Ejecutar la Aplicación:

Guarda tus cambios y ejecuta tu aplicación Flutter:

flutter run

Ahora deberías ver la imagen en tu aplicación.