12 abril, 2025
Cargar imágenes en Flutter JPG, GIF o SVG
Cargar imágenes en Flutter es un proceso sencillo que permite mostrar varios formatos, incluyendo JPG, GIF y SVG. Aquí te muestro cómo hacerlo para cada uno de estos formatos.

Suscríbete a nuestro canal en Youtube
SuscríbirseHola, bien sabes que una aplicación con imágenes es mucho más vistosa, entendiendo esto de una forma sencilla y claro que depende del tipo de imagen. Dado que es un elemento visual muy importante en cualquier aplicación móvil, o digamos en general con pocas excepciones te enseñaré todos los matices de como poner una imagen en los formatos más usados dentro de una aplicación Flutter. Entonces te invito a seguir el tutorial para que tengas una guía sencilla de leer y/o aplicarla en tus proyectos de emprendimiento o servicios profesionales.
Cargar imágenes JPG y GIF
Para cargar imágenes JPG y GIF, sigue estos pasos:
-
Agregar la imagen a tu proyecto:
- Crea una carpeta llamada
assets
en el directorio raíz de tu proyecto. - Coloca tus imágenes JPG y GIF en esta carpeta. Por ejemplo:
bash
/assets/image.jpg /assets/animation.gif
- Crea una carpeta llamada
-
Registrar los assets en el archivo
pubspec.yaml
: Abre el archivopubspec.yaml
y agrega la siguiente línea dentro de la secciónflutter
:yaml
flutter: assets: - assets/image.jpg - assets/animation.gif
-
Cargar la imagen en tu widget: Utiliza el widget
Image
para cargar la imagen JPG o GIF.dart
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('Cargar Imágenes')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Image.asset('assets/image.jpg'), // Cargar JPG SizedBox(height: 20), Image.asset('assets/animation.gif'), // Cargar GIF ], ), ), ), ); } }
Cargar imágenes SVG
Para cargar imágenes SVG, necesitas usar un paquete adicional llamado flutter_svg
. A continuación se muestra cómo hacerlo:
-
Agregar el paquete
flutter_svg
a tu proyecto: Abre el archivopubspec.yaml
y agrega la dependencia:yaml
dependencies: flutter: sdk: flutter flutter_svg: ^latest_version # Reemplaza por la última versión
-
Registrar el asset SVG: Coloca tu archivo SVG en la carpeta
assets
y regístralo enpubspec.yaml
de la siguiente manera:yaml
flutter: assets: - assets/image.svg
-
Cargar la imagen SVG en tu widget: Utiliza el widget
SvgPicture
para cargar la imagen SVG.dart
import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Cargar Imágenes SVG')), body: Center( child: SvgPicture.asset( 'assets/image.svg', // Cargar SVG width: 100.0, // Ancho de la imagen height: 100.0, // Alto de la imagen ), ), ), ); } }
Resumen
- Para JPG y GIF, utiliza el widget
Image.asset()
. - Para SVG, usa el paquete
flutter_svg
y el widgetSvgPicture.asset()
.
Ejemplo Completo
Aquí tienes un ejemplo que carga imágenes JPG, GIF y SVG en una sola aplicación:
dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Cargar Imágenes')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/image.jpg'), // Cargar JPG
SizedBox(height: 20),
Image.asset('assets/animation.gif'), // Cargar GIF
SizedBox(height: 20),
SvgPicture.asset(
'assets/image.svg', // Cargar SVG
width: 100.0,
height: 100.0,
),
],
),
),
),
);
}
}
Recuerda que debes tener los archivos de imagen en la ubicación correcta y haber actualizado las dependencias correctamente en el archivo pubspec.yaml
.
Leido 7412 veces | 0 usuarios
Descarga del código fuente Flutter de Cargar imágenes en Flutter JPG, GIF o SVG
Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.
Opciones de descarga
- Usuarios Registrados: Inicia sesión para descarga inmediata.
- Nuevos Usuarios: Regístrate y descarga.