Insertar imágenes en Flutter

Author
By Darío Rivera
Posted on 2021-03-04 in Flutter

Las imágenes son uno de los elementos multimedia más usados en las aplicación para móviles. En Flutter tenemos básicamente dos formas de agregar imágenes, mediante la red o agregándolas desde assets de la aplicación.

Imágenes como assets

Para agregar una imagen como asset primero debes crear una carpeta dentro de tu proyecto Flutter llamada assets. Lo siguiente que debes hacer es modificar el archivo pubspec.yml y descomentar la sección de assets de tal forma que quede como sigue para que puedas agregar cualquier archivo desde esta carpeta.

flutter:
...

  assets:
   - assets/

Después de esto debes asegurarte de actualizar las dependencias. Por lo general tu editor te mostrará un mensaje para dicha actividad. una vez hecho esto puedes utilizar el widget AssetImage para insertar dicha imagen en tu aplicación.

AssetImage('assets/google.png')

Imágenes desde una URL

Insertar una imagen desde una URL es mucho más sencillo que agregarla desde un asset. Basta utilizar el widget NetworkImage y pasar como parámetro la URL de la imagen así:

NetworkImage('https://domain.com/photo-161283202.jpg')

Con cualquiera de los dos métodos podrías obtener un resultado similar al siguiente:

icon widget

Row(
  children: [
    Expanded(
      child: Image(
        image: NetworkImage('https://avatars.githubusercontent.com/u/109951?s=400&v=4'),
        height: 140,
      ),
    ),
  ],
),

Imagen estilo avatar

Una de las ventajas de Flutter es que tiene widgets para un sin número de necesidades lo cual acelera el desarrollo. Existe un widget llamado CircleAvatar el cual te permite dar estilo a una imagen como si fuera un avatar y lograr un resultado como el siguiente.

icon widget

Puedes replicar este ejemplo con el siguiente fragmento de código utilizando una imagen apropiada:

Row(
  children: [
    Padding(
      padding: EdgeInsets.all(20),
      child: CircleAvatar(
        backgroundImage: NetworkImage('https://domain.net/saintseiya/images/some.jpg'),
        radius: 70,
      ),
    )
  ],
)

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.