Insertar imágenes en 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:
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.
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,
),
)
],
)