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

Questo \u00e8 il secondo di una serie di articoli dove realizzeremo passo passo un’applicazione mobile multipiattaforma, Android ed iOS.<\/p>\n\n\n\n

Nel precedente articolo abbiamo installato e configurato tutti gli strumenti necessari di sviluppo, imbastito il progetto iniziale e creato la prima pagina.<\/p>\n\n\n\n

In questo andremo ad aggiungere il supporto multilingua e realizzeremo un provider <\/em>(cos\u00ec chiamati in gergo) per interagire con uno strato API web.<\/p>\n\n\n\n

Vi consiglio la lettura della prima parte<\/a> nel caso non l’aveste gi\u00e0 fatto.<\/p>\n\n\n\n

Supporto Multilingua<\/h3>\n\n\n\n

Vediamo ora come rendere la nostra applicazione multilingua. Per fare ci\u00f2 ci viene in soccorso un’estensione di Visual Studio Code<\/em>, Flutter Intl<\/a><\/strong>, installiamola.<\/p>\n\n\n\n

Apriamo VSCode<\/em> e rechiamoci alla sezione delle estensioni aggiuntive, dal pannello laterale sinistro. Cerchiamo, scrivendo nella barra di ricerca, l’estensione Flutter Intl<\/a><\/em> ed installiamola.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Terminata l’installazione ed aperto il nostro progetto su VSCode<\/em>, dalla Command Palette…<\/em> (Ctrl+Shift+P) cerchiamo e lanciamo il comando Flutter Intl: Initialize<\/code>.<\/p>\n\n\n\n

Questo comando automatizza diverse operazioni, vediamole elencate di seguito.<\/p>\n\n\n\n

Abilita flutter_intl<\/code> all’interno del file di configurazione di progetto pubspec.yaml<\/code>:<\/p>\n\n\n

\nflutter_intl:\n  enabled: true\n<\/pre><\/div>\n\n\n
Crea una cartella chiamata l10n<\/code> all’interno della directory lib<\/code> (che come abbiamo visto nel precedente articolo<\/a>, contiene la logica dell’applicazione).<\/p>\n\n\n\n
All’interno della cartella l10n<\/code>, genera il file intl_en.arb<\/code> (inizialmente vuoto):<\/p>\n\n\n
\n{\n}\n<\/pre><\/div>\n\n\n
Per ogni lingua supportata dall’applicazione \u00e8 necessario creare un rispettivo file .arb<\/em> con il codice ISO 639-1<\/a> che identifica la lingua appunto.<\/p>\n\n\n\n
Per aggiungere una nuova lingua in maniera del tutto automatizzata si pu\u00f2 utilizzare il comando Flutter Intl: Add locale<\/code> messo a disposizione dal componente aggiuntivo che abbiamo appena installato.<\/em><\/p><\/blockquote>\n\n\n\n
Questi file .arb<\/em> possono essere considerati ad esempio come file .json<\/em> non nidificati (non sono supportati oggetti nidificati all’interno dei file di lingua l10n<\/em> su Flutter).<\/p>\n\n\n\n
Compiliamo il file intl_en.arb<\/code> come segue:<\/p>\n\n\n
\n{\n    "loginTitle": "Login",\n    "loginButton": "Log In"\n}\n<\/pre><\/div>\n\n\n
Per comodit\u00e0, non potendo utilizzare oggetti nidificati, il prefisso di ogni chiave indica la pagina in cui \u00e8 utilizzata quella chiave, in questo caso login<\/em>.<\/p><\/blockquote>\n\n\n\n
Ogni volta che salviamo il contenuto di un file lingua, in automatico l’estensione Flutter Intl<\/code> rigenerer\u00e0 il componente Dart<\/em> l10n.dart<\/code> all’interno della cartella generated<\/code> (sempre all’interno della directory lib<\/code>). <\/p>\n\n\n\n
Questo componente autogenerato ci servir\u00e0 per utilizzare le traduzioni all’interno dell’applicazione, come vedremo successivamente.<\/p>\n\n\n\n
Prima di poter utilizzare le due nuove chiavi che abbiamo creato, abbiamo bisogno di un paio di passaggi manuali per completare la configurazione multilingua.<\/p>\n\n\n\n
Apriamo il file pubspec.yaml<\/code> e alla sezione dependencies<\/code> aggiungiamo la nuova dipendenza flutter_localizations<\/code> come sotto:<\/p>\n\n\n
\ndependencies:\n    \/\/ Altre dipendenze...\n    flutter_localizations:\n        sdk: flutter\n<\/pre><\/div>\n\n\n
Al salvataggio verr\u00e0 eseguito in automatico da VSCode<\/em> il comando flutter pub get<\/code> per l’installazione dei nuovi pacchetti aggiunti.<\/p>\n\n\n\n
Apriamo ora il file main.dart<\/code> ed importiamo il nuovo componente autogenerato l10n.dart<\/code> e la dipendenza appena installata flutter_localizations<\/code>:<\/p>\n\n\n
\nimport 'package:flutter_localizations\/flutter_localizations.dart';\nimport 'generated\/l10n.dart';\n<\/pre><\/div>\n\n\n
Impostiamo poi, all’interno della nostra istanza MaterialApp<\/a><\/em>, l’array localizationsDelegates<\/em> e la propriet\u00e0 supportedLocales<\/em>:<\/p>\n\n\n
\nreturn MaterialApp(\n      localizationsDelegates: const [\n        S.delegate,\n        GlobalMaterialLocalizations.delegate,\n        GlobalWidgetsLocalizations.delegate,\n        GlobalCupertinoLocalizations.delegate,\n      ],\n      supportedLocales: S.delegate.supportedLocales,\n      title: 'Flutter Demo',\n      theme: ThemeData(\n        \/\/ This is the theme of your application.\n        \/\/\n        \/\/ Try running your application with "flutter run". You'll see the\n        \/\/ application has a blue toolbar. Then, without quitting the app, try\n        \/\/ changing the primarySwatch below to Colors.green and then invoke\n        \/\/ "hot reload" (press "r" in the console where you ran "flutter run",\n        \/\/ or simply save your changes to "hot reload" in a Flutter IDE).\n        \/\/ Notice that the counter didn't reset back to zero; the application\n        \/\/ is not restarted.\n        primarySwatch: Colors.blue,\n      ),\n      home: const LoginPage(),\n    );\n<\/pre><\/div>\n\n\n
Ora siamo pronti ad utilizzare le chiavi di traduzione.<\/p>\n\n\n\n
Apriamo il file login.dart<\/code> ed all’interno dell’oggetto AppBar<\/em> <\/a>cambiamo il titolo stringa “Login<\/em>” con la nuova chiave di traduzione:<\/p>\n\n\n
\nreturn Scaffold(\n  appBar: AppBar(\n    title: Text(S.current.loginTitle),\n  ),\n  ...\n<\/pre><\/div>\n\n\n
importiamo il componente autogenerato l10n.dart<\/code>:<\/p>\n\n\n
\nimport '..\/generated\/l10n.dart';\n<\/pre><\/div>\n\n\n
Facciamo la stessa cosa con l’etichetta del pulsante ElevatedButton<\/a><\/em> di accesso:<\/p>\n\n\n
\nElevatedButton(\n  onPressed: () {\n    if (!_formKey.currentState!.validate()) {\n      return;\n    }\n\n    _formKey.currentState!.save();\n\n    print(_email);\n    print(_password);\n  },\n  child: SizedBox(\n    width: 200,\n    height: 50,\n    child: Center(\n      child: Text(\n        S.current.loginButton,\n        textScaleFactor: 1.5,\n      ),\n    ),\n  ),\n)\n<\/pre><\/div>\n\n\n
Selezionamo il nostro dispositivo Android (o l’emulatore) per il deploy e successivamente avviamo l’applicazione, menu Run<\/code>, Start Debugging<\/code> o pi\u00f9 semplicemente il tasto F5<\/em> sulla tastiera.<\/p>\n\n\n\n
\"\"
Il pulsante ed il titolo della pagina ora utilizzano le chiavi di traduzione<\/figcaption><\/figure><\/div>\n\n\n\n
Integrazione API Web<\/h3>\n\n\n\n
Iniziamo ora a vedere un metodo per poter integrare l’applicazione con uno strato API web di esempio.<\/p>\n\n\n\n
Nota: per implementare uno strato API web di test in modo rapido \u00e8 possibile utilizzare lo strumento online https:\/\/beeceptor.com\/<\/a>.<\/em><\/p><\/blockquote>\n\n\n\n
Consideriamo quindi di dover comunicare con un API che espone i seguenti metodi:<\/p>\n\n\n\n
POST …\/api\/auth<\/h4>\n\n\n\n
Input (Oggetto JSON)<\/h5>\n\n\n
\n{\n    "email": "demo@cloudsurfers.it",\n    "password": "passworddemo"\n}\n<\/pre><\/div>\n\n\n
Output (Oggetto JSON)<\/h5>\n\n\n
\n{\n    "token": "TOKEN_DEMO"\n}\n<\/pre><\/div>\n\n\n
GET …\/api\/items<\/h4>\n\n\n\n
Header<\/h5>\n\n\n
\n{\n    ...\n    "token": "TOKEN_DEMO",\n    ...\n}\n<\/pre><\/div>\n\n\n
Output (Oggetto JSON)<\/h5>\n\n\n
\n[\n    {\n        "id": 0,\n        "name": "Item 1",\n        "description": "Blue item"\n    },\n    {\n        "id": 1,\n        "name": "Item 2",\n        "description": "Green item"\n    }\n]\n<\/pre><\/div>\n\n\n
La chiamata items<\/em> \u00e8 una chiamata autenticata, necessita quindi del token di accesso all’interno dell’header della richiesta.<\/p>\n\n\n\n
I modelli<\/h3>\n\n\n\n
Per interagire con le API abbiamo bisogno di implementare tre nuovi oggetti all’interno dell’applicazione: AuthRequest<\/strong>, AuthResponse<\/strong> ed ItemResponse<\/strong>. Questi tre oggetti dovranno: essere generati partendo da un file .json<\/em>, oppure generare a loro volta un file .json<\/em> (per il modello AuthRequest<\/em> per esempio).<\/p>\n\n\n\n
Creiamo quindi una nuova cartella models<\/code> all’interno della cartella libs<\/code>.<\/p>\n\n\n\n
All’interno di models<\/code> creiamo tre file vuoti: auth_request.dart<\/code>, auth_response.dart<\/code> ed item_response.dart<\/code>.<\/p>\n\n\n\n
Apriamo il file auth_request.dart<\/code> e compiliamolo come segue:<\/p>\n\n\n
\nclass AuthRequest {\n  String? email;\n  String? password;\n\n  AuthRequest({\n    this.email,\n    this.password,\n  });\n\n  Map<String, dynamic> toJson() {\n    final Map<String, dynamic> data = <String, dynamic>{};\n    data["email"] = email;\n    data["password"] = email;\n    return data;\n  }\n}\n<\/pre><\/div>\n\n\n
come vediamo il metodo toJson()<\/strong> trasforma l’oggetto AuthRequest<\/em> in oggetto JSON<\/em>.<\/p>\n\n\n\n
Compiliamo ora il file auth_response.dart<\/code>:<\/p>\n\n\n
\nclass AuthResponse {\n  String? token;\n\n  AuthResponse({\n    this.token,\n  });\n\n  AuthResponse.fromJson(Map<String, dynamic> json) {\n    token = json["token"];\n  }\n}\n<\/pre><\/div>\n\n\n
a differenza del metodo prima, qui, il metodo fromJson(json)<\/strong> trasforma un oggetto JSON<\/em> assegnando le propriet\u00e0 dell’oggetto AuthResponse<\/em>.<\/p>\n\n\n\n
Terminiamo infine con il file item_response.dart<\/code> molto simile al precedente:<\/p>\n\n\n
\nclass ItemResponse {\n  int? id;\n  String? name;\n  String? description;\n\n  ItemResponse({\n    this.id,\n    this.name,\n    this.description,\n  });\n\n  ItemResponse.fromJson(Map<String, dynamic> json) {\n    id = json["id"];\n    name = json["name"];\n    description = json["description"];\n  }\n}\n<\/pre><\/div>\n\n\n
I provider<\/em><\/h3>\n\n\n\n
Per una gestione pulita ed organizzata delle logiche dell’applicazione, che possono essere ad esempio: la gestione dell’autenticazione, la gestione di un database locale, ecc…, in Flutter, si usano i provider<\/em> (Services<\/em> per qui proviene dal mondo Angular<\/em>).<\/p>\n\n\n\n
I provider<\/em> non sono altro che classi di oggetti che si occupano di eseguire determinate operazioni che possono essere invocate all’interno di tutta l’applicazione, ad esempio all’interno di tutte le pagine.<\/p>\n\n\n\n
All’interno del nostro progetto, al momento, abbiamo bisogno di due provider<\/em>:<\/p>\n\n\n\n