Oggi voglio presentarvi Flutter, un framework open-source creato da Google, che si appoggia sul linguaggio di programmazione Dart, per la creazione di interfacce native per iOS e Android.
Cos’è un framework?
Un framework è un'architettura logica di supporto su cui un software può essere progettato e realizzato, facilitando lo sviluppo di applicazioni da parte del programmatore.
Perché Flutter?
Flutter è solamente compatibile con iOS e Android, tuttavia è utilizzato da grandi aziende come Sonus, BMW e molte altre, ciò significa che è competitivo e richiesto dal mondo del lavoro. Per l’installazione del framework ci sono tutte le istruzioni precise (da seguire puntigliosamente) sul sito ufficiale www.flutter.dev, ma in ogni caso sono disponibile ad aiutare ognuno di voi in caso di problemi.
Ambiente di sviluppo
Come ambito di sviluppo possiamo utilizzare qualsiasi editor di testo come Atom, Visual Studio Code, Sublime Text e Notepad++, ma dato che per testare l’applicazione necessitiamo di un emulatore di device mobili io consiglio calorosamente di utilizzare Android Studio, in modo da avere tutte le funzionalità e le comodità di un IDE. Per chi utilizzasse l’editor IntelliJ IDEA di JetBrains, presentato nell’articolo precedente, vi annuncio che Flutter è compatibile anche con esso, ma avrete comunque bisogno di installare un emulatore di dispositivi mobili.
Primo progetto
Detto questo cominciamo: sul sito ufficiale di Flutter è presente una lunghissima documentazione su come utilizzarlo, una documentazione più che esaustiva, ma dato che è comunque in lingua inglese e in parte complessa voglio darvi una prima indicazione su come utilizzarlo, creando un tipico progetto “Hello World”.
Cominciamo da una parte di Hello World offerto gentilmente dal sito ufficiale.
body: Center(
child: Text('Hello World'),
),Voglio soffermarmi sul “child” e il suo funzionamento. Una particolarità del coding in Dart sono i widget, oggetti che permettono un’implementazione più semplice delle interfacce e mettendo a disposizione primitive utili allo sviluppo della grafica, di elementi interattivi e della struttura dell’interfaccia. In questo caso il widget è “Center(),”, ogni widget può avere uno o più figli, per i widget con un figlio unico noi utilizzeremo il comando “child:”, per un widget con più figli utilizzeremo il comando “children:[]”.
Proviamo a sostituire
child: Text('Hello World'),
con il box qua sotto, analizzandolo insieme:
body: Center(
child: ListView(
children: [
Row(
children:[
Text('Hello World’),
],
),
],
),
),
ListView in questo caso è figlio unico di Center(), ListView è un widget dedicato alla rappresentazione di una lista di elementi, quindi già da subito possiamo presupporre che ListView possa avere più figli, e quindi dovremo utilizzare il comando Children:[].
A cosa serve il widget Row()? Row significa riga (quindi per prima cosa si presuppone che ci sia anche il widget Column(), infatti grazie a questi due widget possiamo realizzare una tabella per la disposizione dei dati), e permette di porre su una riga sola gli elementi (ovviamente sia Row che Column possono avere più figli e quindi useremo Children:[]). Child e children sono obbligatori quando in un widget vogliamo mettere anche solo un semplice testo, e quindi un widget di tipo testo come Text(‘Hello World!’).
Spero che dopo questa breve spiegazione abbiate iniziato a capire il funzionamento dei widget e dei loro comandi, in particolare child e children, vi invito, nel caso questa semplice spiegazione vi abbia interessati a provare questa piattaforma, a consultare il sito ufficiale di Flutter.
Niccolò Berguglia