), que es troba a la part
superior dreta de la finestra, passat un temps, veurem una imatge del resultat de l'aplicació. Cal tenir present que aquest
botó només està disponible quan estem visualizant la pestanya main.dart.Si no l'havíem creat prèviament, crearem una carpeta al disc dur del nostre ordinador (millor si és a l'arrel) i li posarem un nom; per exemple development, aquí serà on guardarem tots els nostres projectes d'aplicacions.
Començarem creant 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 preguntarà la carpeta on guardarem el projecte, li indicarem la carpeta que havíem creat abans (development). Llavors ens demanarà el nom que volem posar al projecte; el podem anomenar, per exemple, selector_color.
Un cop fet això, ja tindrem definit 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.
A partir d'aquest punt, cada cop que haguem completat una modificació del programa podrem provar-lo amb l'emulador; així anem veient com ens acostem a la solució final i per què anem fent els diferents canvis.
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. El més probable és que no n'hi hagi cap (No Device) o que hi hagi el de Windows; És possible, en cas que ja ho haguéssim fet abans, que ens surti un emulador d'Android.
Si no en tenim un d'Android, picant sobre el lloc on hi ha l'emulador seleccionat podrem triar quin farem servir. Si a la llista no hi ha cap emulador d'Android, haurem de picar l'opció de crear-ne un de nou. Si triem aquesta opció, passats uns segons, se'ns obrirà l'emulador creat. Si ja estava creat, només cal seleccionar-lo.
Picant sobre el botó d'executar (), que es troba a la part
superior dreta de la finestra, passat un temps, veurem una imatge del resultat de l'aplicació. Cal tenir present que aquest
botó només està disponible quan estem visualizant la pestanya main.dart.
De moment, el resultat de l'aplicació no s'assembla de res al que volem aconseguir, però ja funciona. En aquest cas, 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 tenim aquesta barra d'eines, 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.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.