Configuración de Imágenes en Flutter: Uso de Carpeta Assets

Flutter te permite personalizar tu aplicación incluyendo imágenes de manera sencilla, ya sea desde tu proyecto o mediante URLs externas. Aquí te mostramos cómo configurar y optimizar tu recetario con imágenes.

¿Cómo configurar la carpeta de imágenes en Flutter?

• Accede al archivo pubspec.yaml de tu proyecto.
• Desplázate hacia el final del archivo hasta la sección de assets.
• Comenta las indicaciones predeterminadas y agrega una nueva ruta:

  assets:
    - assets/imagenes/
  

• Crea una carpeta llamada assets en la raíz de tu proyecto y, dentro de ella, otra llamada imagenes.
• Guarda tus imágenes dentro de esta carpeta. Ahora puedes acceder a estas imágenes desde cualquier widget de tu proyecto.

¿Cómo agregar imágenes al recetario?

• Modifica el widget Container de tu recetario.
• Cambia la propiedad child para incluir un widget Image.
• Si usas imágenes desde URLs, utiliza Image.network. Por ejemplo:

  child: Image.network(
    'https://link-a-tu-imagen.com/lasagna.jpg',
    fit: BoxFit.cover,
  ),
  

• Guarda el archivo y verifica que las imágenes se visualicen correctamente.

¿Cómo ajustar las imágenes al contenedor?

• Usa la propiedad fit con el widget BoxFit para definir cómo la imagen se adapta al contenedor.
  • Ejemplo: BoxFit.cover hará que la imagen rellene completamente el contenedor ajustándose con un ligero zoom.
• Otras opciones útiles incluyen:
  • BoxFit.contain para mantener las proporciones sin recortar.
  • BoxFit.fill para estirar la imagen y cubrir el espacio.

¿Cómo organizar y limpiar tu código?

• Selecciona todo el código y dirígete a la opción View en el editor.
• Activa la opción Word Wrap o utiliza el atajo Alt + Z para ajustar el texto dentro de la pantalla.
• Esto mejora la legibilidad y facilita futuras modificaciones.