Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vos slides en Flutter

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.

Edouard Marquez

March 20, 2019
Tweet

More Decks by Edouard Marquez

Other Decks in Technology

Transcript

  1. Les outils existants Facilité de mise en oeuvre LaTeX /

    Beamer GitPitch, Reveal.js… Prizi, Ludus, Google Slides… Powerpoint, Keynote, LibreOffice…
  2. Pourquoi Flutter ? class MyWidget extends StatelessWidget { @override Widget

    build(BuildContext context) { return Text('Bienvenue !'); } }
  3. 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
  4. 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
  5. 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
  6. Comment utiliser Flutter Slides ? (1/2) 1 Créer un nouveau

    dossier 2 Récupérer le projet flutter/slideplayer
  7. 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
  8. 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
  9. Comment utiliser Flutter Slides ? (2/2) Lancer Xcode : open

    slideplayer/macos/FlutterSlides.xcodeproj
  10. 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)
  11. JSON : Les couleurs 0x Sous la forme AARRGGBB Ex:

    0xFF001122 # Sous la forme RRGGBBAA Ex: #001122FF { "fill": "0xFFFF0000" "fill": "#FF0000FF" }
  12. 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": [] }
  13. 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": [] }
  14. 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": [] }
  15. 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": [] }
  16. JSON : Les slides { "slides": [ { "bg_color": "0xAARRGGBB",

    "advancement_count": 4, "content": [] } ] }
  17. JSON : Les slides { "slides": [ { "bg_color": "0xAARRGGBB",

    "advancement_count": 4, "content": [] } ] }
  18. JSON : Les slides { "slides": [ { "bg_color": "0xAARRGGBB",

    "advancement_count": 4, "content": [] } ] }
  19. 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 }
  20. JSON : Le Content Object "Rect" { "type": "rect", "height":

    540, "width": 960, "x": 0, "y": 0, "fill": "0xFFFF0000" }
  21. JSON : Le Content Object "Rect" { "type": "rect", "height":

    540, "width": 960, "x": 0, "y": 0, "fill": "0xFFFF0000" }
  22. 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 }
  23. 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 }
  24. JSON : Le Content Object "Image" { "type": "image", "x":

    688.0, "y": 86.0, "height": 908.0, "width": 544.0, "file": "images/misc/toto.webp" }
  25. JSON : Le Content Object "Image" { "type": "image", "x":

    688.0, "y": 86.0, "height": 908.0, "width": 544.0, "file": "images/toto.webp" }
  26. 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" }
  27. 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" }
  28. 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 } }
  29. 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" }
  30. 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));
  31. 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,
  32. 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".
  33. 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" }
  34. { "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
  35. 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
  36. 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
  37. 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é