{"id":6090,"date":"2022-05-09T15:25:51","date_gmt":"2022-05-09T15:25:51","guid":{"rendered":"https:\/\/cloudsurfers.it\/?p=6090"},"modified":"2022-05-09T15:25:52","modified_gmt":"2022-05-09T15:25:52","slug":"sviluppare-applicazione-flutter-parte-4","status":"publish","type":"post","link":"https:\/\/cloudsurfers.it\/index.php\/sviluppare-applicazione-flutter-parte-4\/","title":{"rendered":"Sviluppare un\u2019applicazione Flutter \u2013 Parte 4"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"400\" src=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/cover-3.png\" alt=\"\" class=\"wp-image-6091\" srcset=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/cover-3.png 800w, https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/cover-3-300x150.png 300w, https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/cover-3-768x384.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<p>Quarta ed ultima parte di questa serie di sviluppo Flutter.<\/p>\n\n\n\n<p>In questo episodio vedremo come abbellire la nostra applicazione, per esempio cambiando colore al tema, impostando la modalit\u00e0 scura e vedremo anche come compilare il tutto su un ambiente <em>macOS <\/em>ed eseguire successivamente l&#8217;applicativo su <em>iOS Simulator<\/em>.<\/p>\n\n\n\n<p>Ricapitoliamo prima ci\u00f2 che \u00e8 stato fatto negli articoli precedenti:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/cloudsurfers.it\/index.php\/sviluppare-applicazione-flutter-parte-1\/\" target=\"_blank\" rel=\"noreferrer noopener\">Prima parte<\/a>, abbiamo impostato la struttura base del progetto e creato la prima pagina, quella di autenticazione;<\/li><li><a href=\"https:\/\/cloudsurfers.it\/index.php\/sviluppare-applicazione-flutter-parte-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Seconda parte<\/a>, abbiamo aggiunto il supporto multilingua all&#8217;applicazione ed integrato uno strato API Web;<\/li><li><a href=\"https:\/\/cloudsurfers.it\/index.php\/sviluppare-applicazione-flutter-parte-3\/\" target=\"_blank\" rel=\"noreferrer noopener\">Terza parte<\/a>, abbiamo aggiunto una base dati SQLite locale con un <em>helper<\/em> per effettuare le varie operazioni su di essa.<\/li><\/ul>\n\n\n\n<p>Iniziamo a parlare di <em>Dark Mode<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"modalit\u00e0-scura\">Modalit\u00e0 scura<\/h3>\n\n\n\n<p>La possibilit\u00e0 che un&#8217;applicazione si adegui al tema impostato sul dispositivo, scuro o chiaro che sia, \u00e8 sempre una funzionalit\u00e0 molto apprezzata dagli utenti.<\/p>\n\n\n\n<p>In Flutter \u00e8 molto semplice impostare questa modalit\u00e0 e personalizzarla a nostro piacimento. Vediamo come&#8230;<\/p>\n\n\n\n<p>Apriamo il file <code>main.dart<\/code> ed apportiamo qualche modifica al <em>Widget<\/em> <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/MaterialApp-class.html\" data-type=\"URL\" data-id=\"https:\/\/api.flutter.dev\/flutter\/material\/MaterialApp-class.html\" target=\"_blank\" rel=\"noreferrer noopener\"><em>MaterialApp<\/em> <\/a>come segue:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: java; title: ; notranslate\" title=\"\">\n...\nreturn MaterialApp(\n  localizationsDelegates: const &#x5B;\n    S.delegate,\n    GlobalMaterialLocalizations.delegate,\n    GlobalWidgetsLocalizations.delegate,\n    GlobalCupertinoLocalizations.delegate,\n  ],\n  supportedLocales: S.delegate.supportedLocales,\n  title: &#039;Flutter Demo&#039;,\n  theme: ThemeData(\n    primarySwatch: Colors.blue,\n    brightness: Brightness.light,\n  ),\n  darkTheme: ThemeData(\n    primarySwatch: Colors.blue,\n    brightness: Brightness.dark,\n  ),\n  themeMode: ThemeMode.system,\n  home: const LoginPage(),\n);\n...\n<\/pre><\/div>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>In questo esempio abbiamo aggiunto la propriet\u00e0 <code>themeMode <\/code>impostandola a <code>ThemeMode.system<\/code>, questa propriet\u00e0 viene comunque cos\u00ec preimpostata da Flutter, quindi \u00e8 superfluo aggiungerla o meno.<\/em><\/p><\/blockquote>\n\n\n\n<p>Nell&#8217;esempio sopra abbiamo impostato due propriet\u00e0 del tema chiaro <code>theme<\/code>: <code>primarySwatch<\/code> per il colore primario utilizzato dai componenti e <code>brightness<\/code> per il tipo di luminosit\u00e0 dei componenti. Le stesse propriet\u00e0 sono impostate anche per il tema scuro <code>darkTheme<\/code>.<\/p>\n\n\n\n<p>Tramite l&#8217;opzione <code>themeMode<\/code> il tema pu\u00f2 essere forzato come chiaro o scuro anzich\u00e8 rispecchiare l&#8217;impostazione di sistema come in questo esempio.<\/p>\n\n\n\n<p>Ecco il risultato eseguendo l&#8217;app, menu <code>Run<\/code>, <code>Start Debugging<\/code> (<em>F5<\/em>) ed impostando il tema scuro a livello di sistema operativo Android:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-22.png\" alt=\"\" class=\"wp-image-6093\" width=\"284\" srcset=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-22.png 400w, https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-22-134x300.png 134w\" sizes=\"(max-width: 400px) 100vw, 400px\" loading=\"lazy\" \/><\/figure><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>Utilizzando l&#8217;emulatore \u00e8 possibile impostare il tema scuro con il comando <code>adb shell \"cmd uimode night yes\"<\/code>.<\/em><\/p><\/blockquote>\n\n\n\n<p>Proviamo ad impostare la propriet\u00e0 <code>primarySwatch<\/code> del tema scuro <code>darkTheme<\/code> al valore <code>Colors.green<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-23.png\" alt=\"\" class=\"wp-image-6094\" width=\"284\" srcset=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-23.png 400w, https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-23-134x300.png 134w\" sizes=\"(max-width: 400px) 100vw, 400px\" loading=\"lazy\" \/><\/figure><\/div>\n\n\n\n<p>Ma ancora&#8230; personalizziamo gli <em><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/ElevatedButton-class.html\" target=\"_blank\" rel=\"noreferrer noopener\">ElevatedButton<\/a><\/em> dell&#8217;applicazione, i pulsanti classici per intenderci, cambiandone forma e colore del testo:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: java; title: ; notranslate\" title=\"\">\n...\ndarkTheme: ThemeData(\n    primarySwatch: Colors.green,\n    brightness: Brightness.dark,\n    elevatedButtonTheme: ElevatedButtonThemeData(\n      style: ButtonStyle(\n        foregroundColor: MaterialStateProperty.resolveWith&lt;Color&gt;((_) {\n          return Colors.black54;\n        }),\n        shape: MaterialStateProperty.resolveWith&lt;OutlinedBorder&gt;((_) {\n          return RoundedRectangleBorder(\n              borderRadius: BorderRadius.circular(32));\n        }),\n      ),\n    ),\n),\n...\n<\/pre><\/div>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-24-edited.png\" alt=\"\" class=\"wp-image-6096\" width=\"284\" srcset=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-24-edited.png 400w, https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-24-edited-300x300.png 300w, https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-24-edited-150x150.png 150w\" sizes=\"(max-width: 400px) 100vw, 400px\" loading=\"lazy\" \/><\/figure><\/div>\n\n\n\n<p>Tramite la classe <em><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/ThemeData-class.html\" target=\"_blank\" rel=\"noreferrer noopener\">ThemeData<\/a><\/em> ci si pu\u00f2 sbizzarrire su tutti i fronti, personalizzando il pi\u00f9 piccolo dettaglio grafico dell&#8217;applicativo.<\/p>\n\n\n\n<p>Portiamo ora il tutto su iOS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ios\">iOS<\/h3>\n\n\n\n<p>Per prima cosa dobbiamo predisporre l&#8217;ambiente di sviluppo Flutter <em>macOS<\/em>, per poter compilare ed eseguire il tutto.<\/p>\n\n\n\n<p>Per non essere ripetitivo nella procedura, visto che \u00e8 similare a ci\u00f2 che abbiamo gi\u00e0 visto su sistema operativo <em>Windows<\/em>, vi rimando alla <a href=\"https:\/\/docs.flutter.dev\/get-started\/install\/macos\" target=\"_blank\" rel=\"noreferrer noopener\">pagina ufficiale<\/a> per l&#8217;installazione dell&#8217;SDK Flutter su <em>macOS <\/em>e alla <a href=\"https:\/\/cloudsurfers.it\/index.php\/sviluppare-applicazione-flutter-parte-1\/\" target=\"_blank\" rel=\"noreferrer noopener\">prima parte<\/a> di questa serie di articoli in cui viene mostrato come configurare l&#8217;editor <em>Visual Studio Code<\/em>.<\/p>\n\n\n\n<p>Da questo momento in poi quindi, dobbiamo avere un&#8217;ambiente di lavoro <em>macOS<\/em> pronto e funzionante. Procediamo&#8230;<\/p>\n\n\n\n<p>Carichiamo la cartella del progetto sull&#8217;ambiente <em>macOS <\/em>ed apriamola con <em>VSCode<\/em>.<\/p>\n\n\n\n<p>Dato che la nostra applicazione ha il supporto multilingua attivo, dobbiamo apportare una modifica al file di progetto <em>XCode<\/em> <code>Info.plist<\/code>.<\/p>\n\n\n\n<p>Apriamolo (cartella <code>ios\\Runner\\<\/code>) ed aggiungiamo la chiave <code>CFBundleLocalizations<\/code>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n...\n&lt;dict&gt;\n    &lt;key&gt;CFBundleLocalizations&lt;\/key&gt;\n    &lt;array&gt;\n        &lt;string&gt;en&lt;\/string&gt;\n    &lt;\/array&gt;\n    &lt;key&gt;CFBundleDevelopmentRegion&lt;\/key&gt;\n    &lt;string&gt;$(DEVELOPMENT_LANGUAGE)&lt;\/string&gt;\n    ...\n<\/pre><\/div>\n\n\n<p>la chiave <code>CFBundleLocalizations<\/code> deve contenere le medesime lingue che sono supportate dall&#8217;applicazione e che quindi sono disponibili nella cartella <code>l10n<\/code> del progetto Flutter. Nel nostro caso, solo l&#8217;inglese (fare riferimento sempre a <a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_ISO_639-1_codes\" target=\"_blank\" rel=\"noreferrer noopener\">ISO 639-1<\/a> per l&#8217;elenco dei codici lingua).<\/p>\n\n\n\n<p>Dalla barra in basso a destra di <em>VSCode<\/em>, se avete installato correttamente <em>XCode<\/em>, dovreste avere l&#8217;opzione <em>Start iOS Simulator<\/em> tra i dispositivi selezionabili. Selezionandolo verr\u00e0 avviata una sessione di <em>iOS Simulator<\/em>.<\/p>\n\n\n\n<p>Al termine del caricamento, eseguite l&#8217;applicazione Flutter da <em>VSCode<\/em> esattamente come avreste fatto su <em>Windows <\/em>(se richiesto, selezionate <em>Dart &amp; Flutter<\/em> come ambiente):<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-25.png\" alt=\"\" class=\"wp-image-6097\" width=\"290\" srcset=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-25.png 371w, https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-25-144x300.png 144w\" sizes=\"(max-width: 371px) 100vw, 371px\" loading=\"lazy\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-26.png\" alt=\"\" class=\"wp-image-6098\" width=\"290\" srcset=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-26.png 369w, https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-26-143x300.png 143w\" sizes=\"(max-width: 369px) 100vw, 369px\" loading=\"lazy\" \/><\/figure><\/div>\n\n\n\n<p>La nostra applicazione esegue correttamente anche su <em>iOS <\/em>esattamente come su <em>Android<\/em>. <\/p>\n\n\n\n<p>Funziona anche la modalit\u00e0 scura implementata sopra (impostandola dalle impostazioni si sistema <em>iOS<\/em>):<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-27.png\" alt=\"\" class=\"wp-image-6099\" width=\"290\" srcset=\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-27.png 364w, https:\/\/cloudsurfers.it\/wp-content\/uploads\/2022\/04\/image-27-143x300.png 143w\" sizes=\"(max-width: 364px) 100vw, 364px\" loading=\"lazy\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"conclusione\">Conclusione<\/h3>\n\n\n\n<p>Flutter, come abbiamo visto in questa serie di articoli, \u00e8 un framework completo, che permette di creare interfacce che rispettano in <em>toto<\/em> lo stile <em><a href=\"https:\/\/material.io\/\" data-type=\"URL\" data-id=\"https:\/\/material.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material<\/a><\/em>, estendibile con un quantitativo enorme di pacchetti che concedono molteplici possibilit\u00e0 di sviluppo permettendo anche di utilizzare strumenti nativi come camera e sensoristica varia, ad esempio.<\/p>\n\n\n\n<p>Il linguaggio <em>Dart<\/em>, parlando dal punto di vista di uno sviluppatore &#8220;abituato&#8221; al linguaggio <em>Angular<\/em>, pu\u00f2 scoraggiare all&#8217;inizio. A mio avviso per\u00f2, ha una curva di apprendimento molto rapida e ci permette in poco tempo di poterlo un minimo padroneggiare per la riuscita di un progetto.<\/p>\n\n\n\n<p>Anche la metodologia di <em>disegno<\/em> dell&#8217;interfaccia pu\u00f2 scoraggiare un Web Developer, abituato ad avere interfaccia e logica sempre o quasi distinte all&#8217;interno della struttura di un progetto, al contrario di Flutter dove, ad un primo sguardo, pu\u00f2 essere il tutto un po&#8217; confusionario.<\/p>\n\n\n\n<p>Tutta la confusione e le criticit\u00e0 che uno sviluppatore pu\u00f2 vedere in questo tipo di approccio, sono presto per\u00f2 risolte dalle ottime estensioni che vengono fornite, come ad esempio quella che abbiamo visto per <em>Visual Studio Code<\/em>. Gli aiuti nello sviluppo e nella lettura del codice sono molteplici. La community inoltre \u00e8 molto grande e attiva e questo \u00e8 d&#8217;aiuto quando incappiamo in qualche problematica.<\/p>\n\n\n\n<p>Per concludere, <a href=\"https:\/\/flutter.dev\/\" data-type=\"URL\" data-id=\"https:\/\/flutter.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flutter <\/a>\u00e8 una validissima alternativa a framework multipiattaforma come <a href=\"https:\/\/ionic.io\/\" data-type=\"URL\" data-id=\"https:\/\/ionic.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ionic <\/a>o <a href=\"https:\/\/reactnative.dev\/\" data-type=\"URL\" data-id=\"https:\/\/reactnative.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Native<\/a>, con una velocit\u00e0 di esecuzione a livelli di applicazioni native. Se padroneggiato, pu\u00f2 essere la scelta definitiva attuale nello sviluppo mobile.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"github\">GitHub<\/h3>\n\n\n\n<p>Il progetto Flutter realizzato in questo articolo \u00e8 disponibile su <a href=\"https:\/\/github.com\/Cloudsurfers-Dev\/flutter_demo_application_pt4\" data-type=\"URL\" data-id=\"https:\/\/github.com\/Cloudsurfers-Dev\/flutter_demo_application_pt4\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fonti\">Fonti<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/flutter.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/flutter.dev\/<\/a><\/li><li><a href=\"https:\/\/dart.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/dart.dev\/<\/a><\/li><li><a href=\"https:\/\/material.io\/design\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/material.io\/design\/<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p><!-- wp:paragraph --><\/p>\n<p>Quarta ed ultima parte di questa serie di sviluppo Flutter.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>In questo episodio vedremo come abbellire la nostra applicazione, per esempio cambiando colore al tema, impostando la modalit\u00e0 scura e vedremo anche come compilare il tutto su un ambiente <em>macOS <\/em>ed eseguire successivamente l&#8217;applicativo su <em>iOS Simulator<\/em>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n","protected":false},"author":3,"featured_media":6091,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":0,"footnotes":""},"categories":[185,181,36],"tags":[96,184,182,183,110],"class_list":["post-6090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dart","category-flutter","category-guide","tag-app","tag-dart","tag-flutter","tag-mobile","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/cloudsurfers.it\/index.php\/wp-json\/wp\/v2\/posts\/6090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudsurfers.it\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudsurfers.it\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudsurfers.it\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudsurfers.it\/index.php\/wp-json\/wp\/v2\/comments?post=6090"}],"version-history":[{"count":0,"href":"https:\/\/cloudsurfers.it\/index.php\/wp-json\/wp\/v2\/posts\/6090\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudsurfers.it\/index.php\/wp-json\/wp\/v2\/media\/6091"}],"wp:attachment":[{"href":"https:\/\/cloudsurfers.it\/index.php\/wp-json\/wp\/v2\/media?parent=6090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudsurfers.it\/index.php\/wp-json\/wp\/v2\/categories?post=6090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudsurfers.it\/index.php\/wp-json\/wp\/v2\/tags?post=6090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}