FLUTTER – Prima puntata

Installiamo l’ambiente di lavoro e familiarizziamo con gli strumenti di sviluppo

Con Flutter, anche Google, ha finalmente fatto capolino nel panorama dei Framework per lo sviluppo di applicazioni mobili cross-platform. Flutter con Dart si pone in modo diverso da React Native o altre tecnologie similari, perché oltre ad ottenere un linguaggio tutto suo, object oriented, molto simile a Java o Kotlin, non adotta nel suo modello di sviluppo nessun layer intermedio. A differenza di come fa Cordova con Angular, per citare un’altra realtà esistente oggi sul mercato, Flutter disegna i suoi componenti direttamente senza un layer di supporto.

Per chi voglia approfondire i concetti base di Flutter e di cosa stiamo trattando, e bene che faccia riferimento al sito di riferimento di Flutter e di chi lo sviluppa e lo mantiene  https://flutter.dev/

INSTALLAZIONE AMBIENTE DI SVILUPPO

Facciamo una premessa, l’installazione del framework flutter è attuabile indipendentemente su Android Studio, IntelliJ Idea nonché Visual Studio Code. Dopo aver fatto una breve panoramica di cosa è Flutter, passiamo qui a trattarne l’installazione.

Se volete è possibile considerare la lettura anche di questa pagina ufficiale https://flutter.dev/docs/get-started/install

Scarichiamo Flutter  https://docs.flutter.dev/get-started/install

Come noterete la pagina web ha letto su quale sistema operativo state operando e di conseguenza vi suggerisce di già la scelta più opportuna per il download del pacchetto appropriato da utilizzare.

Effettuata la volta scelta, la pagina di download, vi propone una scelta, a seconda che intendiate sviluppare applicazioni desktop, mobili o web. Ciò permette all’ambiente di configurarsi adeguatamente a seconda dell’utilizzo scelto. Ovviamente è possibile successivamente sviluppare per qualsiasi ambiente e destinazione d’uso che desiderate.

Se non siete sicuri di ciò che potreste sviluppare, la pagina vi raccomanda Android come ambiente di lavoro.

Come dicevamo in premessa, potete scegliere in questa fase quale IDE andare ad utilizzare tra:

• Visual Studio Code con l’estensione Flutter extension for VS Code
• Android Studio con Flutter plugin for IntelliJ
• IntelliJ IDEA con Flutter plugin for IntelliJ

La cosa importante è unicamente che per quell’ambiente si possa avere a disposizione l’estensione o il plugin necessario per utilizzare la piattaforma FLUTTER con Dart.

Qui è presente l’archivio contenente le ultime versioni di Flutter SDK rilascite

https://docs.flutter.dev/release/archive

Dopo aver letto attentamente la pagina, che indica quali tools e utility è necessario che abbiate installato come prerequisito di funzionamento e gli accorgimenti utili al corretto funzionamento dei vostri strumenti di sviluppo (PATH e quant’altro),  siete adesso pronti all’uso del Framework.

Io per scelta personale utilizzerò Visual Studio Code con le estensioni per Flutter e Dart.

Se anche voi siete daccordo, dopo aver installato VS Code – se non già presente nel sistema – avviatelo (comunque se dovete ancora installarlo è disponibile per il download a questo indirizzo: https://code.visualstudio.com/) e tramite il menu File -> Preferences > Extensions si procede a installare Flutter, presente tra tutti i plugin proposti dall’ambiente di VS.

Dopo aver provveduto al necessario, per verificare che tutto sia settato correttamente, apriamo una shell e digitiamo flutter doctor

Sarà generato un report a video dove ci sarà indicato se mancano o meno dei componenti fondamentali per Flutter, come ad esempio Android toolchain.

Nel qual caso provvedete ad installare le parti mancanti o accettare le licenze necessarie al funzionamento di Android Toolchain e poi verificate nuovamente con lo stesso comando doctor che sia tutto a posto.

Questo deve essere un risultato corretto affinchè tutto funzioni a dovere

Per ulteriori approfondimenti vi rimando a vari tutorial o guide ufficiali di riferimento di Flutter e se proprio non ne venite a capo, scrivetemi pure nei commenti e sarò lieto di aiutarvi nei vari passaggi.

CREAZIONE ED ESECUZIONE PRIMO PROGETTO IN FLUTTER

Creiamo il nostro primo progetto di prova con flutter create buongiorno

Occhio a non usare iniziali maiuscole, perché da come si può osservare flutter non ama le maiuscole nei nomi dei progetti, ci notifica infatti che il nome scelto non è valido per un pacchetto Dart

Esaminando la directory “buongiorno” vediamo che Flutter ha creato tutti i file necessari al funzionamento del progetto.

Da notare che esiste anche una directory all’interno del progetto denominata “ios”.

Al suo interno sono stati generati  i file necessari al funzionamento del progetto in ios ma per sviluppare per Apple è necessario avere un Mac, perché l’ambiente Xcode è disponibile solo per IOS, a differenza di Android Studio che è multipiattaforma. Quindi qualora vogliate sviluppare con XCode sarà necessario dotarsi di un Mac, scaricare Xcode e le librerie CocoaPods.

Per eseguire le applicazioni è necessario avere dei dispositivi su cui è possibile far girare le App, sia che essi siano fisici o virtuali.

Avrete notato che “flutter doctor” ci avvisa delle presenza di dispositivi riconosciuti (Connected Devices)  e nel caso non ci fosse nessun dispositivo collegato si può sempre crearne di Virtuali (AVD) con Android Studio.

Supponiamo ci siano nella nostra piattaforma dei dispositivi collegati, eseguiamo il progetto appena creato con flutter run.

e notiamo che all’esecuzione ci viene chiesto dove eseguire la nostra App. Scegliamo [1] Windows e la nostra App sarà elaborata per l’esecuzione sull’ ambiente di sistema. Si aprirà una finestra con il titolo della nostra App, che non fa che visualizzare che si tratta di una Demo ed al click sul pulsante “+” ci notifica il numero di volte che abbiamo cliccato il bottone.

Come è possibile osservare, flutter ci informa, sulla shell, il tempo necessario ad elaborare l’App. All’uscita dall’App ci sarà invece notificata la disconnessione dal device su cui girava.

Durante l’esecuzione dell’App si ha la possibilità, tramite l’indirizzo locale http://127.0.0.1:9100?uri=http://127.0.0.1:50229/R7c0nhw4uc8=/ di interagire con l’App

E’ questo è il menu con il quale ispezionare o fare il Debug dell’Applicazione

Tramite il comando flutter emulators è possibile elencare i dispositivi disponibili su cui far girare la nostra App.

La stessa cosa è possibile effettuare con il comando emulator -list-avds presente nell’SDK Tools di Android

Scegliamo un dispositivo ed eseguiamo. Io ho scelto un Google Pixel 5 presente tra i miei devices: flutter emulators –launch Pixel_5_API_30

Ed ecco la nostra app buongiorno eseguita nel dispositivo selezionato.

E’ la magia di Flutter !

Qualora vogliate farlo per un IPhone, lo stesso è possibile fare con IOS su MAC con il comando

$ open -a Simulator

oppure $ flutter emulators –launch apple_ios_simulator

$ flutter run

Ci saranno notificati i dispositivi disponibili e scegliendo un Iphone, l’applicazione girerà alla stessa maniera di come funzionava in Android

Abbiamo esaminato l’ambiente e creato un’applicazione di prova. Nella prossima puntata analizzeremo più da vicino il linguaggio Dart e come opera nell’ambiente Flutter.