Aplicacions amb Flutter, Dart i Flame

Tutorial Flutter Flame Projectes   Recursos CITCEA
Exemples Dart Dades pràctiques     Inici

Imatge

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.

New Folder             Images

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.

pubspec.yaml

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

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)),
...

 

 

 

 

 

 

 

 

 

 

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