Per crear un nou projecte en Flutter, obrirem el programa Visual Studio Code i veurem un espai de cerca (Search) a la part superior. Allà començarem a escriure >flutter i aviat ens sortirà un menú d'opcions on triarem Flutter New Project.
Ens sortiran diferents opcions, algunes de les quals ens donen ja part de la feina feta. Atès que volem veure tot el procés, triarem l'opció Empty Application.
Ens demanarà a quina carpeta el volem guardar, el més raonable és guardar-lo a la carpeta development que ja havíem creat a l'instal·lar el programa. A la part superior de la finestra, ens demanarà que li donem un nom al projecte. Ens obrirà l'entorn amb un petit programa creat, que podem veure anant al menú lateral, obrint la carpeta lib i fent doble clic sobre main.dart.
En el menú, a més de la carpeta lib, tenim altres carpetes. Les que tenen un nom que comença amb un punt són carpetes internes que normalment no tocarem. Les altres, contenen els elements necessaris per poder generar una aplicació per als diferents tipus de sistemes possibles (Android, iOS, web, etc.).
La mida de lletra per defecte està bé per tenir una visió de conjunt però no és còmoda per poder analitzar el programa. En el menú superior, podem anar a File i triar l'opció Preferences i seleccionar Settings; on podem cercar Editor: Font Size (si cal, podem fer servir el cercador). En el requadre que apareix hi podem posar 16 o 18, segons ens agradi. A la part superior tindrem dues pestanyes, una amb el nom del nostre programa i l'altra que correspon a Settings; que ja podem tancar, per poder veure el programa.
El fitxer pubspec.yaml és el que indica el nom i la versió del nostre projecte i les diferents versions dels programes que intervenen en la programació. Encara que no és obligatori, és recomanable posar-li un nom. Cal vigilar perquè en aquest fitxer el sagnat sí és important.
A l'esquerra de la finestra tenim els botons principals, el primer és per veure els fitxers del projecte i el segon per cercar. Al costat tenim l'arbre de fitxers i a la dreta hi ha la finestra amb el programa. És possible que ens hagi aparegut una columna més a la dreta, però no ens fa falta i la podem tancar.
Mentre escrivim el programa, Visual Studio Code ens ajuda a anar més ràpid. Quan comencem a escriure el nom d'una variable o funció, ens mostra els noms de funcions o variables ja existents que comencin amb els caràcters escrits; per tal que poguem agafar-los sense haver-los d'escriure completament.
En el cas de les funcions, quan les agafem ens indica quins són els seus paràmetres i, si és el cas, el tipus de sortida; per facilitar el procés. Quan es tracta de variables, ens indica el tipus.
Un cop acabada una línia, comprova si hi ha errors o advertències. Els errors es subratllen en vermell i les advertències en taronja. En ambdós casos, posant el cursor sobre la part subratllada ens apareixerà el motiu de l'avís i, si és el cas, alguna proposta de solució. En molts casos veurem un text Quick Fix... que, si li fem clic, ens permet resoldre el problema de manera automàtica.
A l'escriure un programa és fàcil cometre alguns errors en el sagnat de les línies. Això no afectarà al funcionament del programa (en Flutter el sagnat no té significat) però dificulta la comprensió. El sistema pot corregir automàticament el sagnat; només cal picar amb el botó dret en la finestra on hi ha el programa i triar l'opció Format Document.
Quan estem en el programa main.dart, a la part inferior dreta de la pantalla hi tenim una indicació de quin és l'emulador seleccionat. En el cas de la figura següent, no n'hi ha cap; com es veu en el lloc on apunta la fletxa taronja.
Picant sobre el lloc on apunta la fletxa taronja podrem triar quin emulador farem servir. És molt probable que no hi hagi cap emulador d'Android, però sortirà l'opció de crear-ne un de nou (Create Android emulator). Si triem aquesta opció, passats uns segons, se'ns obrirà l'emulador creat. Picant sobre el botó d'executar (marcat amb una fletxa verda amb la image que hi ha més amunt), passat un temps, veurem una imatge del resultat de l'aplicació.
En aquest cas, és una aplicació molt senzilla que només escriu un text al centre de la pantalla. Al matgeix temps, a la pestanya Debug Console de la part inferior de la pantalla de Visual Studio Code ens surten informacions sobre la compilació; que ens seran útils en cas que hi hagi algun problema.
Si modifiquem el programa, per exemple modificant el text entre cometes, l'emulador no canviarà fins que guardem el programa (que podem fer amb Ctrl-S). Podem modificar la configuració per tal que el programa es guardi automàticament cada cop que es faci una modificació, així podrem veure els canvis de manera immediata. En el menú superior, podem anar a File i triar l'opció Preferences i seleccionar Settings; on podem cercar Flutter Hot Reload On Save (si cal, podem fer servir el cercador; posant Hot Reload) i triar l'opció allIfDirty.
El botó del llamp groc permet guardar el programa i actualitzar l'aplicació; a més, entre altres, tenim botons per pausar, aturar o recarregar l'aplicació. Aquest darrer ens serà útil si ens sembla que l'emulador s'ha quedat penjat.
Important: Si fa temps que no hem fet servir l'emulador que tenim creat, pot passar que hagi quedat obsolet. Si cal, en podem crear un de nou triant l'opció Create Android emulator; ja que no hi ha problema en tenir més d'un emulador del mateix tipus.
Quan provem el programa a l'emulador, pot ser que ens surti un missatge a la consola que indiqui que la nostra versió de NDK no és adequada. En el missatge ens dirà quina és la versió que ens convé. Caldrà modificar el fitxer build.gradle.kts (que es troba a la carpeta app dins de la carpeta android), posant o editant la línia dins de l'element android:
android {
ndkVersion = "27.0.12077973"
amb la versió que ens hagi recomanat.
Quan ja no hem de treballar en un projecte, convindrà tancar-lo. Per fer-ho, anirem a l'opció File del menú superior i seleccionarem Close Folder.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.