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
   

   View Slide

2. Les outils existants
   Facilité de mise en oeuvre
   LaTeX / Beamer
   GitPitch, Reveal.js…
   Prizi, Ludus,
   
   Google Slides…
   Powerpoint, Keynote,
   
   LibreOffice…
   

   View Slide

3. Et pourquoi
   
   pas en Flutter ?
   

   View Slide

4. Pourquoi Flutter ?
   Tout est un Widget
   “
   “
   

   View Slide

5. Pourquoi Flutter ?
   class MyWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return Text('Bienvenue !');
   }
   }
   

   View Slide

6. Pourquoi Flutter ?
   

   View Slide

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
   

   View Slide

8. Quels widgets utiliser ?
   RawKeyboardListener
   
   Ecouter les appuis sur les
   touches du clavier
   

   View Slide

9. Démo : présentation du projet
   

   View Slide

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
    

    View Slide

11. Solution 2 : le projet Flutter Slides
    

    View Slide

12. Utilisé lors du Flutter Live
    

    View Slide

13. Conçu par Very Good Ventures
    

    View Slide

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
    

    View Slide

15. Comment l'installer ?
    

    View Slide

16. Comment utiliser Flutter Slides ? (1/2)
    1
    Créer un
    
    nouveau dossier
    

    View Slide

17. Comment utiliser Flutter Slides ? (1/2)
    1
    Créer un
    
    nouveau dossier
    2
    Récupérer le projet
    
    flutter/slideplayer
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. Comment utiliser Flutter Slides ? (2/2)
    Lancer Xcode :
    open slideplayer/macos/FlutterSlides.xcodeproj
    

    View Slide

21. Démo : présentation de Flutter Slides
    

    View Slide

22. Le fichier de paramétrage
    

    View Slide

23. JSON : Support d'un "Hot Reload"
    Watcher
    
    Ecouter les modifications
    apportées sur les fichiers
    

    View Slide

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)
    

    View Slide

25. JSON : Les couleurs
    0x
    
    Sous la forme AARRGGBB
    
    Ex: 0xFF001122
    #
    
    Sous la forme RRGGBBAA
    
    Ex: #001122FF
    {
    "fill": "0xFFFF0000"
    "fill": "#FF0000FF"
    }
    

    View Slide

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": []
    }
    

    View Slide

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": []
    }
    

    View Slide

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": []
    }
    

    View Slide

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": []
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    }
    

    View Slide

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

    View Slide

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

    View Slide

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
    }
    

    View Slide

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
    }
    

    View Slide

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"
    }
    

    View Slide

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

    View Slide

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"
    }
    

    View Slide

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"
    }
    

    View Slide

42. Les animations
    

    View Slide

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
    }
    }
    

    View Slide

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"
    }
    

    View Slide

45. Démo : reproduire
    
    le slide en JSON
    

    View Slide

46. JSON : Le Content Object custom
    1
    Créer un
    
    nouveau Widget
    
    Ex: MyWidget
    

    View Slide

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));
    

    View Slide

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,
    

    View Slide

49. Déboguer l'application
    

    View Slide

50. Comment déboguer Flutter Slides ? (1/2)
    

    View Slide

51. Comment déboguer Flutter Slides ? (1/2)
    

    View Slide

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".
    

    View Slide

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"
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

57. Solution 3 : le projet Flutter Slides… sur ChromeOS
    

    View Slide

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é
    

    View Slide

59. Merci !
    
    
    Questions ?
    @g123k @FlutterDev
    

    View Slide