Flutter
Le basi
Preparativi
Installare questa estensione su Visual Studio Code:
Da Android Studio - Virtual Device Manager è possibile creare degli emulatori android e avviarli.
Da qui è possibile provare intere applicazioni senza bisogno di installare niente:
https://dartpad.dev/
Ottimo codelab da cui iniziare:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Versione avanzata:
https://dartpad.dev/?id=e7076b40fb17a0fa899f9f7a154a02e8
Learn:
https://flutter.dev/learn
Documentazione:
https://docs.flutter.dev/
Creare un'applicazione
Aprire il terminale e andare nella cartella in cui si vuole creare la nuova applicazione.
cd flutter
flutter create nome_applicazione
Aprire in Visual Studio Code.
Avviare e selezionare l'emulatore da usare.
Run - Run without debugging
Importare un componente
Funzioni con una sola espressione
è equivalente a
Semplice Widget Tree
Modifichiamo un po' il codice generato da flutter:
Layout widgets
Modifichiamo il body dell'app aggiungendo una domanda e due bottoni, inseriti all'interno di un Widget di tipo Column.
I children sono i vari Widget contenuti nella Column, che saranno presentati uno sotto l'altro:
Per il momento la callback onPressed, e cioè la funzione che dovrà essere richiamata quando il bottone viene premuto, viene impostata a null.
Connettere funzioni ai bottoni
Scriviamo una semplice callback:
Togliamo const prima di children[] e lo mettiamo prima dei Text().
Settiamo la callback:
Possiamo farlo anche con una funzione freccia:
La funzione freccia è equivalente a una funzione anonima di questo tipo:
function () {
print("Ciao");
}
Adesso i bottoni si sono colorati e quando li premiamo la parola Ciao viene scritta nella console di debug.
Aggiornare lo stato
Modifichiamo il Widget MyApp in modo che sia stateful (cioè possieda uno stato): in questo modo potrà memorizzare dei valori.
Per farlo avremo bisogno di due classi: la prima viene ricreata ogni volta che cambiano gli input esterni.
La seconda è persistente e contiene lo stato.
Il metodo build rimane nella seconda perché viene usato da entrambe.
Nota: togliamo il const che precede MyApp:
L'aggiornamento di questionIndex viene messo dentro a setState: questa funzione informa l'applicazione che lo stato è cambiato e quindi una parte dell'interfaccia utente dev'essere ridisegnata.
Definiamo un array di domande:
e facciamo comparire la domanda corrispondente:
Raggiunta l'ultima domanda l'applicazione genera un errore perché questionIndex ha superato il numero di elementi dell'array domande[].
Creare un Widget
Creiamo un nuovo file e al suo interno definiamo un nuovo Widget senza stato.
Si tratta di un Widget che si occuperà di visualizzare la domanda: il suo costruttore Question riceve il testo della domanda e lo memorizza nella variabile questionText. Questa verrà poi utilizzata dal metodo build per generare un Widget Text contenente quel testo.
Per poter usare il Widget dobbiamo importarlo in main.dart:
A questo punto possiamo usarlo come qualunque altro Widget:
Questa complessità al momento sembra inutile, ma ci mostra in modo semplice come costruire e usare un qualsiasi Widget.
Stili di base
Vediamo come applicare alcuni semplici stili: inseriamo il Text dentro a un Container largo come l'intero schermo (infinity) e con un margine di 10 pixel virtuali su tutti i lati:
Passare le funzioni di callback
Creiamo un Widget anche per le risposte:
Dopo averlo importato andiamo ad usarlo dentro a main.dart:
Prendiamo la funzione di callback che viene passata al Widget, e cioè answerQuestion, e usiamola per attivare il bottone:
Ecco come appare l'app:
Maps
Modifichiamo l'array delle domande in modo che contenga per ognuna un oggetto contenente sia la domanda che le possibili risposte:
Modifichiamo Answer in modo che riceva anche il testo da inserire nel bottone:
Usiamo .map e l'operatore spread per creare una lista di Answer, una per ogni oggetto dell'array domande:
Il metodo map
Prenditi del tempo per capire bene cosa fanno queste righe di codice, perché sono molto potenti e le userai spesso.
Il metodo .map prende un array di stringhe (le answers della domanda) e per ognuna di esse (answer) restituisce un array di Widget Answer.
L'operatore spread (...) prende questo array di Widget e lo spalma all'interno dell'array children della Column, come se avessimo inserito noi i Widget Answer() uno ad uno.
Visualizzazione condizionale dei Widget
Per evitare di ricevere l'errore quando sono finite le domande, inseriamo un operatore ternario ? che di fatto è un if:
se la condizione è vera viene mostrata la Column() con la domanda e le risposte, in caso contrario il testo 'Hai finito!'.
Dividere l'app in Widget
Calcolare il totale
Assegnamo un punteggio a ogni risposta:
Modifichiamo il Widget Quiz di conseguenza:
La callback _answerQuestion riceverà i punti:
Mostrare il punteggio
Modifichiamo il Widget Result in modo che visualizzi una frase in base al punteggio totale:
In main.dart:
Widget e stili
2024
Installazione
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
Installare questa estensione su Visual Studio Code:
Da Android Studio - Virtual Device Manager è possibile creare degli emulatori android e avviarli.
Da Android Studio - Virtual Device Manager è possibile creare degli emulatori android e avviarli.
Da qui è possibile provare intere applicazioni senza bisogno di installare niente:
https://dartpad.dev/
https://dartpad.dev/
Ottimo codelab da cui iniziare:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Versione avanzata:
https://dartpad.dev/?id=e7076b40fb17a0fa899f9f7a154a02e8
Learn:
https://flutter.dev/learn
Documentazione:
https://docs.flutter.dev/
Creare un'applicazione
Aprire il terminale e andare nella cartella in cui si vuole creare la nuova applicazione.
cd flutter
flutter create nome_applicazione
Aprire in Visual Studio Code.
Avviare e selezionare l'emulatore da usare.
Run - Run without debugging
Importare un componente
Funzioni con una sola espressione
è equivalente a
Semplice Widget Tree
Modifichiamo un po' il codice generato da flutter:
Layout widgets
Modifichiamo il body dell'app aggiungendo una domanda e due bottoni, inseriti all'interno di un Widget di tipo Column.
I children sono i vari Widget contenuti nella Column, che saranno presentati uno sotto l'altro:
Per il momento la callback onPressed, e cioè la funzione che dovrà essere richiamata quando il bottone viene premuto, viene impostata a null.
Connettere funzioni ai bottoni
Scriviamo una semplice callback:
Togliamo const prima di children[] e lo mettiamo prima dei Text().
Settiamo la callback:
Possiamo farlo anche con una funzione freccia:
La funzione freccia è equivalente a una funzione anonima di questo tipo:
function () {
print("Ciao");
}
Adesso i bottoni si sono colorati e quando li premiamo la parola Ciao viene scritta nella console di debug.
Aggiornare lo stato
Modifichiamo il Widget MyApp in modo che sia stateful (cioè possieda uno stato): in questo modo potrà memorizzare dei valori.
Per farlo avremo bisogno di due classi: la prima viene ricreata ogni volta che cambiano gli input esterni.
La seconda è persistente e contiene lo stato.
Il metodo build rimane nella seconda perché viene usato da entrambe.
Nota: togliamo il const che precede MyApp:
L'aggiornamento di questionIndex viene messo dentro a setState: questa funzione informa l'applicazione che lo stato è cambiato e quindi una parte dell'interfaccia utente dev'essere ridisegnata.
Definiamo un array di domande:
e facciamo comparire la domanda corrispondente:
Raggiunta l'ultima domanda l'applicazione genera un errore perché questionIndex ha superato il numero di elementi dell'array domande[].
Creare un Widget
Creiamo un nuovo file e al suo interno definiamo un nuovo Widget senza stato.
Si tratta di un Widget che si occuperà di visualizzare la domanda: il suo costruttore Question riceve il testo della domanda e lo memorizza nella variabile questionText. Questa verrà poi utilizzata dal metodo build per generare un Widget Text contenente quel testo.
Per poter usare il Widget dobbiamo importarlo in main.dart:
A questo punto possiamo usarlo come qualunque altro Widget:
Questa complessità al momento sembra inutile, ma ci mostra in modo semplice come costruire e usare un qualsiasi Widget.
Stili di base
Vediamo come applicare alcuni semplici stili: inseriamo il Text dentro a un Container largo come l'intero schermo (infinity) e con un margine di 10 pixel virtuali su tutti i lati:
Passare le funzioni di callback
Creiamo un Widget anche per le risposte:
Dopo averlo importato andiamo ad usarlo dentro a main.dart:
Prendiamo la funzione di callback che viene passata al Widget, e cioè answerQuestion, e usiamola per attivare il bottone:
Ecco come appare l'app:
Maps
Modifichiamo l'array delle domande in modo che contenga per ognuna un oggetto contenente sia la domanda che le possibili risposte:
Modifichiamo Answer in modo che riceva anche il testo da inserire nel bottone:
Usiamo .map e l'operatore spread per creare una lista di Answer, una per ogni oggetto dell'array domande:
Il metodo map
Prenditi del tempo per capire bene cosa fanno queste righe di codice, perché sono molto potenti e le userai spesso.
Il metodo .map prende un array di stringhe (le answers della domanda) e per ognuna di esse (answer) restituisce un array di Widget Answer.
L'operatore spread (...) prende questo array di Widget e lo spalma all'interno dell'array children della Column, come se avessimo inserito noi i Widget Answer() uno ad uno.
Visualizzazione condizionale dei Widget
Per evitare di ricevere l'errore quando sono finite le domande, inseriamo un operatore ternario ? che di fatto è un if:
se la condizione è vera viene mostrata la Column() con la domanda e le risposte, in caso contrario il testo 'Hai finito!'.
Dividere l'app in Widget
Calcolare il totale
Assegnamo un punteggio a ogni risposta:
Modifichiamo il Widget Quiz di conseguenza:
La callback _answerQuestion riceverà i punti:
Mostrare il punteggio
Modifichiamo il Widget Result in modo che visualizzi una frase in base al punteggio totale:
In main.dart:
Widget e stili
2024
Installazione
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
Aprire il terminale e andare nella cartella in cui si vuole creare la nuova applicazione.
cd flutter flutter create nome_applicazione
Aprire in Visual Studio Code.
Avviare e selezionare l'emulatore da usare.
Run - Run without debugging
Funzioni con una sola espressione
è equivalente a
Semplice Widget Tree
Modifichiamo un po' il codice generato da flutter:
Layout widgets
Modifichiamo il body dell'app aggiungendo una domanda e due bottoni, inseriti all'interno di un Widget di tipo Column.
I children sono i vari Widget contenuti nella Column, che saranno presentati uno sotto l'altro:
Per il momento la callback onPressed, e cioè la funzione che dovrà essere richiamata quando il bottone viene premuto, viene impostata a null.
Connettere funzioni ai bottoni
Scriviamo una semplice callback:
Togliamo const prima di children[] e lo mettiamo prima dei Text().
Settiamo la callback:
Possiamo farlo anche con una funzione freccia:
La funzione freccia è equivalente a una funzione anonima di questo tipo:
function () {
print("Ciao");
}
Adesso i bottoni si sono colorati e quando li premiamo la parola Ciao viene scritta nella console di debug.
Aggiornare lo stato
Modifichiamo il Widget MyApp in modo che sia stateful (cioè possieda uno stato): in questo modo potrà memorizzare dei valori.
Per farlo avremo bisogno di due classi: la prima viene ricreata ogni volta che cambiano gli input esterni.
La seconda è persistente e contiene lo stato.
Il metodo build rimane nella seconda perché viene usato da entrambe.
Nota: togliamo il const che precede MyApp:
L'aggiornamento di questionIndex viene messo dentro a setState: questa funzione informa l'applicazione che lo stato è cambiato e quindi una parte dell'interfaccia utente dev'essere ridisegnata.
Definiamo un array di domande:
e facciamo comparire la domanda corrispondente:
Raggiunta l'ultima domanda l'applicazione genera un errore perché questionIndex ha superato il numero di elementi dell'array domande[].
Creare un Widget
Creiamo un nuovo file e al suo interno definiamo un nuovo Widget senza stato.
Si tratta di un Widget che si occuperà di visualizzare la domanda: il suo costruttore Question riceve il testo della domanda e lo memorizza nella variabile questionText. Questa verrà poi utilizzata dal metodo build per generare un Widget Text contenente quel testo.
Per poter usare il Widget dobbiamo importarlo in main.dart:
A questo punto possiamo usarlo come qualunque altro Widget:
Questa complessità al momento sembra inutile, ma ci mostra in modo semplice come costruire e usare un qualsiasi Widget.
Stili di base
Vediamo come applicare alcuni semplici stili: inseriamo il Text dentro a un Container largo come l'intero schermo (infinity) e con un margine di 10 pixel virtuali su tutti i lati:
Passare le funzioni di callback
Creiamo un Widget anche per le risposte:
Dopo averlo importato andiamo ad usarlo dentro a main.dart:
Prendiamo la funzione di callback che viene passata al Widget, e cioè answerQuestion, e usiamola per attivare il bottone:
Ecco come appare l'app:
Maps
Modifichiamo l'array delle domande in modo che contenga per ognuna un oggetto contenente sia la domanda che le possibili risposte:
Modifichiamo Answer in modo che riceva anche il testo da inserire nel bottone:
Usiamo .map e l'operatore spread per creare una lista di Answer, una per ogni oggetto dell'array domande:
Il metodo map
Prenditi del tempo per capire bene cosa fanno queste righe di codice, perché sono molto potenti e le userai spesso.
Il metodo .map prende un array di stringhe (le answers della domanda) e per ognuna di esse (answer) restituisce un array di Widget Answer.
L'operatore spread (...) prende questo array di Widget e lo spalma all'interno dell'array children della Column, come se avessimo inserito noi i Widget Answer() uno ad uno.
Visualizzazione condizionale dei Widget
Per evitare di ricevere l'errore quando sono finite le domande, inseriamo un operatore ternario ? che di fatto è un if:
se la condizione è vera viene mostrata la Column() con la domanda e le risposte, in caso contrario il testo 'Hai finito!'.
Dividere l'app in Widget
Calcolare il totale
Assegnamo un punteggio a ogni risposta:
Modifichiamo il Widget Quiz di conseguenza:
La callback _answerQuestion riceverà i punti:
Mostrare il punteggio
Modifichiamo il Widget Result in modo che visualizzi una frase in base al punteggio totale:
In main.dart:
Widget e stili
2024
Installazione
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
è equivalente a
Modifichiamo un po' il codice generato da flutter:
Layout widgets
Modifichiamo il body dell'app aggiungendo una domanda e due bottoni, inseriti all'interno di un Widget di tipo Column.
I children sono i vari Widget contenuti nella Column, che saranno presentati uno sotto l'altro:
Per il momento la callback onPressed, e cioè la funzione che dovrà essere richiamata quando il bottone viene premuto, viene impostata a null.
Connettere funzioni ai bottoni
Scriviamo una semplice callback:
Togliamo const prima di children[] e lo mettiamo prima dei Text().
Settiamo la callback:
Possiamo farlo anche con una funzione freccia:
La funzione freccia è equivalente a una funzione anonima di questo tipo:
function () {
print("Ciao");
}
Adesso i bottoni si sono colorati e quando li premiamo la parola Ciao viene scritta nella console di debug.
Aggiornare lo stato
Modifichiamo il Widget MyApp in modo che sia stateful (cioè possieda uno stato): in questo modo potrà memorizzare dei valori.
Per farlo avremo bisogno di due classi: la prima viene ricreata ogni volta che cambiano gli input esterni.
La seconda è persistente e contiene lo stato.
Il metodo build rimane nella seconda perché viene usato da entrambe.
Nota: togliamo il const che precede MyApp:
L'aggiornamento di questionIndex viene messo dentro a setState: questa funzione informa l'applicazione che lo stato è cambiato e quindi una parte dell'interfaccia utente dev'essere ridisegnata.
Definiamo un array di domande:
e facciamo comparire la domanda corrispondente:
Raggiunta l'ultima domanda l'applicazione genera un errore perché questionIndex ha superato il numero di elementi dell'array domande[].
Creare un Widget
Creiamo un nuovo file e al suo interno definiamo un nuovo Widget senza stato.
Si tratta di un Widget che si occuperà di visualizzare la domanda: il suo costruttore Question riceve il testo della domanda e lo memorizza nella variabile questionText. Questa verrà poi utilizzata dal metodo build per generare un Widget Text contenente quel testo.
Per poter usare il Widget dobbiamo importarlo in main.dart:
A questo punto possiamo usarlo come qualunque altro Widget:
Questa complessità al momento sembra inutile, ma ci mostra in modo semplice come costruire e usare un qualsiasi Widget.
Stili di base
Vediamo come applicare alcuni semplici stili: inseriamo il Text dentro a un Container largo come l'intero schermo (infinity) e con un margine di 10 pixel virtuali su tutti i lati:
Passare le funzioni di callback
Creiamo un Widget anche per le risposte:
Dopo averlo importato andiamo ad usarlo dentro a main.dart:
Prendiamo la funzione di callback che viene passata al Widget, e cioè answerQuestion, e usiamola per attivare il bottone:
Ecco come appare l'app:
Maps
Modifichiamo l'array delle domande in modo che contenga per ognuna un oggetto contenente sia la domanda che le possibili risposte:
Modifichiamo Answer in modo che riceva anche il testo da inserire nel bottone:
Usiamo .map e l'operatore spread per creare una lista di Answer, una per ogni oggetto dell'array domande:
Il metodo map
Prenditi del tempo per capire bene cosa fanno queste righe di codice, perché sono molto potenti e le userai spesso.
Il metodo .map prende un array di stringhe (le answers della domanda) e per ognuna di esse (answer) restituisce un array di Widget Answer.
L'operatore spread (...) prende questo array di Widget e lo spalma all'interno dell'array children della Column, come se avessimo inserito noi i Widget Answer() uno ad uno.
Visualizzazione condizionale dei Widget
Per evitare di ricevere l'errore quando sono finite le domande, inseriamo un operatore ternario ? che di fatto è un if:
se la condizione è vera viene mostrata la Column() con la domanda e le risposte, in caso contrario il testo 'Hai finito!'.
Dividere l'app in Widget
Calcolare il totale
Assegnamo un punteggio a ogni risposta:
Modifichiamo il Widget Quiz di conseguenza:
La callback _answerQuestion riceverà i punti:
Mostrare il punteggio
Modifichiamo il Widget Result in modo che visualizzi una frase in base al punteggio totale:
In main.dart:
Widget e stili
2024
Installazione
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
Modifichiamo il body dell'app aggiungendo una domanda e due bottoni, inseriti all'interno di un Widget di tipo Column.
I children sono i vari Widget contenuti nella Column, che saranno presentati uno sotto l'altro:
I children sono i vari Widget contenuti nella Column, che saranno presentati uno sotto l'altro:
Per il momento la callback onPressed, e cioè la funzione che dovrà essere richiamata quando il bottone viene premuto, viene impostata a null.
Scriviamo una semplice callback:
Togliamo const prima di children[] e lo mettiamo prima dei Text().
Settiamo la callback:
Possiamo farlo anche con una funzione freccia:
La funzione freccia è equivalente a una funzione anonima di questo tipo:function () { print("Ciao"); }
Adesso i bottoni si sono colorati e quando li premiamo la parola Ciao viene scritta nella console di debug.
Aggiornare lo stato
Modifichiamo il Widget MyApp in modo che sia stateful (cioè possieda uno stato): in questo modo potrà memorizzare dei valori.
Per farlo avremo bisogno di due classi: la prima viene ricreata ogni volta che cambiano gli input esterni.
La seconda è persistente e contiene lo stato.
Il metodo build rimane nella seconda perché viene usato da entrambe.
Nota: togliamo il const che precede MyApp:
L'aggiornamento di questionIndex viene messo dentro a setState: questa funzione informa l'applicazione che lo stato è cambiato e quindi una parte dell'interfaccia utente dev'essere ridisegnata.
Definiamo un array di domande:
e facciamo comparire la domanda corrispondente:
Raggiunta l'ultima domanda l'applicazione genera un errore perché questionIndex ha superato il numero di elementi dell'array domande[].
Creare un Widget
Creiamo un nuovo file e al suo interno definiamo un nuovo Widget senza stato.
Si tratta di un Widget che si occuperà di visualizzare la domanda: il suo costruttore Question riceve il testo della domanda e lo memorizza nella variabile questionText. Questa verrà poi utilizzata dal metodo build per generare un Widget Text contenente quel testo.
Per poter usare il Widget dobbiamo importarlo in main.dart:
A questo punto possiamo usarlo come qualunque altro Widget:
Questa complessità al momento sembra inutile, ma ci mostra in modo semplice come costruire e usare un qualsiasi Widget.
Stili di base
Vediamo come applicare alcuni semplici stili: inseriamo il Text dentro a un Container largo come l'intero schermo (infinity) e con un margine di 10 pixel virtuali su tutti i lati:
Passare le funzioni di callback
Creiamo un Widget anche per le risposte:
Dopo averlo importato andiamo ad usarlo dentro a main.dart:
Prendiamo la funzione di callback che viene passata al Widget, e cioè answerQuestion, e usiamola per attivare il bottone:
Ecco come appare l'app:
Maps
Modifichiamo l'array delle domande in modo che contenga per ognuna un oggetto contenente sia la domanda che le possibili risposte:
Modifichiamo Answer in modo che riceva anche il testo da inserire nel bottone:
Usiamo .map e l'operatore spread per creare una lista di Answer, una per ogni oggetto dell'array domande:
Il metodo map
Prenditi del tempo per capire bene cosa fanno queste righe di codice, perché sono molto potenti e le userai spesso.
Il metodo .map prende un array di stringhe (le answers della domanda) e per ognuna di esse (answer) restituisce un array di Widget Answer.
L'operatore spread (...) prende questo array di Widget e lo spalma all'interno dell'array children della Column, come se avessimo inserito noi i Widget Answer() uno ad uno.
Visualizzazione condizionale dei Widget
Per evitare di ricevere l'errore quando sono finite le domande, inseriamo un operatore ternario ? che di fatto è un if:
se la condizione è vera viene mostrata la Column() con la domanda e le risposte, in caso contrario il testo 'Hai finito!'.
Dividere l'app in Widget
Calcolare il totale
Assegnamo un punteggio a ogni risposta:
Modifichiamo il Widget Quiz di conseguenza:
La callback _answerQuestion riceverà i punti:
Mostrare il punteggio
Modifichiamo il Widget Result in modo che visualizzi una frase in base al punteggio totale:
In main.dart:
Widget e stili
2024
Installazione
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
Modifichiamo il Widget MyApp in modo che sia stateful (cioè possieda uno stato): in questo modo potrà memorizzare dei valori.
Per farlo avremo bisogno di due classi: la prima viene ricreata ogni volta che cambiano gli input esterni.
La seconda è persistente e contiene lo stato.
Per farlo avremo bisogno di due classi: la prima viene ricreata ogni volta che cambiano gli input esterni.
La seconda è persistente e contiene lo stato.
Il metodo build rimane nella seconda perché viene usato da entrambe.
Nota: togliamo il const che precede MyApp:
L'aggiornamento di questionIndex viene messo dentro a setState: questa funzione informa l'applicazione che lo stato è cambiato e quindi una parte dell'interfaccia utente dev'essere ridisegnata.
Definiamo un array di domande:
e facciamo comparire la domanda corrispondente:
Raggiunta l'ultima domanda l'applicazione genera un errore perché questionIndex ha superato il numero di elementi dell'array domande[].
Creiamo un nuovo file e al suo interno definiamo un nuovo Widget senza stato.
Si tratta di un Widget che si occuperà di visualizzare la domanda: il suo costruttore Question riceve il testo della domanda e lo memorizza nella variabile questionText. Questa verrà poi utilizzata dal metodo build per generare un Widget Text contenente quel testo.
Si tratta di un Widget che si occuperà di visualizzare la domanda: il suo costruttore Question riceve il testo della domanda e lo memorizza nella variabile questionText. Questa verrà poi utilizzata dal metodo build per generare un Widget Text contenente quel testo.
Per poter usare il Widget dobbiamo importarlo in main.dart:
A questo punto possiamo usarlo come qualunque altro Widget:
Questa complessità al momento sembra inutile, ma ci mostra in modo semplice come costruire e usare un qualsiasi Widget.
Stili di base
Vediamo come applicare alcuni semplici stili: inseriamo il Text dentro a un Container largo come l'intero schermo (infinity) e con un margine di 10 pixel virtuali su tutti i lati:
Passare le funzioni di callback
Creiamo un Widget anche per le risposte:
Dopo averlo importato andiamo ad usarlo dentro a main.dart:
Prendiamo la funzione di callback che viene passata al Widget, e cioè answerQuestion, e usiamola per attivare il bottone:
Ecco come appare l'app:
Maps
Modifichiamo l'array delle domande in modo che contenga per ognuna un oggetto contenente sia la domanda che le possibili risposte:
Modifichiamo Answer in modo che riceva anche il testo da inserire nel bottone:
Usiamo .map e l'operatore spread per creare una lista di Answer, una per ogni oggetto dell'array domande:
Il metodo map
Prenditi del tempo per capire bene cosa fanno queste righe di codice, perché sono molto potenti e le userai spesso.
Il metodo .map prende un array di stringhe (le answers della domanda) e per ognuna di esse (answer) restituisce un array di Widget Answer.
L'operatore spread (...) prende questo array di Widget e lo spalma all'interno dell'array children della Column, come se avessimo inserito noi i Widget Answer() uno ad uno.
Visualizzazione condizionale dei Widget
Per evitare di ricevere l'errore quando sono finite le domande, inseriamo un operatore ternario ? che di fatto è un if:
se la condizione è vera viene mostrata la Column() con la domanda e le risposte, in caso contrario il testo 'Hai finito!'.
Dividere l'app in Widget
Calcolare il totale
Assegnamo un punteggio a ogni risposta:
Modifichiamo il Widget Quiz di conseguenza:
La callback _answerQuestion riceverà i punti:
Mostrare il punteggio
Modifichiamo il Widget Result in modo che visualizzi una frase in base al punteggio totale:
In main.dart:
Widget e stili
2024
Installazione
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
Vediamo come applicare alcuni semplici stili: inseriamo il Text dentro a un Container largo come l'intero schermo (infinity) e con un margine di 10 pixel virtuali su tutti i lati:
Creiamo un Widget anche per le risposte:
Dopo averlo importato andiamo ad usarlo dentro a main.dart:
Prendiamo la funzione di callback che viene passata al Widget, e cioè answerQuestion, e usiamola per attivare il bottone:
Ecco come appare l'app:
Dopo averlo importato andiamo ad usarlo dentro a main.dart:
Prendiamo la funzione di callback che viene passata al Widget, e cioè answerQuestion, e usiamola per attivare il bottone:
Ecco come appare l'app:
Maps
Modifichiamo l'array delle domande in modo che contenga per ognuna un oggetto contenente sia la domanda che le possibili risposte:
Modifichiamo Answer in modo che riceva anche il testo da inserire nel bottone:
Usiamo .map e l'operatore spread per creare una lista di Answer, una per ogni oggetto dell'array domande:
Il metodo map
Prenditi del tempo per capire bene cosa fanno queste righe di codice, perché sono molto potenti e le userai spesso.
Il metodo .map prende un array di stringhe (le answers della domanda) e per ognuna di esse (answer) restituisce un array di Widget Answer.
L'operatore spread (...) prende questo array di Widget e lo spalma all'interno dell'array children della Column, come se avessimo inserito noi i Widget Answer() uno ad uno.
Visualizzazione condizionale dei Widget
Per evitare di ricevere l'errore quando sono finite le domande, inseriamo un operatore ternario ? che di fatto è un if:
se la condizione è vera viene mostrata la Column() con la domanda e le risposte, in caso contrario il testo 'Hai finito!'.
Dividere l'app in Widget
Calcolare il totale
Assegnamo un punteggio a ogni risposta:
Modifichiamo il Widget Quiz di conseguenza:
La callback _answerQuestion riceverà i punti:
Mostrare il punteggio
Modifichiamo il Widget Result in modo che visualizzi una frase in base al punteggio totale:
In main.dart:
Widget e stili
2024
Installazione
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
Modifichiamo l'array delle domande in modo che contenga per ognuna un oggetto contenente sia la domanda che le possibili risposte:
Modifichiamo Answer in modo che riceva anche il testo da inserire nel bottone:
Usiamo .map e l'operatore spread per creare una lista di Answer, una per ogni oggetto dell'array domande:
Il metodo map
Prenditi del tempo per capire bene cosa fanno queste righe di codice, perché sono molto potenti e le userai spesso.
Il metodo .map prende un array di stringhe (le answers della domanda) e per ognuna di esse (answer) restituisce un array di Widget Answer.
L'operatore spread (...) prende questo array di Widget e lo spalma all'interno dell'array children della Column, come se avessimo inserito noi i Widget Answer() uno ad uno.
Per evitare di ricevere l'errore quando sono finite le domande, inseriamo un operatore ternario ? che di fatto è un if:
se la condizione è vera viene mostrata la Column() con la domanda e le risposte, in caso contrario il testo 'Hai finito!'.
se la condizione è vera viene mostrata la Column() con la domanda e le risposte, in caso contrario il testo 'Hai finito!'.
Dividere l'app in Widget
Calcolare il totale
Assegnamo un punteggio a ogni risposta:
Modifichiamo il Widget Quiz di conseguenza:
La callback _answerQuestion riceverà i punti:
Mostrare il punteggio
Modifichiamo il Widget Result in modo che visualizzi una frase in base al punteggio totale:
In main.dart:
Widget e stili
2024
Installazione
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
Assegnamo un punteggio a ogni risposta:
Modifichiamo il Widget Quiz di conseguenza:
La callback _answerQuestion riceverà i punti:
Modifichiamo il Widget Quiz di conseguenza:
La callback _answerQuestion riceverà i punti:
Mostrare il punteggio
Modifichiamo il Widget Result in modo che visualizzi una frase in base al punteggio totale:
In main.dart:
Widget e stili
2024
Installazione
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
Modifichiamo il Widget Result in modo che visualizzi una frase in base al punteggio totale:
In main.dart:
In main.dart:
2024
Installazione
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
1. Installazione SDK
Si installa l'SDK da Visual Studio Code, magari in una cartella c:\dev
Importante
confermare la registrazione nel path prima che scompaia!
Alla fine quando compare questo premere ESC:
2. Installazione dei componenti di Android Studio
Android Studio dovrebbe essere già installato sul pc.
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
Si installano su Android Studio i componenti aggiuntivi richiesti:
Se più avanti servirà il percorso di installazione dell'SDK, lo si trova in questa stessa finestra:
3. Verifica dell'accelerazione per la macchina virtuale
Bisogna accertarsi di avere abilitato l'accelerazione per la macchina virtuale:
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
https://developer.android.com/studio/run/emulator-acceleration?hl=it#vm-windows-aehd
Se appare STOPPED è probabile che manchi l'abilitazione della virtualizzazione dal BIOS (o che sia attivo Hyper-V).
4. Creazione di un Virtual Device
Una volta finito, si può avviare l'emulatore da qui:
5. Accettazione delle licenze
Da una console aperta come amministratore:
C:> flutter doctor --android-licenses
Leggere e accettare le varie licenze.
6. Verifica dell'ambiente di sviluppo
flutter doctor
Va bene se dice che non è a posto lo sviluppo per Windows (volendo si possono seguire le indicazioni per installare i componenti mancanti di Visual Studio, ma solo se si ha intenzione di sviluppare app per Windows).
Test Drive
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
Write your first app
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
Una prima applicazione già pronta, molto ben commentata, che fa anche uso dello stato:
https://docs.flutter.dev/get-started/test-drive
https://docs.flutter.dev/get-started/test-drive
Un codelab che guida nella creazione di una prima applicazione:
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0
Vale la pena di farlo per farsi una prima idea.
Creare un'applicazione
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
Widgets
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
Da VS Code:
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Aprire la Command Palette con Ctrl+Shift+P
Scegliere Flutter: New Project
Scegliere Application
Scegliere la cartella nella quale creare il progetto
Inserire il nome del progetto
Se serve inviarlo a GitHub.
https://docs.flutter.dev/get-started/fwe/fundamentals
Spiega bene come avviene la composizione dei Widgets.
Spiega bene come avviene la composizione dei Widgets.
Layout
Prossimi passi
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize
https://flutter.dev/learn
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
First week:
https://docs.flutter.dev/get-started/fwe
riporta a pagine della guida ufficiale e ad altri articoli introduttivi:
- widget fundamentals
- tutorial UI Introduction: https://docs.flutter.dev/ui
- widget importanti: Container, Text, Scaffold, AppBar, Row, Column, ElevatedButton, Image, Icon
- layout
- state management
- user input
- networking and data
- local data and caching
Successivamente si riprende tutto metodicamente, seguendo la guida ufficiale.
flutter_24: lista dei commit
Iniziare a strutturare microlezioni facendole corrispondere ai commit di un repository, il video si può fare in seguito mettendo il link o l'embed.
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
I task su skilly poi possono prendere più microlezioni
App: creazione di un'app, avvio dell'emulatore e del debug
- Scaffold essenziale
- AppBar
- Scaffold
- GestureDetector
- setState
- callback
- Lista della spesa
Allineamento mainAxis e crossAxis
Expanded, flex
mainAxisSize