![1
Scaffold
home: new Scaffold(
appBar: new AppBar(
centerTitle: true,
title: new Text('Codemotion App'),
leading: new Icon(Icons.code),
actions: <Widget>[
new IconButton(icon: new Icon(Icons.cloud),
onPressed: () => print('Ciao'))
],
),
body: new Center(
child: new Text('Hello Codemotion!!!')
)
)
➔ Creiamo una AppBar
➔ Con leading spostiamo il contenuto a sx
➔ Creiamo un pulsante con actions
➔](https://image.slidesharecdn.com/flutter-180702171603/85/Flutter-16-320.jpg)
Flutter
- 1. ANGULAR ROMA
- 2. Dart Flutter May the Fabio be with you
- 3. Flutter(is not another Ionic) Un nuovo framework per app mobile by Google. Lorenzo Franceschini
- 4. Flutter Dart Flutter è basato sul linguaggio Dart: ● JIT (hot-reload - cicli di sviluppo rapidi) e AOT (predicibile - native ARM code - avvio ed esecuzione veloce) ● Multiple Runtime Environments: Transpila in JavaScript (Favorisce il riuso) ha un VM per essere eseguito da command line e compila in machine code ● Thread detti "isolati" non condividono risorse ● Funzioni critiche: eseguite fino al completamento ● Open Source e standard ECMA Lorenzo Franceschini
- 5. Flutter Dart Dart: Lorenzo Franceschini void main() { print(greetings(saluto: 'Ciao', cb: getName)); } // Ho il concetto di Funzioni First Class Object String getName() { return 'Lorenzo'; } // Named arguments: devono essere racchiusi tra graffe String greetings({Function cb, String saluto}) { return '$saluto, ${cb()}!'; }
- 6. Flutter Dart Dart: ● Ogni valore ha un tipo e ogni variabile è del tipo della referenza in memoria ● Tutto, proprio tutto è un OGGETTO ● Il tipo è opzionale (type inference) ● Supporto dei Generics, Funzioni first class ● Zero constructor free a meno di non dichiararlo ● Future e Async ● https://www.dartlang.org/guides/language/effective-d art/design ● https://www.dartlang.org/guides/language/language- tour ● https://pub.dartlang.org/ Lorenzo Franceschini
- 7. Flutter Dart Flutter: ● Reactive Framework ● Widgets pronti all'uso ● Hot Reload (sia su emulatore che device reale) ● Il tipo è opzionale (type inference) ● Fast 2D Rendering Engine ● Dev Tools (Inspector, Code Suggestion) ● Material Design ● Performance ● Multipiattaforma: one code base -> ARM code ● No Bridge ● https://flutter.io/ Lorenzo Franceschini
- 8. PHYSICS GESTURES ANIMATION Flutter Library SCAFFOLD Dart Library CUSTOM WIDGET STATELESS WIDGET Native APP BAR STATE WIDGET MATERIALAPP Lorenzo Franceschini Dart:core Dart:collection DART Programming Language FLUTTER API Dart:async Dart:io Dart:...
- 9. Create an App E' possibile utilizzare la riga di comando: 1. flutter doctor (per verificare) 2. flutter create --org me.com -i obj -a java codemotionapp (oppure swift e kotlin) 3. flutter emulators (per lista emulatori) 4. flutter emulators --launch apple_ios_simulator (o semplicemente Apple) 5. flutter run (o flutter run -d 'iPhone X') 6. open ios/Runner.xcworkspace Lorenzo Franceschini
- 10. Environment Cosa ci serve? ● SDK Flutter (include DART) ● XCode per sviluppo iOS ● Android Studio o in alternativa: ● Visual Studio Code ● IntelliJ ● relativi plugin Flutter e Dart Lorenzo Franceschini
- 11. Environment Lorenzo Franceschini ● Decomprimere Flutter ● Settare il path ● Installare Android Studio ● Installare i Plugin di Flutter e Dart ● flutter doctor --android-licenses ● Alt+Enter sul Widget e...
- 12. Flutter Widget Lorenzo Franceschini Widget: descrizione di una parte della UI Immagine presa dal corso Udacity per Flutter
- 13. Lorenzo Franceschini Immagine presa dal corso Udacity per Flutter
- 14. 1 import 'package:flutter/material.dart'; // package: lib di terze parti, flutter: package // material.dart: file void main() => runApp(new CodemotionApp()); // main è obbligatoria! class CodemotionApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Codemotion App', home: new Scaffold( body: new Center( child: new Text('Hello Codemotion!!!') ) ) ); } } Basic Steps ➔ Importiamo la libreria helper Material ➔ Definiamo la funzione main che ritorna una runApp e istanzia la mia classe ➔ Creo la mia classe che fa l'override della build di Widget ➔ Ritorno il mio scaffold dell'applicazione ➔ All'interno avrò vari elementi widget
- 15. Widget Tree ➔ Importiamo la libreria Materia e utilizziamo il Widget Material ➔ Creiamo la funzione main che ritorna una runApp e istanzia la mia classe ➔ Creo la mia classe che fa l'override della build di Widget ➔ Ritorno il mio scaffold dell'applicazione ➔ All'interno avrò vari elementi
- 16. 1 Scaffold home: new Scaffold( appBar: new AppBar( centerTitle: true, title: new Text('Codemotion App'), leading: new Icon(Icons.code), actions: <Widget>[ new IconButton(icon: new Icon(Icons.cloud), onPressed: () => print('Ciao')) ], ), body: new Center( child: new Text('Hello Codemotion!!!') ) ) ➔ Creiamo una AppBar ➔ Con leading spostiamo il contenuto a sx ➔ Creiamo un pulsante con actions ➔
- 17. Links Alcuni utili approfondimenti https://github.com/flutter/flutter/issues/14382 https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf https://dartpad.dartlang.org/ Lorenzo Franceschini https://material.io/tools/icons/?style=baseline https://aqueduct.io/docs/tour/ https://pub.dartlang.org/ http://cogitas.net/flutter-ui-code-tutorial-mastering-row-colu mn/