Les imatges poden ser locals (carregades a l'aplicació) o fer servir l'adreça URL d'una imatge que es troba a internet. Per fer servir una imatge d'internet, fem servir Image.network.
...
Image.network("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/ETSEIB.JPG/1280px-ETSEIB.JPG")
...
Si volem treballar amb imatges locals, caldrà preparar un lloc on guardar-les. La forma més recomanable és crear una carpeta anomenada assets en l'arrel del projecte i una carpeta images dins d'assets. Per crear la primera carpeta, posarem el cursor en la zona buida que hi ha sota de README.md, picarem amb el botó dret i triarem New Folder...; per crear la segona només cal que ens posem sobre la primera i piquem el botó de nova carpeta que hi ha a la part superior del menú lateral.

Ara farem servir la imatge passadis.jpg, que haurem de descarregar al nostre ordinador. Un cop la tinguem a una carpeta de l'ordinador, l'haurem d'arrossegar sobre la carpeta images que acabem de crear; així la tindrem disponible en el nostre projecte. El mateix faríem amb la resta d'imatges que ens facin falta.
També cal indicar a quina carpeta trobarà les imatges. Això ho farem editant el fitxer pubspec.yaml, afegint-li dues línies a la part de Flutter.

En aquest fitxer és molt important la sintaxi. Fixem-nos que assets està alineat amb uses. A l'inici de la línia següent hi ha un sagnat, un guió i un espai, després ja ve la ruta.
Important: A vegades l'emulador no reacciona correctament després de modificar el fitxer pubspec.yaml. Després
de fer-ho, és recomanable reiniciar l'emulador. ![]()
Per posar aquesta imatge, farem servir Image.asset i li haurem de posar la ruta completa (malgrat ja haguem indicat la ruta al fitxer pubspec.yaml. Opcionalment, també podem indicar una amplada (width) o una alçada (height).
...
Image.asset("assets/images/passadis.jpg", width: 250, fit: BoxFit.scaleDown,),
...
El paràmetre fit, que també és opcional, serveix per indicar com volem que aprofiti l'espai disponible. Les principals opcions disponibles són:
| Opció | Resultat |
| fill | Omple l'espai disponible, malgrat es distorsioni la imatge. |
| contain | Fa la imatge tan gran com es pugui, mantenint les proporcions i sense sortir de l'espai disponible. |
| cover | Posa la imatge ocupant tot l'espai disponible i mantenint les proporcions; si cal, es retalla la imatge. |
| fitWidth | Posa la imatge ocupant tota l'amplada disponible i mantenint les proporcions; si cal, es retalla la imatge. |
| fitHeight | Posa la imatge ocupant tota l'alçada disponible i mantenint les proporcions; si cal, es retalla la imatge. |
| none | Manté les mides originals de la imatge; si cal, es retalla la imatge. |
| scaleDown | Si la imatge cap a l'espai disponible, fa el mateix que none; en cas contrari, fa el mateix que contain. |
Un altre dels paràmetres de les imatges permet definir quina alineació tenen. Les opcions disponibles són:
| Alignment.topLeft | Alignment.topCenter | Alignment.topRight |
| Alignment.centerLeft | Alignment.center | Alignment.centerRight |
| Alignment.bottomLeft | Alignment.bottomCenter | Alignment.bottomRight |
...
Image.asset("assets/images/passadis.jpg", width: 250, fit: BoxFit.scaleDown, alignment: Alignment.bottomCenter),
...
També es pot indicar la posició de la imatge amb unes coordenades x i y que van entre -1 (esquerra o dalt) i 1 (dreta o baix)
...
Image.asset("assets/images/passadis.jpg", width: 250, fit: BoxFit.scaleDown, alignment: Alignment(0, -0.5)),
...

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.