Vos slides en Flutter

Au mois de décembre, Google a organisé un événement au cours duquel la première version stable de Flutter a été annoncée. L’ensemble des slides qui ont été projetés n’étaient pas réalisés avec Keynote ou Powerpoint, mais bien une application Flutter.

Cette dernière est opensource depuis quelques semaines. Nous verrons ce qu’elle est capable de réaliser… mais aussi ce qu’il lui manque, dans la mesure où le projet est encore très jeune.

Transcript

1. Vos slides en Flutter Flutter Paris
2. Les outils existants Facilité de mise en oeuvre LaTeX / Beamer GitPitch, Reveal.js… Prizi, Ludus, Google Slides… Powerpoint, Keynote, LibreOffice…
3. Et pourquoi pas en Flutter ?
4. Pourquoi Flutter ? Tout est un Widget “ “
5. Pourquoi Flutter ? class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Bienvenue !'); } }
6. Pourquoi Flutter ?
7. Solution 1 : Chrome OS Support d'Android Similaire à une application classique Ecran externe + plein écran Géré nativement par l'OS Clavier (changer de slide) Physique ou virtuel (mode tablette) Conception facilitée ChromeOS gère les applications Linux
8. Quels widgets utiliser ? RawKeyboardListener Ecouter les appuis sur les touches du clavier
9. Démo : présentation du projet
10. Les limites de la solution Version très simplifiée Fonctionnalités supplémentaires à dév. Un seul écran Duplication de l'écran obligatoire Partage limité Peu pratique de partager une apk
11. Solution 2 : le projet Flutter Slides
12. Utilisé lors du Flutter Live
13. Conçu par Very Good Ventures
14. Les fonctionnalités de Flutter Slides Disponible sur GitHub flutter/slideplayer En partie paramétrable Grâce à un fichier JSON externe Compatible desktop Via le Flutter Desktop Embedding Panneau d'aperçu Visualiser et changer de slide Animations intégrées Pas de travail supplémentaire "Partageable" Sous la forme d'un binaire
15. Comment l'installer ?
16. Comment utiliser Flutter Slides ? (1/2) 1 Créer un nouveau dossier
17. Comment utiliser Flutter Slides ? (1/2) 1 Créer un nouveau dossier 2 Récupérer le projet flutter/slideplayer
18. Comment utiliser Flutter Slides ? (1/2) 1 Créer un nouveau dossier 2 3 Récupérer le projet flutter/flutter-desktop -embedding Récupérer le projet flutter/slideplayer
19. Comment utiliser Flutter Slides ? (1/2) 1 Créer un nouveau dossier 2 3 Récupérer le projet flutter/flutter-desktop -embedding 4 Récupérer la branche dev de flutter/flutter Récupérer le projet flutter/slideplayer Arborescence : - flutter - flutter-desktop-embedding - slideplayer
20. Comment utiliser Flutter Slides ? (2/2) Lancer Xcode : open slideplayer/macos/FlutterSlides.xcodeproj
21. Démo : présentation de Flutter Slides
22. Le fichier de paramétrage
23. JSON : Support d'un "Hot Reload" Watcher Ecouter les modifications apportées sur les fichiers
24. JSON : Ressources externes Dossier Les ressources doivent obligatoires être dans un dossier external_files Chemin relatif L'emplacement se fait relativement au dossier external_files Assets On peut également faire référence aux assets (= ressources intégrées à l'app)
25. JSON : Les couleurs 0x Sous la forme AARRGGBB Ex: 0xFF001122 # Sous la forme RRGGBBAA Ex: #001122FF { "fill": "0xFFFF0000" "fill": "#FF0000FF" }
26. Contenu du fichier JSON { "slide_width": 1920.0, "slide_height": 1080.0, "font_scale_factor": 1920.0, "project_bg_color": "0xFFF0F0F0", "project_slide_list_bg_color": "0xFFDDDDDD", "project_slide_list_highlight_color": "0xFF40C4FF", "show_debug_containers": false, "animate_slide_transitions": false, "auto_advance": false, "auto_advance_duration_millis": 500, "slides": [] }
27. Contenu du fichier JSON { "slide_width": 1920.0, "slide_height": 1080.0, "font_scale_factor": 1920.0, "project_bg_color": "0xFFF0F0F0", "project_slide_list_bg_color": "0xFFDDDDDD", "project_slide_list_highlight_color": "0xFF40C4FF", "show_debug_containers": false, "animate_slide_transitions": false, "auto_advance": false, "auto_advance_duration_millis": 500, "slides": [] }
28. Contenu du fichier JSON { "slide_width": 1920.0, "slide_height": 1080.0, "font_scale_factor": 1920.0, "project_bg_color": "0xFFF0F0F0", "project_slide_list_bg_color": "0xFFDDDDDD", "project_slide_list_highlight_color": "0xFF40C4FF", "show_debug_containers": false, "animate_slide_transitions": false, "auto_advance": false, "auto_advance_duration_millis": 500, "slides": [] }
29. Contenu du fichier JSON { "slide_width": 1920.0, "slide_height": 1080.0, "font_scale_factor": 1920.0, "project_bg_color": "0xFFF0F0F0", "project_slide_list_bg_color": "0xFFDDDDDD", "project_slide_list_highlight_color": "0xFF40C4FF", "show_debug_containers": false, "animate_slide_transitions": false, "auto_advance": false, "auto_advance_duration_millis": 500, "slides": [] }
30. JSON : Les slides { "slides": [ { "bg_color": "0xAARRGGBB", "advancement_count": 4, "content": [] } ] }
31. JSON : Les slides { "slides": [ { "bg_color": "0xAARRGGBB", "advancement_count": 4, "content": [] } ] }
32. JSON : Les slides { "slides": [ { "bg_color": "0xAARRGGBB", "advancement_count": 4, "content": [] } ] }
33. JSON : Les Content Object Rect Dessiner un rectangle Label Afficher du texte Image Afficher une image Animations Lottie / Flare / Nima { "type": "rect" "height": 540, "width": 960, "x": 0, "y": 0, "advancement_step": 1 }
34. JSON : Le Content Object "Rect" { "type": "rect", "height": 540, "width": 960, "x": 0, "y": 0, "fill": "0xFFFF0000" }
35. JSON : Le Content Object "Rect" { "type": "rect", "height": 540, "width": 960, "x": 0, "y": 0, "fill": "0xFFFF0000" }
36. JSON : Le Content Object "Label" { "type": "label", "text": "Hello\nWorld", "x": 0, "y": 0, "height": 1080, "width": 1920, "font_size": 54.0, "font_color": "#1B364Fff", "align": "center", "text_align": "center", "line_height": 0.9, "letter_spacing": -1, "italic": false, "strike_through": false }
37. JSON : Le Content Object "Label" { "type": "label", "text": "Hello\nWorld", "x": 0, "y": 0, "height": 1080, "width": 1920, "font_size": 54.0, "font_color": "#1B364Fff", "align": "center", "text_align": "center", "line_height": 0.9, "letter_spacing": -1, "italic": false, "strike_through": false }
38. JSON : Le Content Object "Image" { "type": "image", "x": 688.0, "y": 86.0, "height": 908.0, "width": 544.0, "file": "images/misc/toto.webp" }
39. JSON : Le Content Object "Image" { "type": "image", "x": 688.0, "y": 86.0, "height": 908.0, "width": 544.0, "file": "images/toto.webp" }
40. JSON : Le Content Object "Animation" { "type": "lottie_animation", "fill": "0xFFFF0000", "x": 710.0, "y": 290.0, "height": 500.0, "width": 500.0, "file": "lottie.json" }
41. JSON : Le Content Object "Animation" { "type": "lottie_animation", "fill": "0xFFFF0000", "x": 710.0, "y": 290.0, "height": 500.0, "width": 500.0, "file": "lottie.json" }
42. Les animations
43. Les animations { "type": "label", "text": "Dart 2.1", "animation": { "curve": "easeInOut", "duration_in_milliseconds": 700, "delay_in_milliseconds": 1000, "opacity_start": 0.0, "opacity_end": 1.0, "offset_x": 40.0, "offset_y": 0.0, "rotation": 0.0, "scale_start": 0.5, "scale_end": 1.0 } }
44. Utiliser des constantes { "jumbo_slide_font_size": 100.0, "jumbo_slide_font_color": "\"0xFF1B364F\"", "jumbo_slide_line_height": 0.9, "jumbo_slide_text_align": "\"center\"" } replace_values.json { "type": "label", "text": "Advancement Examples", "align": "centerLeft", "x": 120.0, "y": 60.0, "height": 200.0, "width": 1920.0, "text_align": "@replace/jumbo_slide_text_align", "font_size": "@replace/jumbo_slide_font_size", "font_color": "@replace/jumbo_slide_font_color" }
45. Démo : reproduire le slide en JSON
46. JSON : Le Content Object custom 1 Créer un nouveau Widget Ex: MyWidget
47. JSON : Le Content Object custom 1 Créer un nouveau Widget Ex: MyWidget 2 S'enregistrer dans le SlideContentFactory void register(String type, Constructor constructor) register('monwidget', (params) => MyWidget(contentMap: params.contentMap));
48. JSON : Le Content Object custom 1 Créer un nouveau Widget Ex: MyWidget 3 Modifier le fichier JSON de paramétrage 2 S'enregistrer dans le SlideContentFactory { "type": "monwidget", "x": 710.0, "y": 290.0,
49. Déboguer l'application
50. Comment déboguer Flutter Slides ? (1/2)
51. Comment déboguer Flutter Slides ? (1/2)
52. Comment déboguer Flutter Slides ? (2/2) Attacher Flutter au processus : flutter attach --device-id=flutter-tester --debug-port=51987 Syncing files to device Flutter test device... 1,820ms To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
53. Comment déboguer Flutter Slides dans VS Code { "name": "Flutter Desktop Attach", "request": "attach", "deviceId": "flutter-tester", "observatoryUri": "http://127.0.0.1:51987/", "type": "dart" }
54. { "type": "monwidget", "x": 710.0, "y": 290.0, "height": 500.0, "width": 500.0, "file": "lottie.json" } Démo : reproduire la carte affichant du code
55. Et maintenant ? Fonctionne & stable A vous de jouer ! Installation compliquée Devrait être réglé en 2019 Partage limité Peu pratique de partager un binaire
56. Et maintenant ? Material Cupertino Widgets Rendering Fondation Animation Painting Gestures Framework (Dart) Flutter Web Engine dart:ui Projet uniquement annoncé et le choix de la solution est en cours 
 (HTML+CSS+Canvas ou CSS Paint API) Projet HummingBird
57. Solution 3 : le projet Flutter Slides… sur ChromeOS
58. Qu'en conclure ? Fonctionne Quelle que soit la solution ! Partage limité Peu pratique de partager un binaire Gestion du double écran Non géré (pour le moment) Commentaires sous les slides Non géré
59. Merci ! Questions ? @g123k @FlutterDev