Scarica Flutter - teoria alla programmazione mobile e più Dispense in PDF di Sviluppo di Applicazioni Web solo su Docsity!
FLUTTER
- Introduzione
- Installazione
- Risoluzione problemi
- Comandi
- Struttura del codice - Crea progetto flutter su Android Studio - Permessi Internet - Avviare l’app
- Codice
- Costruttore
- Variabili
- Scaffold
- Bottoni
- Main function
- Funzioni
- Accesso condizionali proprietà
- Operatore ternario
- SWITCH
- For (loop)
- For per gli iterable
- While
- Do-while
- Break
- Continue
- WIDGET
- Text
- Bottone
- Usare una lista
- Le classi
- Operatore map
- DEBUG
- setState()
- LAYOUT
- WIDTH
- width : double.infinity //prendere tutto lo spazio a sua disposizione
- Font
- Distanziare da sopra la scritta
- Allineamento
- Programmazione asincrona
- Funzioni asincrone
- .then()
- await
- errori
- FutureBuilder
- Sistemare la struttura dell’app
- Dipendenze e librerie
- Usare un’API
- DA API A OGGETTO DART
- Extension function
- LAYOUT
- STREAM
- Future vs Stream
- Single Subscription Stream
- Broadcast Stream
- Stream operators
- Metodo shuffle
- Absorve pointer
- InitState()
- Dispose()
- Persistenza dei dati
- BASE
- Installare Flutter su Android
- Configurare percorso SDK
- Risolvere problemi android studio
- Inserire immagini nel codice
- Creare codice facendo partire una pagina intro
- Grafica base
- Inserire fonts
- Aprire una seconda pagina
- Creare un componente + Model
- Esercizio prof
- QUIZ
- my_home_page.dart
- question.dart
- QUIZ
- main.dart
- question.dart
- question_page.dart
- question_bloc.dart
● File > cmd + shift +. -> apre file nascosti ● creo file -> .zshrc ● export PATH=$PATH:/Users/flutter/bin:$PATH
Risoluzione problemi
● flutter doctor -> comando per vedere se ci sono errori negli IDE
Installazione su Android
installa android studio apri SDK manager
scrivere sul terminale flutter doctor --android-licenses se eseguendo l’app compare questo errore : ● chiudi emulatore ● vai su android studio
Comandi
flutter doctor guardare se ci sono problemi flutter create primo_project creazione progetto ● vuole solo _, non CamelCase cd primo_project entrare dentro la cartella progetto flutter run avviare app
Su MainActivity estende FlutterActivity Cartella lib -> codice Flutter pubspeac.yaml -> simile a json (informazioni sull’app) sdk -> versione di dart
runApp -> prende un widget e l’app compila
Avviare l’app
cliccando su esegue ed ‘avvia’ si può startare l’app essere sopra un file con estensione .dart si può fare anche con ‘flutter run’ da terminale demo widget ● stateless/statefull -> possono avere uno stato oppure no. ○ nella demo -> lo stato è il contatore
Bottoni
● tooltip -> per gli ipovedenti (la lettura ad alta voce) ● onPressed -> comportamento quando viene premuto un bottone definita come una funzione senza () ● setta lo stato setState((){ _counter++; }); utilizzando la build si ricorda dove ha lasciato il counter
Main function
void main(){ print('hello'); } stampa ‘hello’
Funzioni
int add(int a, int b){ return a + b; } se non ritorna nulla si usa void int add(int a, int b) => a+b; //ritorna il valore della somma
Parametri posizionali
-> obbligatori e sono quelli tra parentesi (in questo caso int) nullable -> può avere un valore null
Accesso condizionali proprietà
utilizzando il? prima del. se è null allora restituirà null, altrimenti ritorna la lunghezza della stringa
Operatore ternario
true : false
SWITCH
?? -> restituisce quello che c’è prima dei due punti se è non null, invece se è null restituisce quello dopo ! -> sono sicuro che quella variabile non sia null se fosse null andrebbe in crash
For (loop)
For per gli iterable
(lista elementi)
While
Do-while
ElevatedButton( onPressed : _answerQuestion , //se lasciamo () passiamo il valore della funzione, non la funzione quindi si scrive senza child : const Text("3") ),
Usare una lista
class _MyHomePageState extends State{ int _counter = 0; List questions = [ 'Quanti nipoti ha zio Paperino?', 'Capitale della Spagna?' ]; } si richiama così nella lista Text(questions[0]), stamperà la prima domanda
Le classi
in un altro file .dart class Question{ final String text; final List answers; //costruttore Question({required this.text,required this.answers}); //al posto di required andava bene anche final String? text; } _text -> privato ora per richiamare la classe nelle domande si fa l’import (import 'package:quiz/question.dart'; ) e la lista diventa così (sotto class _MyHomePageState) : final List _questions = [ Question(text : 'Quanti nipoti ha zio Paperino?', answers : [“2”, “5”, “7”, “12”]), Question(text : 'Capitale della Spagna?', answers : [“9”, “6”, “3”, “16”]), ]; } praticamente la classe corrisponde ad un testo per la domanda + una lista per la risposta così da avere più scelte tipo quiz stampare la domanda Text(_questions[_index}.text), stampare le risposte ElevatedButton( onPressed : _answerQuestion , child : Text(_questions[_index}.answer[1]) ),
Operatore map
_questions[_index].answers.map((answer) => ElevatedButton( onPressed : _answerQuestion , child : Text(answer) ) ).toList(), Grazie al metodo map () , per ogni elemento dell'array sorgente, viene richiamata una funzione di callback, tramite la notazione che sfrutta il simbolo freccia "arrow", che elabora il dato e ne restituisce il valore modificato, il quale servirà per popolare un nuovo array.
DEBUG
debugPrint(“index : $index”):
setState()
setState() permette di dire a Flutter che qualcosa è cambiato.
LAYOUT
WIDTH
width : double.infinity //prendere tutto lo spazio a sua disposizione
Font
Text("testo", style : TextStyle( fontSize : 20, fontWeight : fontWeight.w600, color : Colors.deepOrange ) ● w600 grassetto ● w100 leggero
Distanziare da sopra la scritta
const SizedBox(height : 20),
Allineamento
textAlign : TextAlign.center maxLines :1, //taglia ad una riga overflow : TextOverFlow //metti i puntini EdgeInsets.symmetric(horizontal : 20) //spazia 20 dai lati
onError : (error) => print(error)); esempio -> immagine profilo non blocca l’app, ma caricherà un iconcina al posto dell’immagine che sta caricando
await
possiamo aspettare un risultato, lui in automatico fa una chiamata ed assegna ad una variabile il risultato. void main() async { var ids = await fetchLatestNewsIds(); } Future<List> fetchLatestNewsIds(){ return Future.value([1,2,3]); } wrappa il risultato in un Future in automatico Future<List> fetchLatestNewsIds() async { return [1,2,3]; }
errori
void main() async { try{ var ids = await fetchLatestNewsIds(); } catch(err){ print('Something went wrong : $err'); } } esempio c’è un errore nel 3 -> va nel catch e va avanti nel programma ● se non definisco che tipo di errore, verranno messi tutti gli errori. ● se non mettiamo il try catch -> l’app va in crash
FutureBuilder
esegue un Future ed aspettare il risultato per costruire l’UI builder -> funzione ● BuildContext -> propaga il context ai suoi children ● snapshot -> fotografia stato di quel future in quel momento FutureBuilder( future : someFutureFunction(), initialData : "", builder : (BuildContext context, Asyncsnapshot snapshot){ } )
Sistemare la struttura dell’app
Separare la business logic dall’ui. Architetture software -> state management in Flutter BLoC ● business ● logick ● component Come creare un BLoC ● creare una nuova classe question_bloc.dart ● spostare le question nella nuova pagina ? -> nullable await può essere utilizzato solo in una funzione async
Dipendenze e librerie
Le librerie sono dei package. ● due app diverse hanno un pezzo in comune -> creo un package ● condividere con altri sviluppatori (community) plugin -> tipo di package che parla con varie piattaforme i package si trovano su pub.dev , nella scelta
Come usare il JSON
● Dart class serialization json ● json deserialization Dart class deserialization del json : ● passare da json a Map<String, dynamic> (dynamic perchè posso ricevere bool, string, int ecc oppure un json dentro json (annidato)) -> dart:convert ● trasforma la mappa nel nostro oggetto dart -> dentro la nostra classe si mette un altro costruttore che prenderà come input una Map<String, dynamic> import 'dart.convert' Map<String, dynamic> userMap = jsonDecode(jsonString); class User{ String? name; String? email; User({this.name, this.email}); User.fromJson(Map<String, dynamic> json){ name = json['name']; email = json['email']; } } import 'dart.convert' Map<String, dynamic> userMap = jsonDecode(jsonString); User user = User.fromJson(userMap); la serialization invece ● converto in mappa ● convertire in stringa json
class User{ String? name; String? email; User({this.name, this.email}); Map<String, dynamic> toJson(){ final Map<String, dynamic> data = Map<String, dynamic>(); data['name'] = name; data['email'] = email; return data; } } import 'dart.convert' User user = User(name : “Mario”, email : “[email protected]”); Map<String, dynamic> userMap = user.toJson(); String json = jsonEncode(userMap); import … as http -> per rinominare l’import
DA API A OGGETTO DART
import alias http http.get altrimenti dovrei scrivere la forma lunga 1 vedere se la risposta (response) è negativa o negativa ● statusCode 200 -> ok convert.jsonDecode(response.body) 2 fare una classe dove verranno inseriti i parametri da ricevere fromJson(e) -> e singolo elemento 3 trasformo risposta a dart JSON to Dart
