Categorie
Flutter

Flutter: struttura di un’app

Il primo step da superare per iniziare a lavorare con Flutter è, naturalmente, installare l’ambiente di lavoro. Allo scopo il riferimento migliore è certamente il sito ufficiale: https://flutter.dev/docs/get-started/install

Come editor di sviluppo potete usare quello a voi più familiare, non ci sono restrizioni di sorta. Personalmente uso Visual Studio Code su Mac che, coniugato ad una serie di estensioni specifiche per Flutter, offrono uno strumento di lavoro veloce e completo sia per lo sviluppo che per il debug delle vostre applicazioni.

L’uso del Mac mi consente di fare delivery di applicazioni mobile sia per iOS che Android, ma potete usare Flutter anche su sistemi Windows.

Non scrivo nulla sulla procedura di installazione e sullo startup della prima applicazione di esempio: superare in autonomia questi passaggi credo sia il vero requisito essenziale da possedere per intraprendere lo studio di Flutter!

Se siete arrivati a digitare il vostro flutter create my_app siete pronti per leggere questo articolo.

Da dove iniziare?

Da dove iniziare per apprendere Flutter? Si inizia dal linguaggio Dart, sintassi, funzioni, classi, oggetti, stati, widget?

Si, ottimo approccio, ma… non è quello che prediligo. Mi piace arrivare a questi concetti in un secondo tempo.

Il primo passo che affronto è partire da uno scheletro di applicazione vuota che poi sarà riempito facendo riferimento ai concetti di cui sopra. Per praticare questo approccio credo sia fondamentale avere avuto già familiarità almeno con un linguaggio di programmazione.

Lo scheletro dell’app.

Supponiamo di voler creare le varie “pagine” o meglio screen dell’app che abbiamo in mente.

Se penso ad un’applicazione abbastanza standard, lo scheletro di navigazione potrebbe essere così descritto:

  • Delle screen introduttive che spiegano cosa offre l’app
  • Una pagina di login che chiede all’utente di autenticarsi
  • I contenuti fruibili dopo l’autenticazione

Per lo scopo è necessario quindi predisporre i contenitori per le varie schermate.

Volendolo rappresentare graficamente, lo scheletro di un’app per come descritta potrebbe essere il seguente:

Nella Figura 1 si vede la screen iniziale con uno slider che condurrà alla schermata di login di Figura 2. Superato il login si atterra sui contenuti forniti agli utenti autenticati di Figura 3.

In Figura 3 si nota un menu di navigazione implementato con una bottom bar con tre scelte.

Bene, l’obiettivo iniziale è quello di costruire queste scatole vuote ovvero le pagine che ripercorrono la struttura della nostra applicazione. Solo dopo ci preoccuperemo di riempirle di contenuti statici o dinamici che arrivano da servizi esposti tramite API.

L’esempio vale anche se non prevediamo l’autenticazione: capito l’approccio sarà semplice verticalizzare l’esempio per il proprio caso d’uso.

Se ti interessa e ti piace l’idea lascia un commento, mi aiuterà per scrivere il prossimo episodio!

Marco

Lascia un commento