Gli svi­lup­pa­to­ri di software sanno bene che ormai da tempo non è più suf­fi­cien­te svi­lup­pa­re un programma solo per Windows. Oggi infatti per essere efficace lo stesso programma deve poter fun­zio­na­re su smart­pho­ne Android, iOS e, ideal­men­te, anche su browser.

A questo scopo, in passato, il codice di pro­gram­ma­zio­ne doveva essere ria­dat­ta­to e ri­com­pi­la­to per ogni piat­ta­for­ma. In molti casi bisognava in­ter­ve­ni­re anche in misura im­por­tan­te per tenere conto, nella propria app, delle par­ti­co­la­ri­tà del ri­spet­ti­vo sistema operativo, nonché dell’estetica e della fun­zio­na­li­tà delle in­ter­fac­ce utente a cui i clienti erano abituati. Flutter è su­ben­tra­to a sem­pli­fi­ca­re lo sviluppo mul­ti­piat­ta­for­ma poiché richiede un unico codebase per tutte le piat­ta­for­me.

Cos’è Flutter?

Flutter è un framework per lo sviluppo di app per diverse piat­ta­for­me, ideato da Google e pub­bli­ca­to per la prima volta alla fine del 2018 come progetto open source. Flutter offre una vasta serie di librerie di elementi di in­ter­fac­cia utente (UI) standard, di Android e iOS, ma è adatto anche per lo sviluppo di ap­pli­ca­zio­ni web o desktop tra­di­zio­na­li.

Le ap­pli­ca­zio­ni svi­lup­pa­te con Flutter hanno l’aspetto delle app tipiche del sistema a cui sono destinate, com­por­tan­do­si come queste ultime, senza che il pro­gram­ma­to­re debba prestare at­ten­zio­ne alle pe­cu­lia­ri­tà del sistema stesso.

Per che cosa viene uti­liz­za­to Flutter?

Flutter viene uti­liz­za­to in primo luogo per svi­lup­pa­re app per Android e iOS, senza che sia ne­ces­sa­rio scrivere un codebase dif­fe­ren­te per ciascuna di queste piat­ta­for­me. Le versioni per smart­pho­ne delle app fun­zio­na­no come vere e proprie app native su questi di­spo­si­ti­vi e vengono compilate per la ri­spet­ti­va piat­ta­for­ma prima della pub­bli­ca­zio­ne, pertanto non ne­ces­si­ta­no né di un modulo runtime, né di un browser. Uti­liz­zan­do lo stesso codebase è possibile creare anche web app per browser nonché programmi nativi per Windows, Linux e macOS.

Google stesso utilizza Flutter, tra le altre cose, anche per diversi moduli dell’As­si­sten­te Google e per l’in­ter­fac­cia utente dell’hub Google Home. Anche noti fornitori di servizi e-commerce come eBay, Groupon o Alibaba Group uti­liz­za­no Flutter per conferire alle proprie app, web e mobili, un aspetto uniforme.

Su quale lin­guag­gio di pro­gram­ma­zio­ne si basa Flutter?

L’SDK di Flutter si basa sul lin­guag­gio di pro­gram­ma­zio­ne Dart, anch’esso svi­lup­pa­to da Google, destinato a sop­pian­ta­re il classico Ja­va­Script e che, come il noto lin­guag­gio di scripting, funziona come web app di­ret­ta­men­te sul browser. Su un server, i programmi Dart possono essere eseguiti di­ret­ta­men­te, mentre sul browser vengono con­ver­ti­ti in Ja­va­Script mediante il trans­com­pi­ler Dart2js.

Le app per la nuova piat­ta­for­ma di Google, Fuchsia, vengono svi­lup­pa­te di­ret­ta­men­te con Dart, la cui struttura è simile a quella di noti linguaggi di pro­gram­ma­zio­ne orientati agli oggetti come Java o C#.

Consiglio

Una spie­ga­zio­ne det­ta­glia­ta della pro­gram­ma­zio­ne con Dart, il lin­guag­gio di Google, è di­spo­ni­bi­le nel nostro tutorial sulla pro­gram­ma­zio­ne con Dart.

Tutto è un widget: il principio di Flutter

La strategia di Flutter “tutto è un widget” applica la pro­gram­ma­zio­ne orientata agli oggetti a tutto, in­clu­den­do l’in­ter­fac­cia utente: l’in­ter­fac­cia di un programma è così composta da vari widget, che possono essere ni­di­fi­ca­ti gli uni negli altri. Ogni pulsante e testo vi­sua­liz­za­to è un widget con­te­nen­te diverse ca­rat­te­ri­sti­che che possono essere mo­di­fi­ca­te. I widget possono in­fluen­zar­si a vicenda e reagire, tramite funzioni integrate, a cam­bia­men­ti di stato dall’esterno.

Per tutti gli elementi prin­ci­pa­li dell’in­ter­fac­cia utente vengono forniti in dotazione i ri­spet­ti­vi widget che sod­di­sfa­no i requisiti di pro­get­ta­zio­ne di Android e iOS e/o delle più comuni ap­pli­ca­zio­ni web. Se ne­ces­sa­rio, i widget possono essere ampliati con funzioni ag­giun­ti­ve. Al­tri­men­ti, è possibile creare widget per­so­na­liz­za­ti che possono essere combinati per­fet­ta­men­te con quelli esistenti.

Rispetto agli strumenti di altri SDK, i widget offrono molta più fles­si­bi­li­tà ma hanno lo svan­tag­gio di essere tutti situati nel codice sorgente del programma, che risulta pertanto for­te­men­te ni­di­fi­ca­to e intricato.

Flutter: esempi semplici

Per poter iniziare ad usare Flutter da subito, gli svi­lup­pa­to­ri offrono numerosi esempi. Un semplice progetto “Hello World” mostra la struttura fon­da­men­ta­le di un’app con un widget e una semplice funzione void Main() che avvia il programma.

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:Flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'Welcome to Flutter',
			home: Scaffold(
			appBar: AppBar(
				title: Text('Welcome to Flutter'),
			),
			body: Center(
				child: Text('Hello World'),
			),
	),
		);
	}
}

Su uno smart­pho­ne, o nella si­mu­la­zio­ne smart­pho­ne, il programma mostra nella parte superiore la barra di titolo “Welcome to Flutter” indicata nell’elemento AppBar() del widget. Nella parte di schermo libera sot­to­stan­te, che in Flutter viene de­no­mi­na­ta body, viene vi­sua­liz­za­ta in questo caso la scritta “Hello World”.

Esempi in­te­rat­ti­vi mostrano app di Flutter, compreso il codice sorgente Dart uti­liz­za­to, di­ret­ta­men­te sul browser. In questi casi, il codice sorgente può essere mo­di­fi­ca­to in modo in­te­rat­ti­vo ed è possibile osservare l’effetto ottenuto nell’app.

La Flutter Gallery mostra, con alcune app esem­pli­fi­ca­ti­ve, l’utilizzo di diversi tipi di widget standard. Le categorie degli elementi per le in­ter­fac­ce utente evitano di proposito, come so­li­ta­men­te accade nei progetti open source, di uti­liz­za­re i nomi dei marchi Android e iOS che vengono quindi de­no­mi­na­ti “Material” (come nel lin­guag­gio di pro­get­ta­zio­ne di Google) e “Cupertino” (dalla sede della società Apple).

Consiglio

Su GitHub il team di Flutter offre una raccolta di diverse app messe a punto da svi­lup­pa­to­ri, nonché dei tutorial per compiere i primi passi nella pro­get­ta­zio­ne con Flutter.

Cosa serve per pro­gram­ma­re con Flutter?

Tutte le prin­ci­pa­li librerie e i tool a riga di comando per lo sviluppo di software con Flutter si trovano nell’SDK di Flutter, che può essere scaricato gra­tui­ta­men­te dal sito web ufficiale flutter.dev. L’SDK non dispone di un proprio IDE grafico, tuttavia per scrivere il codice sorgente potete uti­liz­za­re qualunque editor di testo di vostra pre­fe­ren­za.

Per una pro­gram­ma­zio­ne più comoda, Google consiglia di in­stal­la­re Android Studio. Flutter fornisce plug-in com­pa­ti­bi­li con Android Studio per integrare con facilità le librerie e per­met­te­re l’evi­den­zia­zio­ne au­to­ma­ti­ca della sintassi nell’editor. Plug-in simili sono di­spo­ni­bi­li anche per l’ambiente di sviluppo Microsoft Visual Studio Code.

N.B.

In­for­ma­zio­ni più ap­pro­fon­di­te sull’in­stal­la­zio­ne e la pro­gram­ma­zio­ne con Flutter sono di­spo­ni­bi­li nel nostro tutorial su Flutter per prin­ci­pian­ti.

Vantaggi e svantaggi di Flutter

Ogni SDK e ogni lin­guag­gio di pro­gram­ma­zio­ne presenta vantaggi e svantaggi. Nel complesso si può affermare che i vantaggi di Flutter rispetto a sistemi analoghi battono net­ta­men­te gli svantaggi.

Vantaggi di Flutter

  • Un codebase per tutte le prin­ci­pa­li piat­ta­for­me di de­sti­na­zio­ne
  • Lin­guag­gio di pro­gram­ma­zio­ne Dart, facile da ap­pren­de­re per i prin­ci­pian­ti
  • Il principio “tutto è un widget” offre in­nu­me­re­vo­li pos­si­bi­li­tà
  • Ese­cu­zio­ne per­for­man­te delle app native su smart­pho­ne
  • Ricche librerie con elementi per le in­ter­fac­ce utenti pre­de­fi­ni­ti
  • Semplice im­ple­men­ta­zio­ne di flussi di dati per fornire agli utenti in­for­ma­zio­ni sempre ag­gior­na­te
  • L’hot reload accelera l’attività di test durante lo sviluppo

Svantaggi di Flutter

  • Il codice di pro­gram­ma­zio­ne risulta intricato a causa dell’in­te­gra­zio­ne dei widget
  • L’ag­gior­na­men­to dei requisiti di pro­gram­ma­zio­ne nei sistemi operativi richiede l’ag­gior­na­men­to dei moduli Flutter. Poiché i moduli sono integrati come elementi fissi nel programma, anche quest’ultimo deve essere ri­com­pi­la­to e rein­stal­la­to sui di­spo­si­ti­vi.
  • Il lin­guag­gio è ancora nuovo e poco diffuso
Vai al menu prin­ci­pa­le