Flutter

Guida allo sviluppo di app performanti e cross-platform

Carmine Zaccagnino

• Publisher: Hoepli
• Year: 2020
• ISBN:
  9788820399603
• Topic: Informatica
• Subtopic: Programmazione Microsoft

Il libro guida lo sviluppatore alla conoscenza di tutti gli aspetti più importanti di Flutter, a partire dalle basi fi no alla creazione di un'app di chat in tempo reale perfettamente funzionante.Uno strumento ideale per tutti coloro che desiderano imparare a sviluppare app crossplatform. Anche chi non ha mai utilizzato il nuovo framework di Google potrà iniziare a programmare sfruttando tutte le potenzialità che Flutter mette a disposizione degli sviluppatori, come l'hot reload, grazie al quale le modifi che apportate al codice possono essere visualizzate istantaneamente.Nel testo, dopo la presentazione dell'interfaccia grafi ca, vengono illustrati i pacchetti e i plugin indispensabili, l'input/output, la creazione di librerie esterne e molto altro ancora.In appendice, infine, è presente una concisa ma esaustiva presentazione di Dart, il linguaggio utilizzato per programmare con Flutter.

1

Creare la vostra prima app Flutter

Iniziamo a scrivere effettivamente del codice e a creare app per imparare quello che potete fare con Flutter.

Familiarizzate con la sintassi del Dart e con le classi di Flutter

In questa prima sezione del capitolo, darete un’occhiata al codice di esempio della CLI di Flutter, vedrete come lavorare con codice Dart e imparerete le basi dell’architettura e dell’implementazione di un’app Flutter.

Per realizzare un’app Flutter, create una cartella per contenere il codice sorgente dell’app e, all’interno di questa prima, un’altra cartella chiamata lib. La cartella lib è dove aggiungeremo i nostri file Dart definendo l’aspetto e il comportamento della nostra app.

Per ora non lavorerete con la CLI ma, quando sarete pronti a compilare l’app, utilizzerete flutter create per generare i file necessari per far sì che l’app venga compilata (che imparerete a conoscere e modificare nell’appendice sulla configurazione dell’app). In aggiunta ai file e alle cartelle direttamente correlate a Flutter e la vostra app, infatti, la radice dell’albero del sorgente dell’app deve anche contenere una cartella android e una cartella ios, contenenti i file di configurazione del sistema di compilazione di ognuna delle piattaforme.

All’interno della cartella lib, create un file chiamato main.dart.

All’esterno di lib, create un file chiamato pubspec.yaml e incollate questo codice all’interno:

name: flutter_example_name description: Example description of a flutter app that makes great things 
 
  
 happen.
 dependencies: flutter: sdk: flutter
 dev_dependencies: flutter_test: sdk: flutter
 flutter: uses-material-design: true

Il file pubspec.yaml contiene informazioni sul vostro progetto e le librerie su cui dipende, che Flutter utilizzerà per compilare la vostra app. Questo file, in realtà, è richiesto da qualsiasi pacchetto Dart, ma ci vorranno un po’ di tempo e qualche capitolo prima di iniziare a guardare qualche pacchetto Dart che non sia un’app Flutter.

All’interno di main.dart, scrivete questo:

import package:flutter/material.dart';
 void main() => runApp(MyApp());
 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }
 }
 class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title;
 @override _MyHomePageState createState() => _MyHomePageState(); }
 class _MyHomePageState extends State<MyHomePage> { int _counter = 0;
 void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

Questo file – una volta compilato ed eseguita l’app risultante – permette di ottenere una semplice app di una sola schermata con un contatore e un Floating Action Button (il tasto in basso a destra), che incrementa il contatore mostrato al centro della schermata, come mostrato nella Figura 1.1.

Figura 1.1 – L’app di esempio di Flutter in azione su Android.

Se l’app non funziona, esegui il comando:

$ flutter create

Come è stato illustrato in precedenza, flutter create è il comando utilizzato per creare progetti di app Flutter, ed eseguirlo in una cartella contenente codice Flutter, come in questo caso, creerà i file e le cartelle necessarie per compilare l’app per Android e iOS (oltre a cartelle per lo sviluppo Web e desktop se li avete attivati).

Ricordate che potete risolvere la maggior parte dei problemi di compilazione non causati da errori nel codice, specialmente dopo aver compilato diverse volte, eseguendo:

$ flutter clean

che eliminerà file lasciati da compilazioni precedenti.

Analizziamo il codice di esempio

Dividiamo il codice in parti più “digeribili” in modo da rendere più comprensibile questo esempio.

Il file pubspec.yaml

Prima di passare a main.dart, che contiene il codice principale dell’app, diamo un’occhiata veloce al file pubspec.yaml, di cui parleremo in maggior dettaglio nell’appendice dedicata alla configurazione dell’app.

Ricordo che pubspec.yaml non è presente solo in app Flutter: è una caratteristica dei pacchetti Dart e, come tale, contiene anche le informazioni necessarie per renderlo un’app Flutter.

Nella prima parte specificheremo alcuni metadati sull’app Flutter. In questa sezione, vengono impostati due attributi:

L’attributo name, che è il nome del pacchetto Dart ed è il nome predefinito dell’app che appare sulla schermata home o nel drawer. Uno dei problemi di name è che deve essere tutto composto di caratteri minuscoli ed essere un identificatore Dart valido: non può iniziare con una cifra, non può contenere caratteri che non sono lettere o trattini bassi e non può essere una parola riservata del Dart (come class, if, try ecc.). Perciò, è consigliato modificare i file dell’app nelle cartelle android e ios, come è stato spiegato nella sezione dell’appendice sulla configurazione dell’app, se vogliamo impostare un nome per l’app che non rientri all’interno di quelle restrizioni e/o se si vuole cambiare l’icona dell’app.

L’attributo description, che deve essere una breve descrizione dell’app.

Per evitare problemi di compilazione e come generale buona pratica, il nome della cartella che contiene la radice del progetto (lib e pubspec.yaml, per esempio) dovrebbe essere lo stesso nome del pacchetto Dart.

...