Vos slides en Flutter - Speaker Deck

Slide 1

Slide 1 text

Vos slides en Flutter Flutter Paris

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Et pourquoi pas en Flutter ?

Slide 4

Slide 4 text

Pourquoi Flutter ? Tout est un Widget “ “

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Pourquoi Flutter ?

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Démo : présentation du projet

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Solution 2 : le projet Flutter Slides

Slide 12

Slide 12 text

Utilisé lors du Flutter Live

Slide 13

Slide 13 text

Conçu par Very Good Ventures

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Comment l'installer ?

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Démo : présentation de Flutter Slides

Slide 22

Slide 22 text

Le fichier de paramétrage

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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)

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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 }

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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 }

Slide 37

Slide 37 text

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Les animations

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Démo : reproduire le slide en JSON

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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,

Slide 49

Slide 49 text

Déboguer l'application

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Solution 3 : le projet Flutter Slides… sur ChromeOS

Slide 58

Slide 58 text

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é

Slide 59

Slide 59 text

Merci ! Questions ? @g123k @FlutterDev