{"id":6062,"date":"2022-04-27T19:20:00","date_gmt":"2022-04-27T19:20:00","guid":{"rendered":"https:\/\/cloudsurfers.it\/?p=6062"},"modified":"2022-04-27T19:20:01","modified_gmt":"2022-04-27T19:20:01","slug":"sviluppare-applicazione-flutter-parte-3","status":"publish","type":"post","link":"https:\/\/cloudsurfers.it\/index.php\/sviluppare-applicazione-flutter-parte-3\/","title":{"rendered":"Sviluppare un\u2019applicazione Flutter \u2013 Parte 3"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

Terza parte della serie in cui stiamo realizzando un’applicazione Flutter <\/strong>multipiattaforma da zero, facendolo passo passo.<\/p>\n\n\n\n

Fino ad ora, nelle parti precedenti, abbiamo sviluppato un’app multilingua, integrata ad uno strato API Web. Potete trovare la prima<\/a> e la seconda <\/a>parte della serie qui sul sito se non le aveste gi\u00e0 lette.<\/p>\n\n\n\n

Il codice sorgente, inoltre, \u00e8 disponibile su GitHub<\/a> separato per articoli.<\/p>\n\n\n\n

Ora andremo ad aggiungere al nostro applicativo una nuova pagina con al suo interno una lista di elementi simil applicazione To Do list<\/em> ed integreremo il tutto con una base dati locale SQLite per la storicizzazione delle informazioni.<\/p>\n\n\n\n

Iniziamo…<\/p>\n\n\n\n

Pagina Elenco<\/h3>\n\n\n\n

Creiamo un nuovo file list.dart<\/code> all’interno della cartella contenente le pagine pages<\/code> e popoliamolo come segue:<\/p>\n\n\n

\nimport 'package:flutter\/material.dart';\n\nclass ListPage extends StatefulWidget {\n  const ListPage({Key? key}) : super(key: key);\n\n  @override\n  State<ListPage> createState() => _ListPage();\n}\n\nclass _ListPage extends State<ListPage> {\n  final List<Widget> items = [];\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: const Text("Elenco"),\n      ),\n      body: ListView.builder(\n        itemCount: items.length,\n        itemBuilder: (context, index) {\n          return items[index];\n        },\n      ),\n      floatingActionButton: FloatingActionButton(\n        onPressed: () {\n           print("On add pressed!");\n        },\n        child: const Icon(Icons.add),\n      ),\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
Pi\u00f9 nel dettaglio, il codice sopra, disegna una pagina Material<\/em> <\/a>tramite il Widget<\/em> Scaffold<\/strong><\/a>, come abbiamo gi\u00e0 visto precedentemente.<\/p>\n\n\n\n
All’interno del corpo della pagina body <\/em>disegna una lista mediante il Widget<\/em> ListView<\/a><\/strong>, lista popolata poi da un array<\/em> vuoto items<\/strong>, array<\/em> di Widget<\/em> generici al momento.<\/p>\n\n\n\n
La pagina contiene anche un FloatingActionButton<\/a><\/em>, il classico pulsantino in stile Material<\/em> <\/a>che si trova normalmente nell’angolo in basso a destra della pagina (pu\u00f2 essere posizionato anche altrove all’interno della pagina):<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Ora dobbiamo poter navigare all’interno di questa nuova pagina. Facciamo si che, effettuando l’accesso mediante la pagina di login, venga mostrata la pagina elenco (nel caso in cui l’accesso vada a buon fine).<\/p>\n\n\n\n
Spostiamoci quindi all’interno della pagina di autenticazione, file login.dart<\/code>, pi\u00f9 precisamente all’interno dell’evento onPressed: () {}<\/code> dell’ElevatedButton<\/a><\/em> di accesso.<\/p>\n\n\n\n
Commentiamo l’operazione di autenticazione tramite API vista nell’articolo precedente<\/a> (al momento non \u00e8 necessaria per i nostri test):<\/p>\n\n\n
\n\/*AuthRequest request = AuthRequest(\n  email: _email,\n  password: _password,\n);\n\nGetIt.I<ApiProvider>().auth(request).then((response) {\n  print(response?.token);\n\n  if (response != null && response.token != null) {\n    setState(() {\n      GetIt.I<AuthProvider>().setToken(response.token);\n    });\n  }\n}).onError((error, stackTrace) {\n  print(error);\n});*\/\n<\/pre><\/div>\n\n\n
ed aggiungiamo all’interno dell’evento:<\/p>\n\n\n
\n...\nprint(_email);\nprint(_password);\n\n...\n\nNavigator.push(\n  context,\n  MaterialPageRoute(\n    builder: (context) => const ListPage(),\n  ),\n);\n<\/pre><\/div>\n\n\n
Le due righe inerenti alla stampa di _email e _password erano gi\u00e0 presenti all’interno del codice, servono solo per dare un’indicazione di dove viene inserita la chiamata Navigator API.<\/em><\/p><\/blockquote>\n\n\n\n
La chiamata Navigator API<\/a><\/em> push<\/strong> permette di navigare verso una “strada<\/em>” indicata tramite l’oggetto MaterialPageRoute<\/a><\/em>, in questo caso un’istanza della classe ListPage()<\/strong> (la pagina elenco creata sopra).<\/p>\n\n\n\n
Avviamo l’applicazione, menu Run<\/code>, Start Debugging<\/code> (F5<\/em> da tastiera) e facciamo un accesso valido (form validato come abbiamo visto nella prima parte<\/a> della guida):<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Come potete vedere, effettuato l’accesso, ci troveremo davanti una pagina vuota chiamata Elenco<\/em> con un pulsante “+” in basso a destra.<\/p>\n\n\n\n
La pagina vuota in realt\u00e0 \u00e8 un elenco popolato dalla lista items<\/strong> che per\u00f2 al momento risulta vuoto.<\/em><\/p><\/blockquote>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Premendo il pulsante “+” viene stampata all’interno della console la stringa On add pressed!<\/code>.<\/p>\n\n\n\n
Database helper<\/em><\/h3>\n\n\n\n
Ora andremo ad implementare un database locale SQLite sviluppando quello che di fatto \u00e8 un provider<\/em> (come abbiamo gi\u00e0 visto lo scorso articolo<\/a>), che chiameremo per\u00f2 DatabaseHelper<\/strong>, quindi helper<\/em> per convenzione.<\/p>\n\n\n\n
Realizzeremo quindi una tabella di questo tipo:<\/p>\n\n\n\n
Tabella Persone<\/h4>\n\n\n\n
Campo<\/th>Tipo<\/th>Note<\/th><\/tr><\/thead>
Id<\/td>INTEGER<\/em><\/td>PRIMARY KEY AUTOINCREMENT<\/td><\/tr>
Nome<\/td>TEXT<\/em><\/td>NOT NULL<\/td><\/tr>
Cognome<\/td>TEXT<\/em><\/td>NOT NULL<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
tradotto in SQL<\/em> (SQLite<\/em>):<\/p>\n\n\n
\nCREATE TABLE Persone (\n    Id INTEGER PRIMARY KEY AUTOINCREMENT,\n    Nome TEXT NOT NULL,\n    Cognome TEXT NOT NULL\n)\n<\/pre><\/div>\n\n\n
Successivamente andremo ad aggiungere i metodi per: inserire, eliminare ed ottenere l’elenco dei record salvati in tabella.<\/p>\n\n\n\n
Vediamo come…<\/p>\n\n\n\n
Per prima cosa dobbiamo installare due nuove librerie, sqflite<\/strong> <\/a>per la gestione della base dati e path_provider<\/strong> <\/a>per ottenere percorsi di sistema che possiamo utilizzare (ad esempio per salvare la nostra base dati).<\/p>\n\n\n\n
Aggiungiamo quindi al file di progetto pubspec.yaml<\/code> i due nuovi pacchetti:<\/p>\n\n\n
\nsqflite: ^2.0.0+3\npath_provider: ^2.0.1\n<\/pre><\/div>\n\n\n
salviamo per far eseguire automaticamente il comando flutter pub get<\/code> a VSCode<\/em>.<\/p>\n\n\n\n
Al termine, creiamo un nuovo file db_helper.dart<\/code> all’interno della cartella providers<\/code> e compiliamolo come segue:<\/p>\n\n\n
\nimport 'dart:io';\nimport 'package:path\/path.dart';\nimport 'package:sqflite\/sqflite.dart';\nimport 'package:path_provider\/path_provider.dart';\n\nclass DatabaseHelper {\n  final _databaseName = "database.db";\n  final _databaseVersion = 1;\n\n  Database? _database;\n\n  Future _initDatabase() async {\n    Directory documentsDirectory = await getApplicationDocumentsDirectory();\n    String path = join(documentsDirectory.path, _databaseName);\n    _database = await openDatabase(path,\n        version: _databaseVersion, onCreate: _onCreate);\n  }\n\n  Future _onCreate(Database db, int version) async {\n    await db.execute('''\n          CREATE TABLE Persone (\n            Id INTEGER PRIMARY KEY AUTOINCREMENT,\n            Nome TEXT NOT NULL,\n            Cognome TEXT NOT NULL\n          )\n          ''');\n  }\n}\n<\/pre><\/div>\n\n\n
Vediamolo nel dettaglio…<\/p>\n\n\n
\nfinal _databaseName = "database.db";\nfinal _databaseVersion = 1;\n<\/pre><\/div>\n\n\n
In questo punto vengono dichiarate ed assegnate due variabili fisse: _databaseName<\/em> che indica il nome che avr\u00e0 il file .db<\/em> creato tramite la libreria sqflite<\/a><\/em>, e _databaseVersion<\/em> che indica la versione della base dati.<\/p>\n\n\n\n
Tramite il metodo _onCreate()<\/strong> che vedremo utilizzato successivamente, \u00e8 possibile identificare la versione del database, cos\u00ec da gestire il versioning nel caso di aggiornamento della base dati a seguito di un rilascio di una versione successiva dell’applicazione, per esempio.<\/em><\/p><\/blockquote>\n\n\n
\nFuture _initDatabase() async {\n    Directory documentsDirectory = await getApplicationDocumentsDirectory();\n    String path = join(documentsDirectory.path, _databaseName);\n    _database = await openDatabase(path,\n        version: _databaseVersion, onCreate: _onCreate);\n}\n<\/pre><\/div>\n\n\n
il metodo asincrono _initDatabase()<\/strong>, genera il percorso finale che avr\u00e0 la base dati (per fare ci\u00f2 utilizza il metodo getApplicationDocumentsDirectory<\/em> della libreria path_provider<\/a><\/em> installata in precedenza), in questo caso la cartella Documenti<\/em> dell’applicazione, e apre un’istanza database assegnandola alla variabile _database<\/strong>.<\/p>\n\n\n\n
Come argomento del metodo openDatabase<\/strong> che si occupa dell’apertura\/creazione della base dati, troviamo il metodo _onCreate<\/strong>, che esegue semplicemente la query di creazione della tabella o delle tabelle nel caso ne avessimo pi\u00f9 di una.<\/p>\n\n\n\n
Mancano ora i metodi per l’interazione con la tabella Persone<\/em> creata. Prima per\u00f2 abbiamo bisogno di creare un nuovo modello che identifica l’oggetto Persona<\/em>.<\/p>\n\n\n\n
Creiamo quindi un nuovo file persona_db.dart<\/code> all’interno del percorso models<\/code>:<\/p>\n\n\n
\nclass PersonaDB {\n  int? id;\n  String? nome;\n  String? cognome;\n\n  PersonaDB({\n    this.id,\n    this.nome,\n    this.cognome,\n  });\n}\n<\/pre><\/div>\n\n\n
A differenza degli oggetti creati nel precedente articolo<\/a>, questo oggetto non necessit\u00e0 n’\u00e8 di generare un file JSON<\/em>, n’\u00e8 di essere generato da una sorgente JSON<\/em>. I metodi toJson()<\/strong> e fromJson()<\/strong> quindi, non sono presenti.<\/p>\n\n\n\n
Creata la classe PersonaDB<\/em>, aggiungiamo i metodi di interazione all’interno della classe DatabaseHelper<\/em> del file db_helper.dart<\/code>:<\/p>\n\n\n
\nimport 'package:demo_application\/models\/persona_db.dart';\n\n...\n    \nFuture<int> insertPersona(PersonaDB persona) async {\n    if (_database == null) await _initDatabase();\n    return await _database!.insert(\n      "Persone",\n      {\n        "Nome": persona.nome,\n        "Cognome": persona.cognome,\n      },\n      conflictAlgorithm: ConflictAlgorithm.fail,\n    );\n}\n\nFuture<List<PersonaDB>> listPersone() async {\n    if (_database == null) await _initDatabase();\n    List<PersonaDB> result = [];\n    List<Map<String, Object?>> rows = await _database!.query("Persone");\n    for (var row in rows) {\n      result.add(PersonaDB(\n        id: row["Id"] as int,\n        nome: row["Nome"] as String,\n        cognome: row["Cognome"] as String,\n      ));\n    }\n    return result;\n}\n\nFuture<int> deletePersona(PersonaDB persona) async {\n    if (_database == null) await _initDatabase();\n    return await _database!.delete(\n      "Persone",\n      where: "Id = ?",\n      whereArgs: [persona.id],\n    );\n}\n<\/pre><\/div>\n\n\n
Il codice risulta molto esplicito, all’inizio di ogni operazione si verifica se \u00e8 presente o meno l’istanza _database<\/em> e nel caso si inizializza.<\/p>\n\n\n\n
Successivamente vengono utilizzati i metodi insert<\/strong>, query<\/strong> e delete<\/strong> messi a disposizione dalla libreria sqflite<\/em> <\/a>per eseguire le varie operazioni.<\/p>\n\n\n\n
In fase di inserimento di un nuovo record non \u00e8 specificato il campo Id in quanto la chiave ha la propriet\u00e0 AUTOINCREMENT<\/strong> che ne aumenta automaticamente il progressivo<\/em>.<\/p><\/blockquote>\n\n\n\n
Proseguiamo registrando il provider<\/em> all’interno del file main.dart<\/code> (seconda parte<\/a> per la funziona di GetIt<\/em>):<\/p>\n\n\n
\n...\nGetIt.I.registerSingleton&lt;DatabaseHelper>(DatabaseHelper());\n...\n<\/pre><\/div>\n\n\n
ed associamo il tutto alla nuova pagina Elenco<\/em> creata.<\/p>\n\n\n\n
Elenco interattivo<\/h3>\n\n\n\n
Torniamo a lavorare sul file list.dart<\/code> ed aggiungiamo all’interno della classe _ListPage<\/em> due array<\/em> fissi nomi<\/strong> e cognomi<\/strong>:<\/p>\n\n\n
\n...\nfinal List<String> nomi = [\n    "Matteo",\n    "Marco",\n    "Nicola",\n    "Cristian",\n    "Elena",\n    "Barbara",\n];\n\nfinal List<String> cognomi = [\n    "Rossi",\n    "Verdi",\n    "Gialli",\n    "Viola",\n];\n...\n<\/pre><\/div>\n\n\n
Queste due liste ci serviranno successivamente per inserire valori randomici<\/em> all’interno della tabella Persone<\/em>.<\/p>\n\n\n\n
Sempre all’interno della classe _ListPage<\/em> aggiungiamo un nuovo metodo che chiamiamo loadList()<\/strong> importando i necessari riferimenti:<\/p>\n\n\n
\nimport 'package:get_it\/get_it.dart';\nimport 'package:demo_application\/providers\/db_helper.dart';\n\n...\n\nFuture loadList() async {\n    GetIt.I<DatabaseHelper>().listPersone().then((persone) {\n      setState(() {\n        items.clear();\n        for (var persona in persone) {\n          items.add(\n            ListTile(\n              title: Text(persona.id.toString() +\n                  ' - ' +\n                  persona.nome! +\n                  ' ' +\n                  persona.cognome!),\n              onTap: () {\n                GetIt.I<DatabaseHelper>()\n                    .deletePersona(persona)\n                    .then((value) => loadList());\n              },\n            ),\n          );\n        }\n      });\n    });\n}\n\n_ListPage() {\n    loadList();\n}\n...\n<\/pre><\/div>\n\n\n
Il metodo loadList()<\/strong> viene anche invocato all’interno del costruttore, cos\u00ec da caricare la lista alla creazione della pagina.<\/p>\n\n\n\n
All’interno del nuovo metodo viene richiamato il metodo listPersone()<\/strong>, dell’istanza DatabaseHelper<\/em>, per ottenere l’elenco dei record presenti all’interno della tabella Persone<\/em>.<\/p>\n\n\n\n
Elenco di record utilizzato poi per ripopolare l’array<\/em> items<\/strong>, utilizzato a sua volta per disegnare<\/em> i vari elementi all’interno del Widget<\/em> ListView<\/a><\/em>.<\/p>\n\n\n\n
Come \u00e8 possibile vedere, items<\/strong> \u00e8 un elenco di Widget<\/em> ListTile<\/em> <\/a>che presentano un titolo, in questo caso una stringa contenente: id, nome e cognome di ogni record presente in tabella, ed un evento onTap: () {}<\/code> (click sull’elemento della lista).<\/p>\n\n\n\n
In questo esempio, premendo su un elemento della lista, questo, viene eliminato dalla base dati e la lista viene successivamente ricaricata e ridisegnata:<\/p>\n\n\n
\n...\nGetIt.I&lt;DatabaseHelper>()\n    .deletePersona(persona)\n    .then((value) => loadList());\n...\n<\/pre><\/div>\n\n\n
Si pu\u00f2 notare inoltre che le operazioni di modifica dell’array<\/em> items<\/strong> vengono fatte all’interno del metodo setState(() {}<\/code>, questo viene fatto per ridisegnare l’interfaccia (seconda parte<\/a> per approfondire).<\/p>\n\n\n\n
A questo punto non resta che aggiungere un nuovo elemento randomico <\/em>alla pressione del pulsante “+” presente in basso a destra all’interno della pagina.<\/p>\n\n\n\n
Aggiungiamo quindi la seguente operazione all’interno dell’evento onPressed: () {}<\/code> del pulsante FloatingActionButton<\/a><\/em>:<\/p>\n\n\n
\nimport 'dart:math';\nimport 'package:demo_application\/models\/persona_db.dart';\n\n...\n    \nGetIt.I<DatabaseHelper>()\n    .insertPersona(PersonaDB(\n        nome: nomi[random.nextInt(nomi.length)],\n        cognome: cognomi[random.nextInt(cognomi.length)],\n    ))\n    .then((value) => loadList());\n...\n<\/pre><\/div>\n\n\n
Il nome ed il cognome vengono selezionati casualmente all’interno delle rispettive liste.<\/p>\n\n\n\n
Eseguiamo l’applicazione con F5<\/em>, effettuiamo l’accesso e premiamo il pulsante “+”:<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Alla pressione del pulsante apparir\u00e0 a schermo un nuovo elemento. Continuamo a premerlo un’altro paio di volte per verificarne il comportamento corretto.<\/p>\n\n\n\n
Proviamo ora invece a “tappare<\/em>” gli elementi della lista:<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Come \u00e8 possibile vedere, gli elementi che vengono premuti verranno eliminati.<\/p>\n\n\n\n
Per la prova finale terminiamo l’esecuzione dell’app con Shift+F5<\/em> e rieseguiamo il tutto con F5<\/em>. Accediamo dalla pagina di login… ed ecco qua la nostra lista, esattamente nello stato in cui l’abbiamo lasciata terminando l’applicazione, ad indicare che il database funziona correttamente.<\/p>\n\n\n\n
Prossimamente…<\/h3>\n\n\n\n
Il prossimo sar\u00e0 l’ultimo articolo di questa serie sullo sviluppo di applicazioni Flutter.<\/p>\n\n\n\n
Vedremo con gestire la modalit\u00e0 scura e cambiare il tema della nostra app. Inoltre proveremo a compilarla su un ambiente macOS ed eseguirla su un simulatore iOS per verificarne il funzionamento multipiattaforma.<\/p>\n\n\n\n
GitHub<\/h3>\n\n\n\n
Il progetto Flutter realizzato in questo articolo \u00e8 disponibile su GitHub<\/a>.<\/p>\n\n\n\n
Fonti<\/h3>\n\n\n\n