Cargar imágenes en Flutter JPG, GIF o SVG

Hola, 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:

1. 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

2. Registrar los assets en el archivo pubspec.yaml: Abre el archivo pubspec.yaml y agrega la siguiente línea dentro de la sección flutter:

   yaml

   flutter:
     assets:
       - assets/image.jpg
       - assets/animation.gif

3. 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:

1. Agregar el paquete flutter_svg a tu proyecto: Abre el archivo pubspec.yaml y agrega la dependencia:

   yaml

   dependencies:
     flutter:
       sdk: flutter
     flutter_svg: ^latest_version  # Reemplaza por la última versión

2. Registrar el asset SVG: Coloca tu archivo SVG en la carpeta assets y regístralo en pubspec.yaml de la siguiente manera:

   yaml

   flutter:
     assets:
       - assets/image.svg

3. 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 widget SvgPicture.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 8097 veces | 0 usuarios