Embedded Files
Quick Start
Quick Start
Queste pagine sono state create come appunti per la realizzazione di app in flutter, quindi non è da considerarsi una guida completa, ma piuttosto piccoli spunti di riferimento.
Installazione di Flutter
https://flutter.dev/docs/get-started/install
Creazione di un'app da linea di comando:
flutter create myapp
cd myapp
Avvio applicazione. L'applicazione viene avviata sul primo dispositivo connesso alla porta USB (Android/iPhone).
flutter run
Struttura di un app
Struttura di un app
Quando viene creata un'app la struttura delle cartelle è simile a quella dell'immagine a sinistra.
Le cartelle e i file importanti sono:
/lib --> sono contenuti i sorgenti dell'applicazione
pubspec.yaml --> File di configurazione che contiene l'elenco dei plugin utilizzati, gli elementi grafici (assets) e altre parti relative alla configurazione del progetto.
All'interno della cartella lib, viene creato un solo file main.dart che contiene il codice dell'applicazione. Ovviamente tale applicazione è molto semplice e ha solo una schermata principale che contiene tutto il codice per visualizzare i widget grafici e la logica per controllarli.
Struttura consigliata per un progetto di piccole/medie dimensioni
Struttura consigliata per un progetto di piccole/medie dimensioni
Un app di solito è composta da più schermate, utilizza diversi componenti e servizi per i dati e la business logic. Il mio consiglio è quello di creare delle cartelle per le varie componenti del progetto. Le cartelle che utilizzo sono le seguenti:
models/
services/
screens/
widgets/
main.dart
La cartella models contiene tutti i componenti relativi ai dati (modelli dei dati)
La cartella services fornirà i servizi per l'erogazione e la condivisione dei dati tra le varie schermate (screens) e/o widgets (componenti grafici e non)
data repository (dati remoti)
gestione degli stati (states_rebuilder, BloC, MobiX, ReduX, ...)
fornitura dei servizi ai widget (states_rebuilder, get_it, provider, ...)
La cartella screens conterrà le differenti schermate che fanno parte dell'applicazione (home, elenco, dettaglio, about, ...)
La cartella widgets conterrà tutti i componenti grafici che di volta in volta riterremmo opportuno creare per poterli riutilizzare nelle differenti schermate (screens) o quando riterremmo opportuno creare delle sotto-componenti per semplificare la leggibilità del codice.
Creare le singole pagine e la navigazione
Creare le singole pagine e la navigazione
Dopo aver creato la struttura delle cartelle come descritto, aggiungiamo tutte le pagine della nostra app. Ad esempio Home, Elenco, Dettaglio.
Utilizzando per ogni pagina il codice di esempio seguente, modificando il nome dello screen (HomeScreen) , il testo che verrà visualizzato (child: Text('Home')) e il routeName (static const routeName = '/home';).
Come secondo passo, modifichiamo il file main.dart importando gli screen (import home, elenco, dettaglio) e aggiungendo le regole di routing (navigazione tra pagine).
Occorre poi aggiungere del codice per poter navigare tra una pagina e l'altra.
Vi sono due metodi basilari.
Il primo è quello di utilizzare la navigazione diretta tramite il widget Navigator ed il secondo utilizzando il widget Drawer (Menù Principale con icona sulla toolbar).
Primo esempio navigazione dalla pagina Home alla pagina Elenco.
Modificare il file home.dart. Includere la screen Elenco e aggiungere il widget GestureDetector per intercettare il gesto di onTap e andare alla nuova pagina.
Flutter automaticamente inserirà nella pagina Elenco l'icona per tornare alla pagina precedente.
Per aggiungere un drawer. Creare all'interno della cartella widgets un file main_drawer.dart con il codice seguente. Per leggibilità è stato creato all'interno dello stesso codice un Widget (MenuItem) che incorpora la funzionalità di visualizzazione di una singola voce di menù utilizzando un widget ListTile con icona, testo e navigazione verso un route passato come parametro (esempio ElencoScreen.routeName).
Per aggiungere il Drawer alla pagina Home, modificare il codice home.dart (all'interno della cartella screens) aggiungendo all'interno del widget Scaffold, la proprietà drawer, dopo aver importato il widget main_drawer.dart.
Progetti e tutorial Flutter
Progetti e tutorial Flutter
https://github.com/avirias/Grey (Music Player)
https://github.com/alessandroaime/Weather (Canvas & Animation with Flutter)
https://awesomeopensource.com/project/mitesh77/Best-Flutter-UI-Templates
https://alligator.io/flutter/app-icons/ (creazione di icone per iOS e Android in automatico tramite un plugin)
https://medium.com/@psyanite/how-to-add-app-launcher-icons-in-flutter-bd92b0e0873a (Altro articolo sempre sulla creazione automatica di icone in flutter)
Roadmap
Utilizzo del componente placeholder per definire le varie parti dell'applicazione (Dettagli con passi successivi )
Creazione di un widget da poter riutilizzare in diverse parti dell'applicazione oppure per semplificare la struttura di una screen
Creazione di un modello dati (model)
Creazione di un provider (per i dati presi da internet)
Google Sites
Report abuse