Les nouveautés depuis le Flutter Interact

Suite au Flutter Interact, de nombreuses nouveautés ont été annoncées pour l’écosystème Flutter. Lors du meetup du mois de janvier 2020 du Flutter Paris, nous avons fait un tour d’horizon de ce qu’il faut en retenir (Flutter Web, sur le desktop…).

Pour la partie web : https://speakerdeck.com/g123k/flutter-web-ou-en-sommes-nous

Transcript

2. Merci à
3. Et toujours
4. youtube.flutter.paris twitter.flutter.paris
5. L’actualité Da< & Flu?er
6. ChiBres
7. Flu?er Sur Github 1 905 Pull Requests validées Posez vos questions sur Cu?er.paris/questions
8. Flu?er Sur Github 1 905 Pull Requests validées 13 000 contributeurs Posez vos questions sur Cu?er.paris/questions
9. Flu?er Sur Github 1 905 Pull Requests validées 13 000 contributeurs Flutter > React Native Posez vos questions sur Cu?er.paris/questions
10. Flu?er Sur Github 1 905 Pull Requests validées 13 000 contributeurs +279% depuis 2018 Flutter > React Native Posez vos questions sur Cu?er.paris/questions
11. Da<
12. Da< Nouvelle version en stable Version 2.7 Posez vos questions sur Cu?er.paris/questions
13. Da< Nouveautés & futur Extensions Posez vos questions sur Cu?er.paris/questions
14. int.parse('42'); Extensions Posez vos questions sur Cu?er.paris/questions Ajouter des fonctionnalités à une classe / librairie : - méthodes - ge?ers - se?ers - opérateurs '42'.parseInt(); Disponible
15. extension ParseNumbers on String { int parseInt() => int.parse(this); double parseDouble() => double.parse(this); } main() { int i = '42'.parseInt(); print(i); } Extensions Posez vos questions sur Cu?er.paris/questions Disponible
16. dynamic d = '2'; print(d.parseInt()); // Pas OK Extensions Posez vos questions sur Cu?er.paris/questions Ne marche pas sur des objets dynamic Disponible
17. dynamic d = '2'; print(d.parseInt()); // Pas OK Extensions Posez vos questions sur Cu?er.paris/questions Ne marche pas sur des objets dynamic var v = '2'; print(v.parseInt()); // OK Marche avec l'inférence des types de DaO Disponible
18. Extensions Posez vos questions sur Cu?er.paris/questions Exemples var nestedList = [[1, 2, 3], [4, 5, 6]]; var flattened = nestedList.flatten(); // [1, 2, 3, 4, 5, 6] var isBlank = ' '.isBlank; // true var isNotBlank = ' something'.isBlank; // false File = File('some/path/testFileName.dart'); print(file.nameWithoutExtension); // testFileName // package time intégré Duration interval = 10.minutes + 15.seconds - 3.minutes; Duration doubled = interval * 2; Package da<x qui intègre le package time pub.dev/packages/daOx pub.dev/packages/time Disponible
19. Extensions Posez vos questions sur Cu?er.paris/questions Exemples Observable(someStream).flatMap(...) someStream(FlatMapStreamTransformer(...)) Observable.fromIterable([...]) Observable.concat(...) someStream.flatMap(...) someStream.flatMap(...) Stream.fromIterable([...]) ConcatStream(...) Package rxda< pub.dev/packages/rxdaO Disponible
20. Da< Nouveautés & futur Extensions Posez vos questions sur Cu?er.paris/questions
21. Da< Nouveautés & futur Extensions Caractères complexes Posez vos questions sur Cu?er.paris/questions
22. Package characters Posez vos questions sur Cu?er.paris/questions var list = ["Resume", "Résumé","੉۱ࢲ", " " ]; list.forEach((s) => print(s.substring(0, 3))); > dart main.dart Res Ré ੉۱ࢲ var list = ["Resume", "Résumé","੉۱ࢲ", " " ]; list.forEach((s) => print(s.characters.take(3))); > dart main.dart Res Rés ੉۱ࢲ Technical Preview
23. Da< Nouveautés & futur Extensions Caractères complexes Posez vos questions sur Cu?er.paris/questions
24. Da< Nouveautés & futur Extensions Caractères complexes Dart non-nullable Posez vos questions sur Cu?er.paris/questions
25. null safety Posez vos questions sur Cu?er.paris/questions void main() { Person('Larry', birthday: DateTime(1973, 03, 26)).describe(); Person('Sergey').describe(); } class Person { String firstName; DateTime birthday; Person(this.firstName, {this.birthday}); void describe() { print(firstName); int birthyear = birthday?.year; print('Born ${DateTime.now().year - birthyear} years ago'); } } Preview
26. null safety Posez vos questions sur Cu?er.paris/questions void main() { Person('Larry', birthday: DateTime(1973, 03, 26)).describe(); Person('Sergey').describe(); } class Person { String firstName; DateTime birthday; Person(this.firstName, {this.birthday}); void describe() { print(firstName); int birthyear = birthday?.year; print('Born ${DateTime.now().year - birthyear} years ago'); } } Preview Changements : - variables classiques T doivent être déXnies - variables optionnelles explicitement déXnies comme telles : T? - analyseur pour indiquer les cas d'erreurs
27. null safety Posez vos questions sur Cu?er.paris/questions void main() { Person('Larry', birthday: DateTime(1973, 03, 26)).describe(); Person('Sergey').describe(); } class Person { String firstName; DateTime birthday; Person(this.firstName, {this.birthday}); void describe() { print(firstName); int birthyear = birthday?.year; print('Born ${DateTime.now().year - birthyear} years ago'); } } Preview
28. null safety Posez vos questions sur Cu?er.paris/questions Preview Changements : - variables classiques T doivent être déXnies - variables optionnelles explicitement déXnies comme telles : T? - analyseur pour indiquer les cas d'erreurs void main() { Person('Larry', birthday: DateTime(1973, 03, 26)).describe(); Person('Sergey').describe(); } class Person { String firstName; DateTime? birthday; Person(this.firstName, {this.birthday}); void describe() { print(firstName); int? birthyear = birthday?.year; if (birthyear != null) print('Born ${DateTime.now().year - birthyear} years ago'); } }
29. Da< Nouveautés & futur Extensions Caractères complexes Dart non-nullable Posez vos questions sur Cu?er.paris/questions
30. Flu?er
31. Flu?er Les nouveautés du FluZer Interact Nouvelle version stable Version 1.12 v1.12.13+ho\ix.7 Posez vos questions sur Cu?er.paris/questions
32. Flu?er Mobile
33. 1.12 Nouveautés Flu7er Mobile Librairie Cupertino et iOS 13 Posez vos questions sur Cu?er.paris/questions
34. iOS SuppoO du mode sombre pour tous les widgets Cupe<ino Posez vos questions sur Cu?er.paris/questions Mode sombre
35. iOS Cupe<inoContextMenu Posez vos questions sur Cu?er.paris/questions Nouveaux Widgets Cupe<inoSlidingSegmentedControl
36. 1.12 Nouveautés Flu7er Mobile Librairie Cupertino et iOS 13 Posez vos questions sur Cu?er.paris/questions
37. 1.12 Nouveautés Flu7er Mobile google_fonts Librairie Cupertino et iOS 13 Posez vos questions sur Cu?er.paris/questions
38. google_fonts Posez vos questions sur Cu?er.paris/questions Beta
39. 1.12 Nouveautés Flu7er Mobile Add-to-App google_fonts Librairie Cupertino et iOS 13 Posez vos questions sur Cu?er.paris/questions
40. Add-to-App Posez vos questions sur Cu?er.paris/questions Pour ajouter une paOie FluZer aux applications natives myButton.setOnClickListener { startActivity( FlutterActivity.createDefaultIntent(this) ) } func showFlutterModule() { let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine let flutterVC = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil) present(flutterVC, animated: true, completion: nil } Kotlin Swib
41. Add-to-App Posez vos questions sur Cu?er.paris/questions Exemple EyeEm medium.com/cuZer- community/eyeem- cuZered-3ad12efc8b16
42. 1.12 Nouveautés Flu7er Mobile Add-to-App google_fonts Librairie Cupertino et iOS 13 Posez vos questions sur Cu?er.paris/questions
43. 1.12 Nouveautés Flu7er Mobile Add-to-App google_fonts Librairie Cupertino et iOS 13 Optimisations pour Android Posez vos questions sur Cu?er.paris/questions
44. Flu?er Desktop
45. Flu?er Desktop Posez vos questions sur Cu?er.paris/questions Améliorations associées • Meilleure intégration des guidelines Material Design (notion de densité) • Amélioration de l’expérience Desktop : • Scroll au clavier • Survol de widgets • Raccourcis clavier • Gestion du focus grâce au clavier
46. Flu?er Desktop Posez vos questions sur Cu?er.paris/questions Qu’en est-il de Windows et Linux ? • Toujours en Technical Preview « We do not intend to focus on other pla4orms in 2020, such as Windows. We also don't intend to provide desktop- equivalents of the CupeJino widget library this year. » hZps://github.com/cuZer/cuZer/wiki/Roadmap
47. Les outils
48. Outils pour Flu?er Posez vos questions sur Cu?er.paris/questions Da:Pad • SuppoO de FluZer (documentation, formaZage, etc.) • Libs CupeOino et Material • N’impoOe qui peut créer un Gist et l’impoOer dans DaOPad • Intégration possible de DaOPad sur une page web
49. Outils pour Flu?er Posez vos questions sur Cu?er.paris/questions Hot UI • Accessible dans FluZer Outline • ModiXcation en temps réel de l’arbre des widgets • Lecture et édition des propriétés des widgets • ModiXcation automatique du code associé
50. Outils pour Flu?er Posez vos questions sur Cu?er.paris/questions Layout Explorer • Accessible dans les DaO Dev Tools • ModiXcation en temps réel de l’arbre des widgets • Une vue plus orientée Layout • Lecture et édition des propriétés des widgets • ModiXcation automatique du code associé
51. Outils pour Flu?er Posez vos questions sur Cu?er.paris/questions Flu7er Octopus • Uniquement sur VSCode • Permet de debug jusqu’à 8 devices en même temps • Chaque device a : • Son propre état • Sa propre Stack de debug
52. Packages
53. Packages Posez vos questions sur Cu?er.paris/questions VeriEed Publishers • Possibilité d’avoir le statut de « VeriXed Publisher »
54. Packages Posez vos questions sur Cu?er.paris/questions VeriEed Publishers • Un VeriXed Publisher est en fait un nom de domaine qui vous authentiXe
55. Packages Posez vos questions sur Cu?er.paris/questions VeriEed Publishers Avantages : • Améliore la conXance dans les publishers • Meilleure administration des packages • Une seule Team avec X admins • Bien plus simple de gérer les droits • Possibilité d’ajouter des packages existants dans un compte VeriXed Publisher
56. Packages Posez vos questions sur Cu?er.paris/questions Flu7er Favorites • Programme identiXant les packages favoris de Google
57. Packages Posez vos questions sur Cu?er.paris/questions Flu7er Favorites • Les éléments pris en compte pour être FluZer Favorite : • Le score du package • Une licence permissive • Le « version tag » sur Github en accord avec pub.dev • des fonctionnalités Xnies et non pas « beta » ou autre • Le fait d’être VeriXed Publisher • Une bonne documentation, API de qualité, etc. • Un bon compoOement à l’éxecution (CPU, allocation mémoire, etc.) • Des dépendances de bonne qualité également
58. Packages Posez vos questions sur Cu?er.paris/questions Flu7er Favorites • Comment candidater au statut de FluZer Favorite ? FluZer Ecosystem CommiZee • Pooja Bhaumik • Hillel Coren • Thea Flowers • Simon Lighsoot • Lara MaOín • Chris Sells (commiZee chair) • Michael Thomsen • Diego Velasquez • Kyle Wang csells@google.com
59. Les outils de la communauté
60. Les outils de la communauté Posez vos questions sur Cu?er.paris/questions Génération de code FluZer à paOir de maqueZes Adobe XD Supernova
61. Les outils de la communauté Posez vos questions sur Cu?er.paris/questions Génération de code FluZer à paOir de maqueZes Adobe XD Supernova • Pas encore disponible • Possibilité de s’inscrire en tant qu’Early Adopter hZps://xd.adobelanding.com/xd-to-cuZer/ • Code généré très approximatif • Semble devoir être pris en main
62. Les outils de la communauté Posez vos questions sur Cu?er.paris/questions Codemagic - Remote Mac • Extension VSCode • Utilisation d’une machine MacOS à distance
63. Les outils de la communauté Posez vos questions sur Cu?er.paris/questions Nouvelle Flu7er Gallery hZps://cuZer.github.io/samples/#/
64. Flu?er Web Slides sur bit.ly/Cu?er-paris-web
65. Un CFP est disponible ! flutter.paris/cfp
67. 02 juin 2020 Impasse Lamier (11ème)
68. 02 juin 2020 1 journée avec 2 tracks Billets à paOir de 35€
69. Nu7er-conf.paris