SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Downloaden Sie, um offline zu lesen
Flutter SDK
Développement mobile multiplateforme
Erick Ghaumez,
Consultant Front-end / Formateur

http:/rxla.bz
flutter.io
• SDK open-source développé par Google

• Objectif : faciliter et accélérer le développement de
belles applications mobiles performantes ( iOS et
Android, et peut être plus … )
Points forts
• Outillage / Developper Experience

• Orienté UI

• Architecture « reactive » basée sur widgets

• Implémentation soignée de Material Design

• Moteur Graphique « maison »

• Dart 

• Accès aux APIs natives

• Performances…
Architecture
Outils
• Flutter CLI

$ git clone https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATH
• flutter doctor, flutter create, flutter run, … 

• IntelliJ plugin ( ou VS Code )

•Hot reload
• Dart Observatory
Orienté UI
• Une application Flutter est un arbre de widgets
« réactifs »  ( composants )

• Le fonctionnement des widgets est inspiré de React

• Stateless / Stateful 

• Stateful : setState(( )=>… ) … provoque un build( )
Layout facile
• Tout est widget :
• Row, Column, Stack

• Container, Padding, Center,

• Text, RaisedButton, FlatButton, IconButton, RichText

• ListView, GridView, Table

• …
Material design
• Catalogue : https://flutter.io/widgets/
…
+ Cupertino widgets : https://flutter.io/widgets/cupertino/
Custom UIs
• L’utilisation de Material design est facultatif, Flutter
permet de créer facilement ses propres ( styles de )
composants

• Inkwell, GestureDetector

• CustomPainter
Dart
• Un langage solide, moderne et familier



https://www.dartlang.org/guides/language/language-tour

https://dartpad.dartlang.org

• OO, typage statique ( Flutter / Dart 2.0 ), enum, Generics, mixins…

• Asynchronie : Future, async / await

• Streams ( ± RxJS Observables )

• …

• Des cores librairies très riches ( io, async, collection… )

• Un outillage efficace : pub, analyzer, observatory, stagehand, dartfmt…
Dart : sucres syntaxiques
• Cascades

• get / set

• Fonctions

• paramètres nommés

• One liner

• typedef

• Constructeurs nommés, constructeurs « Factory »  

• …
Architecture
API natives et plugins
• Un système de canaux
permet à Flutter/Dart de
facilement communiquer avec
la plateforme native

• https://rxlabz.github.io/dart/
flutter/2017/06/15/sytody-
flutter-natif-plugins.html
Liens
• https://play.google.com/store/apps/details?id=io.flutter.gallery

• https://flutter.io/setup/

• Exemples : https://github.com/flutter/flutter/tree/master/
examples

• Awesome Flutter : https://github.com/Solido/awesome-
flutter/blob/master/README.md

• https://docs.flutter.io

• Package & plugins : https://pub.dartlang.org/flutter

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye Dieng
 
Android-Tp3: fragments et menus
Android-Tp3: fragments et menusAndroid-Tp3: fragments et menus
Android-Tp3: fragments et menusLilia Sfaxi
 
Presentation du framework symfony
Presentation du framework symfonyPresentation du framework symfony
Presentation du framework symfonyJeremy Gachet
 
Rapport PFE Application Web Mobiles belwafi bilel
Rapport PFE Application Web Mobiles belwafi bilelRapport PFE Application Web Mobiles belwafi bilel
Rapport PFE Application Web Mobiles belwafi bilelBelwafi Bilel
 
Cours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieCours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieMohammed Amine Mostefai
 
Chp3 - Architecture Logicielle des Applications Mobiles
Chp3 - Architecture Logicielle des Applications MobilesChp3 - Architecture Logicielle des Applications Mobiles
Chp3 - Architecture Logicielle des Applications MobilesLilia Sfaxi
 
Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Ben Ahmed Zohra
 
Chp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement MobileChp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement MobileLilia Sfaxi
 
PFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignementPFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignementNassim Bahri
 
Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...Ramzi Noumairi
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...ENSET, Université Hassan II Casablanca
 
Présentation resto
Présentation restoPrésentation resto
Présentation restoMehdi Labidi
 
Ma présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebMa présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebHarrathi Mohamed
 
Rapport application chat
Rapport application chatRapport application chat
Rapport application chatTbatou sanae
 

Was ist angesagt? (20)

Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Android-Tp3: fragments et menus
Android-Tp3: fragments et menusAndroid-Tp3: fragments et menus
Android-Tp3: fragments et menus
 
Presentation du framework symfony
Presentation du framework symfonyPresentation du framework symfony
Presentation du framework symfony
 
Rapport PFE Application Web Mobiles belwafi bilel
Rapport PFE Application Web Mobiles belwafi bilelRapport PFE Application Web Mobiles belwafi bilel
Rapport PFE Application Web Mobiles belwafi bilel
 
Cours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieCours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vie
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
Chp3 - Architecture Logicielle des Applications Mobiles
Chp3 - Architecture Logicielle des Applications MobilesChp3 - Architecture Logicielle des Applications Mobiles
Chp3 - Architecture Logicielle des Applications Mobiles
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...
 
Chp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement MobileChp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement Mobile
 
PFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignementPFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignement
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Présentation resto
Présentation restoPrésentation resto
Présentation resto
 
Ma présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebMa présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site Web
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Rapport application chat
Rapport application chatRapport application chat
Rapport application chat
 

Ähnlich wie Développement mobile multi-plateforme avec Flutter

ParisfxLab - Artforge, by HD3D
ParisfxLab - Artforge, by HD3DParisfxLab - Artforge, by HD3D
ParisfxLab - Artforge, by HD3DFrançois Hanat
 
Tech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobilesTech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobilesMichael Laguerre
 
Adama Coulibaly.pptx
Adama Coulibaly.pptxAdama Coulibaly.pptx
Adama Coulibaly.pptxIdrissaDembl
 
Javascript & tools
Javascript & toolsJavascript & tools
Javascript & toolsSlim Soussi
 
Développement d'un moteur de recherche avec Zend Search
Développement d'un moteur de recherche avec Zend SearchDéveloppement d'un moteur de recherche avec Zend Search
Développement d'un moteur de recherche avec Zend SearchRobert Viseur
 
Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent Biret
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantHugo Hamon
 
Acquia et Arte : Drupal Camp Paris 2013
Acquia et Arte : Drupal Camp Paris 2013Acquia et Arte : Drupal Camp Paris 2013
Acquia et Arte : Drupal Camp Paris 2013Cyril Reinhard
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsThomas Bassetto
 
Decouvrez CreateJS
Decouvrez CreateJSDecouvrez CreateJS
Decouvrez CreateJSFCHAPLIN
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...ENSIBS
 
introAndroid_2023_V6.5.2pp1-162.pdf
introAndroid_2023_V6.5.2pp1-162.pdfintroAndroid_2023_V6.5.2pp1-162.pdf
introAndroid_2023_V6.5.2pp1-162.pdfRihabBENLAMINE
 
Arte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webArte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webAcquia
 
DevoxxFR Présentation des portails en 2014
DevoxxFR Présentation des portails en 2014DevoxxFR Présentation des portails en 2014
DevoxxFR Présentation des portails en 2014Stéphane Liétard
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applicationsgoldoraf
 

Ähnlich wie Développement mobile multi-plateforme avec Flutter (20)

Hello xcode 4 v2
Hello xcode 4 v2Hello xcode 4 v2
Hello xcode 4 v2
 
Hello Xcode 4 v2
Hello Xcode 4 v2Hello Xcode 4 v2
Hello Xcode 4 v2
 
ParisfxLab - Artforge, by HD3D
ParisfxLab - Artforge, by HD3DParisfxLab - Artforge, by HD3D
ParisfxLab - Artforge, by HD3D
 
Tech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobilesTech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobiles
 
Adama Coulibaly.pptx
Adama Coulibaly.pptxAdama Coulibaly.pptx
Adama Coulibaly.pptx
 
Javascript & tools
Javascript & toolsJavascript & tools
Javascript & tools
 
Développement d'un moteur de recherche avec Zend Search
Développement d'un moteur de recherche avec Zend SearchDéveloppement d'un moteur de recherche avec Zend Search
Développement d'un moteur de recherche avec Zend Search
 
Tizen sdk-solutionslinux-20130529
Tizen sdk-solutionslinux-20130529Tizen sdk-solutionslinux-20130529
Tizen sdk-solutionslinux-20130529
 
Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Acquia et Arte : Drupal Camp Paris 2013
Acquia et Arte : Drupal Camp Paris 2013Acquia et Arte : Drupal Camp Paris 2013
Acquia et Arte : Drupal Camp Paris 2013
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
 
Decouvrez CreateJS
Decouvrez CreateJSDecouvrez CreateJS
Decouvrez CreateJS
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Universitélang scala tools
Universitélang scala toolsUniversitélang scala tools
Universitélang scala tools
 
introAndroid_2023_V6.5.2pp1-162.pdf
introAndroid_2023_V6.5.2pp1-162.pdfintroAndroid_2023_V6.5.2pp1-162.pdf
introAndroid_2023_V6.5.2pp1-162.pdf
 
Arte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webArte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes web
 
DevoxxFR Présentation des portails en 2014
DevoxxFR Présentation des portails en 2014DevoxxFR Présentation des portails en 2014
DevoxxFR Présentation des portails en 2014
 
HTML5
HTML5HTML5
HTML5
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 

Kürzlich hochgeladen

webinaire eBIS n°9 La génétique du Méthane_02_20240321_SFresco_Methabreed.pdf
webinaire eBIS n°9 La génétique du Méthane_02_20240321_SFresco_Methabreed.pdfwebinaire eBIS n°9 La génétique du Méthane_02_20240321_SFresco_Methabreed.pdf
webinaire eBIS n°9 La génétique du Méthane_02_20240321_SFresco_Methabreed.pdfInstitut de l'Elevage - Idele
 
webinaire eBIS n°9 La génétique du Méthane_01_20240321_DBoichard_contexte.pdf
webinaire eBIS n°9 La génétique du Méthane_01_20240321_DBoichard_contexte.pdfwebinaire eBIS n°9 La génétique du Méthane_01_20240321_DBoichard_contexte.pdf
webinaire eBIS n°9 La génétique du Méthane_01_20240321_DBoichard_contexte.pdfInstitut de l'Elevage - Idele
 
rapport stage OCP : Elaboration plan des machines : La machine stockeuse et ...
rapport stage OCP : Elaboration plan des machines :  La machine stockeuse et ...rapport stage OCP : Elaboration plan des machines :  La machine stockeuse et ...
rapport stage OCP : Elaboration plan des machines : La machine stockeuse et ...NiHad27
 
webinaire eBIS n°9 La génétique du Méthane_03_20240321_JPromp_presentation_Mé...
webinaire eBIS n°9 La génétique du Méthane_03_20240321_JPromp_presentation_Mé...webinaire eBIS n°9 La génétique du Méthane_03_20240321_JPromp_presentation_Mé...
webinaire eBIS n°9 La génétique du Méthane_03_20240321_JPromp_presentation_Mé...Institut de l'Elevage - Idele
 
QCM Réseaux informatique V19.02.2017.pdf
QCM Réseaux informatique V19.02.2017.pdfQCM Réseaux informatique V19.02.2017.pdf
QCM Réseaux informatique V19.02.2017.pdfAyoub893663
 
2022-PRESENTATION DE PROJET FIN D'ETUDE-REHOUMA BASSEM.pptx
2022-PRESENTATION DE PROJET FIN D'ETUDE-REHOUMA BASSEM.pptx2022-PRESENTATION DE PROJET FIN D'ETUDE-REHOUMA BASSEM.pptx
2022-PRESENTATION DE PROJET FIN D'ETUDE-REHOUMA BASSEM.pptxBassamRhouma
 

Kürzlich hochgeladen (6)

webinaire eBIS n°9 La génétique du Méthane_02_20240321_SFresco_Methabreed.pdf
webinaire eBIS n°9 La génétique du Méthane_02_20240321_SFresco_Methabreed.pdfwebinaire eBIS n°9 La génétique du Méthane_02_20240321_SFresco_Methabreed.pdf
webinaire eBIS n°9 La génétique du Méthane_02_20240321_SFresco_Methabreed.pdf
 
webinaire eBIS n°9 La génétique du Méthane_01_20240321_DBoichard_contexte.pdf
webinaire eBIS n°9 La génétique du Méthane_01_20240321_DBoichard_contexte.pdfwebinaire eBIS n°9 La génétique du Méthane_01_20240321_DBoichard_contexte.pdf
webinaire eBIS n°9 La génétique du Méthane_01_20240321_DBoichard_contexte.pdf
 
rapport stage OCP : Elaboration plan des machines : La machine stockeuse et ...
rapport stage OCP : Elaboration plan des machines :  La machine stockeuse et ...rapport stage OCP : Elaboration plan des machines :  La machine stockeuse et ...
rapport stage OCP : Elaboration plan des machines : La machine stockeuse et ...
 
webinaire eBIS n°9 La génétique du Méthane_03_20240321_JPromp_presentation_Mé...
webinaire eBIS n°9 La génétique du Méthane_03_20240321_JPromp_presentation_Mé...webinaire eBIS n°9 La génétique du Méthane_03_20240321_JPromp_presentation_Mé...
webinaire eBIS n°9 La génétique du Méthane_03_20240321_JPromp_presentation_Mé...
 
QCM Réseaux informatique V19.02.2017.pdf
QCM Réseaux informatique V19.02.2017.pdfQCM Réseaux informatique V19.02.2017.pdf
QCM Réseaux informatique V19.02.2017.pdf
 
2022-PRESENTATION DE PROJET FIN D'ETUDE-REHOUMA BASSEM.pptx
2022-PRESENTATION DE PROJET FIN D'ETUDE-REHOUMA BASSEM.pptx2022-PRESENTATION DE PROJET FIN D'ETUDE-REHOUMA BASSEM.pptx
2022-PRESENTATION DE PROJET FIN D'ETUDE-REHOUMA BASSEM.pptx
 

Développement mobile multi-plateforme avec Flutter

  • 1. Flutter SDK Développement mobile multiplateforme Erick Ghaumez, Consultant Front-end / Formateur http:/rxla.bz
  • 2. flutter.io • SDK open-source développé par Google • Objectif : faciliter et accélérer le développement de belles applications mobiles performantes ( iOS et Android, et peut être plus … )
  • 3. Points forts • Outillage / Developper Experience • Orienté UI • Architecture « reactive » basée sur widgets • Implémentation soignée de Material Design • Moteur Graphique « maison » • Dart • Accès aux APIs natives • Performances…
  • 5. Outils • Flutter CLI
 $ git clone https://github.com/flutter/flutter.git $ export PATH=`pwd`/flutter/bin:$PATH • flutter doctor, flutter create, flutter run, … • IntelliJ plugin ( ou VS Code ) •Hot reload • Dart Observatory
  • 6. Orienté UI • Une application Flutter est un arbre de widgets « réactifs »  ( composants ) • Le fonctionnement des widgets est inspiré de React • Stateless / Stateful • Stateful : setState(( )=>… ) … provoque un build( )
  • 7. Layout facile • Tout est widget : • Row, Column, Stack • Container, Padding, Center, • Text, RaisedButton, FlatButton, IconButton, RichText • ListView, GridView, Table • …
  • 8. Material design • Catalogue : https://flutter.io/widgets/ … + Cupertino widgets : https://flutter.io/widgets/cupertino/
  • 9. Custom UIs • L’utilisation de Material design est facultatif, Flutter permet de créer facilement ses propres ( styles de ) composants • Inkwell, GestureDetector • CustomPainter
  • 10. Dart • Un langage solide, moderne et familier
 
 https://www.dartlang.org/guides/language/language-tour
 https://dartpad.dartlang.org • OO, typage statique ( Flutter / Dart 2.0 ), enum, Generics, mixins… • Asynchronie : Future, async / await • Streams ( ± RxJS Observables ) • … • Des cores librairies très riches ( io, async, collection… ) • Un outillage efficace : pub, analyzer, observatory, stagehand, dartfmt…
  • 11. Dart : sucres syntaxiques • Cascades • get / set • Fonctions • paramètres nommés • One liner • typedef • Constructeurs nommés, constructeurs « Factory »   • …
  • 13. API natives et plugins • Un système de canaux permet à Flutter/Dart de facilement communiquer avec la plateforme native • https://rxlabz.github.io/dart/ flutter/2017/06/15/sytody- flutter-natif-plugins.html
  • 14. Liens • https://play.google.com/store/apps/details?id=io.flutter.gallery • https://flutter.io/setup/ • Exemples : https://github.com/flutter/flutter/tree/master/ examples • Awesome Flutter : https://github.com/Solido/awesome- flutter/blob/master/README.md • https://docs.flutter.io • Package & plugins : https://pub.dartlang.org/flutter