Flutter

Introduzione#

Nella branch apis sarà disponibile il progetto di default che prevede l'implementazione dell'architettura MVVM, con l'utilizzo di una REST API e di una GraphQL API, includendo il processo di auth e refresh token per il mantenimento della sessione.

Creazione progetto#

Dopo aver installato NodeJS + npm, la Flutter SDK e la Android SDK possiamo procedere alla creazione del nostro progetto (ricordo che la build e l'utilizzo di app iOS richiede Xcode e, pertanto, un ambiente di sviluppo macOS). Per prima cosa installiamo la Revo CLI

npm i -g @revodigital/revo-cli

Dopo ciò possiamo creare la nostra app flutter e scegliere il progetto Default

revo create-flutter-app
> Default, APIs (Flutter + MVVM + APIs)

Dopo aver scelto dove inserire il nostro progetto, il nome, e il bundleIdentifier dovremo solo più runnare il seguente comando nella root del nostro progetto

flutter pub get

Spiegazione#

Come detto in precedenza questo boilerplate permette di avere un'applicazione di prova con l'implementazione del pattern MVVM nel seguente modo:

• docs.json Questo file contiene le direttive con la quale verrà generata la documentazione

• docs

  • index.mdx Qui è presente la documentazione che state leggendo, formattata in markdown

• lib

  • model All'interno di questa cartella troviamo le interfacce / classi dati che verranno utilizzate all'interno della nostra applicazione

    • picsum_model.dart La classe che descrive l'oggetto immagine che verrà poi trasmesso dal view model una volta fetchati i dati e visualizzato (all'interno ad una lista di suoi simili) all'interno della view

  • view_model All'interno di questa cartella troviamo la logica che fetcha i dati, aggiorna il model e aggiorna la view con i nuovi dati del model

    • listpicture_view_model.dart Il componente responsabile del gestione dei dati del model e della comunicazione dei dati alla view

  • view All'interno di questa cartella troviamo la sola grafica che viene mostrata sul dispositivo dell'utente

    • listpicture_view.dart Il componente responsabile della visualizzazione sullo schermo dell'utente della lista di immagini sopra citata

  • placeholder_values Essendo che questo boilerplate non doveva comunicare con una API all'interno del file sottostante troviamo delle informazioni di placeholder

    • values.dart I valori delle immagini di placeholder

  • main.dart Qui abbiamo aggiornato la visualizzazione grafica per fare il display della view creata