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.

081b06f3d680a58d45bf672c0dfa0a6a?s=128

Edouard Marquez

March 20, 2019
Tweet

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