SlideShare une entreprise Scribd logo
VEILLE TECHNOLOGIQUE:
FLUTTER et DART
Presenter par: ADIAWIAKOYE Ahmadou
FLUTTER : qu’est ce que c’est ?
01
Flutter est un kit de développement logiciel d'interface utilisateur open-source
créé par Google. Il est utilisé pour développer des applications pour Android, iOS,
Linux, Mac, Windows, Google Fuchsia et le web à partir d'une seule base de code
Quelle est sa version stable actuelle?
02
31 août 2022, édition Flutter Vikings : version 3.3
Donner quelques caractéristiques de FLUTTER
03
1. Base de code unique pour Android et iOS
1. Fonction de rechargement à chaud
1. Open-source et par Google
1. Programmation Dart
quelques particularités de FLUTTER qui permettront
de le choisir parmi tant d’autres outils de son genre.
04
Flutter permet aux développeurs d'écrire du code qui fonctionne sur différentes
plates -formes .
Deux applications différentes peuvent utiliser la même base de code.
En plus de partager le code de l'interface utilisateur, l'interface utilisateur elle-même
est également partageable.
Cela rend la maintenance de la base de code unique beaucoup plus facile par
opposition à différents codes pour différentes plates-formes.
De quoi a-t-on besoin pour programmer avec Flutter
05
1. Systèmes d'exploitation
1. Espace disque
1. Outils (Windows PowerShell 5.0; Git pour Windows 2.x)
Comment installe-t-on FLUTTER ?
05
1. Télécharger le sdk flutter sur ce lien : Windows install | Flutter
1. Extract the zip file and place the contained flutter in the desired installation
location for the Flutter SDK (for example, C:srcflutter).
1. Ajouter flutter aux variables d’environnement
1. Installer l’extension flutter dans l’éditeur
Donner les étapes pour créer un projet
FLUTTER avec vs code
06
Commençons par ouvrir Visual Studio Code. Vous arrivez sur la page d’accueil. Fermez la fenêtre
Welcome.
Vous arrivez ensuite sur une fenêtre qui vous indique les différents raccourcis pour les différentes
opérations qui nous intéressent (ouvrir un fichier etc.).
On va ensuite afficher la barre d’accès avec la combinaison de touches « cmd + Shift + P » sur macOS
, « Ctrl + Shift + P » sur Windows.
Dans la barre de recherche, tapez « Flutter new » et sélectionnez ensuite « Flutter : New Application
Project ».
Sélectionnez ensuite un emplacement où l’enregistrer en lui donnant un nom.
Visual Studio Code va créer tout un lot de fichiers sans que vous ayez à cliquer ou taper quoi que ce
soit.
Vous obtenez ainsi un projet comme ci-dessous :
Quelle est la structure de base d’un projet flutter
07
Quelle est la structure de base d’un projet flutter
07
android — Ce dossier contient un projet Android avec une activité qui exécute notre projet Flutter
ios — Ce dossier contient un projet IOS qui exécute notre projet Flutter
Ainsi, Android et iOS sont des dossiers spécifiques à la plate-forme utilisés pour exécuter l'application
sur la plate-forme spécifique.
lib - Dossier contenant les fichiers .dart. C'est le dossier principal de notre projet qui contient les
fichiers que Flutter utilise pour créer notre application.
pubspec.yaml - C'est le fichier qui contient les paramètres de notre projet, vous pouvez également y
ajouter d'autres bibliothèques à votre projet.
Quelle est l’architecture de flutter
08
Flutter est très flexible dans l’organisation d’un projet, il
vous sera alors possible d’utiliser l’architecture de votre
choix .
Quelle est l’architecture d’un projet flutter?
09
Quelle est l’architecture d’un projet flutter?
09
Dans main.dart: la première chose est d’importer le matériel désigné (import
'package:flutter/matériel.dart').
Dans la fonction main on appelle la fonction runApp qui prend en paramètre
MyApp
MyApp : est une classe qui hérite de StatelessWidget; il contient une methode
build qui retourn MaterialApp qui a comme attribue MyHomePage
(MyHomePage étend StatefulWidget) qui a un contenu Scaffold (La classe
Scaffold est un widget extensible qui remplit l'espace disponible ou l'écran.)
Scaffold contient AppBar, center, FloatingActionButton.
AppBar: est un widget qui a un argument de titre qui reçoit le titre
FloatingActionButton: est un widget qui contient les icônes.
Center: il contient une classe column qui reçoit le texte
C’est quoi un widget en FLUTTER ? Citer quelques
exemples de widget.
10
Un widget est tout ce qui compose votre application que ce soit un texte, une image,
un bouton, l’ensemble d’une page ou bien les opérations qui permettent de donner
un résultat.
Exemple:
Text
Row,Column
Stack
Container
Expliquer la notion de Stateless et Stateful widget
en FLUTTER
11
le Stateless widget est utile lorsque la partie de l’interface utilisateur que vous
décrivez ne dépend de rien d’autre que des informations de configuration d’objet et du
BuildContext dans lequel le widget est initialisé.
{Un BuildContext n'est rien d'autre qu'une référence à l'emplacement d'un Widget
dans l'arborescence de tous les Widgets qui sont construits.
En bref, considérez un BuildContext comme la partie de l'arbre Widgets où le Widget
est attaché à cet arbre.
Un BuildContext n'appartient qu'à un seul widget.}
Exemple à l’appui:
Si un widget 'A' a des widgets enfants, le BuildContext du widget 'A' deviendra le
parent BuildContext des enfants directs BuildContexts .
Expliquer la notion de Stateless et Stateful widget
en FLUTTER
11
Le Stateful widget: contrairement au Stateless widget, le Stateful widget contient
l’instance de l’état du composant. Le Stateful widget se compose de deux parties :
l’immutable Statefull widget est l’instance de son état
L'immuabilité est utilisée pour des raisons de performances . Si le widget doit changer,
créez une nouvelle instance configurée en conséquence. Il est plus rapide de vérifier si
deux instances sont identiques que si leur état est le même. C'est l'une des raisons pour
lesquelles const est souvent utilisé.
L'état est l'information synchrone sur un widget qui est créée lorsque vous construisez
un widget. Cet état change tout au long de la durée de vie du widget.
C’est quoi State Management ?
12
State Management
C’est la gestion de l'état, c'est-à-dire l'interface utilisateur se met à jour après chaque
opérations terminées.
Exemple à l’appui
Supposons que nous travaillions sur une application de questionnaire, et dans cette application, l'état
suivant se produit :
Lorsque l'utilisateur s'inscrit pour la première fois, les pages de l'application sont mises à jour en
fonction des préférences de l'utilisateur sélectionnées lors de l'inscription.
Une fois que l'utilisateur entre dans l'application, il reçoit un questionnaire pertinent dans l'application.
Une fois que l'utilisateur a sélectionné un questionnaire, les données relatives à ce test sont mises à jour,
telles que les mauvaises réponses, le temps pris, etc.
Une fois que l'utilisateur a terminé le papier, il reçoit les scores et le classement.
Dans tous ces états, l'interface utilisateur se met à jour à l'aide de nouvelles données.
Pourquoi utiliser les State Management ?
13
State Management : est essentielle dans le développement d'applications
Flutter car elle nous permet de centraliser chaque état de l'interface
utilisateur et de contrôler le flux de données dans l'application.
Quels sont les State Management dans Flutter ?
14
Local State:
Local State n'est rien d'autre que l'état éphémère. Lorsque vous modifiez l'état unique
d'une page comportant des animations ou des contrôles d'interface utilisateur, vous
traitez avec l'état local et nous pouvons utiliser un widget avec état à cette fin.
Shared State
Lorsque vous devez modifier l'état de plusieurs widgets, nous utilisons un Shared State
dans l'application. Cette gestion d'état ne s'appelle rien d'autre que l'état de
l'application uniquement.
C’est quoi le mode de fonctionnement de FLUTTER ?
15
Flutter fonctionne comme un site Web qui permet au framework de reconstruire
automatiquement l'arborescence des widgets. Il permet de visualiser l'effet de vos
modifications, économisant ainsi du temps et contribue également à un développement
rapide.
Donnez et expliquez les widgets spécifiques à la
conception (design) sous FLUTTER?
16
● Les widgets Material Design implémentent le langage de conception Google du
même nom
Le Material Design est un ensemble de règles de design proposées par Google et qui
s'appliquent à l'interface graphique des logiciels et applications
● Les widgets Cupertino imitent le design iOS d’Apple.
Quel est le rôle de DART dans FLUTTER ?
17
Le langage utilisé par Flutter:
Flutter utilise Dart comme langage de programmation. Il s'agit d'un langage
de programmation optimisé pour le client pour les applications rapides sur
plusieurs plates-formes, développé par Google et utilisé pour créer des
applications mobiles, de bureau, backend et Web.
Le language Dart pour application mobile:
Les applications mobiles sont créées à l'aide de Flutter, un cadre de
développement d'applications mobiles open source pour la création
d'applications mobiles.
Quels sont les outils pris en charge par DART ?
18
Darts game
Outils en ligne de commande
IDEs et éditeurs
Quelles sont les bibliothèques fondamentales prises
en charge par DART ?
19
Il existe trois bibliothèques Dart fondamentales:
dart: core
Dart:html
dart: io
Quels sont les services et fonctionnalités fournis par
FLUTTER aux développeurs ?
20
Voici les bases de Flutter et pourquoi l'utiliser pour le développement
d'applications mobiles?
Rechargement à chaud
Haute Performance
Applications natives pour IOS et Android
Développez un code pour deux plates-formes
Donnez des exemples d’IDE prenant en charge
FLUTTER.
21
Les Environnements de développement
Android Studio
IntelliJ
Visual Studio Code
Pourquoi choisir FLUTTER et pas IONIC?
22
Cela dépend de vos besoins. Si vous avez besoin de développer une application hybride
ou PWA, Ionic est ce qu’il vous faut. D’autre part, si vous avez besoin de meilleures
performances, tests, réutilisabilité du code, Flutter est la meilleure option.
Avantages et Inconvénients de Flutter.
23
Quel avenir pour FLUTTER?
24
Cela dépend des développeurs et de leur adoption de ce nouveau langage. Cependant,
lorsque vous avez déjà choisi Flutter comme SDK ou décidé de l'essayer, nous vous
invitons à le faire correctement et à automatiser la création, le test et la distribution de
l'application en mettant en œuvre un outil CI / CD dédié pour Flutter.

Contenu connexe

Tendances

Conception et réalisation d’un Système d’information des étudiants du départe...
Conception et réalisation d’un Système d’information des étudiants du départe...Conception et réalisation d’un Système d’information des étudiants du départe...
Conception et réalisation d’un Système d’information des étudiants du départe...
Ilyas CHAOUA
 
La spécification des besoins
La spécification des besoinsLa spécification des besoins
La spécification des besoinsIsmahen Traya
 
Présentation Flutter
Présentation FlutterPrésentation Flutter
Présentation Flutter
Appstud
 
Rapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learningRapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learning
Rouâa Ben Hammouda
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Raoua Bennasr
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
ENSET, Université Hassan II Casablanca
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-Correction
Lilia Sfaxi
 
Rapport Projet De Fin D'étude de Conception et développement d’une applicatio...
Rapport Projet De Fin D'étude de Conception et développement d’une applicatio...Rapport Projet De Fin D'étude de Conception et développement d’une applicatio...
Rapport Projet De Fin D'étude de Conception et développement d’une applicatio...
mouafekmazia
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
ENSET, Université Hassan II Casablanca
 
gestion de magasin vente matériels informatique
gestion de magasin vente matériels informatiquegestion de magasin vente matériels informatique
gestion de magasin vente matériels informatiqueOussama Yoshiki
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
ENSET, Université Hassan II Casablanca
 
Introduction a Flutter
Introduction a FlutterIntroduction a Flutter
Introduction a Flutter
Christian SUMBANG
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
ENSET, Université Hassan II Casablanca
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
rapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFErapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFE
Donia Hammami
 
Cours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observerCours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observer
ENSET, Université Hassan II Casablanca
 
Rapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammamiRapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammami
Donia Hammami
 
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
Harrathi Mohamed
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
ENSET, Université Hassan II Casablanca
 
Développement d’une application Web et mobile d’un annuaire médical
Développement d’une application Web et mobile d’un annuaire médicalDéveloppement d’une application Web et mobile d’un annuaire médical
Développement d’une application Web et mobile d’un annuaire médical
litayem bechir
 

Tendances (20)

Conception et réalisation d’un Système d’information des étudiants du départe...
Conception et réalisation d’un Système d’information des étudiants du départe...Conception et réalisation d’un Système d’information des étudiants du départe...
Conception et réalisation d’un Système d’information des étudiants du départe...
 
La spécification des besoins
La spécification des besoinsLa spécification des besoins
La spécification des besoins
 
Présentation Flutter
Présentation FlutterPrésentation Flutter
Présentation Flutter
 
Rapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learningRapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learning
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-Correction
 
Rapport Projet De Fin D'étude de Conception et développement d’une applicatio...
Rapport Projet De Fin D'étude de Conception et développement d’une applicatio...Rapport Projet De Fin D'étude de Conception et développement d’une applicatio...
Rapport Projet De Fin D'étude de Conception et développement d’une applicatio...
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
 
gestion de magasin vente matériels informatique
gestion de magasin vente matériels informatiquegestion de magasin vente matériels informatique
gestion de magasin vente matériels informatique
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Introduction a Flutter
Introduction a FlutterIntroduction a Flutter
Introduction a Flutter
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
rapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFErapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFE
 
Cours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observerCours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observer
 
Rapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammamiRapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammami
 
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
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Développement d’une application Web et mobile d’un annuaire médical
Développement d’une application Web et mobile d’un annuaire médicalDéveloppement d’une application Web et mobile d’un annuaire médical
Développement d’une application Web et mobile d’un annuaire médical
 

Similaire à DART.pptx

Adama Coulibaly.pptx
Adama Coulibaly.pptxAdama Coulibaly.pptx
Adama Coulibaly.pptx
IdrissaDembl
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
Damien Laureaux
 
Projet de fin d étude (1)
Projet de fin d étude (1)Projet de fin d étude (1)
Projet de fin d étude (1)Sanaa Guissar
 
Hello droid
Hello droidHello droid
Hello droid
Wiki Info Systeme
 
Introduction au développement Android
Introduction au développement AndroidIntroduction au développement Android
Introduction au développement AndroidSteve Tremblay
 
Chapitre 1 android
Chapitre 1 androidChapitre 1 android
Android Studio, premier contact
Android Studio, premier contactAndroid Studio, premier contact
Android Studio, premier contact
Jasmine Conseil
 
Android Studio, premier contact
Android Studio, premier contactAndroid Studio, premier contact
Android Studio, premier contact
Jasmine Conseil
 
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidDébuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Bosco Basabana
 
Ch2. Développement mobile
Ch2. Développement mobileCh2. Développement mobile
Ch2. Développement mobile
Haifa Chorfi
 
Introduction_Android_-_Complet.pdf
Introduction_Android_-_Complet.pdfIntroduction_Android_-_Complet.pdf
Introduction_Android_-_Complet.pdf
med_univ78
 
Ateliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceAteliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceKorteby Farouk
 
Génération de documents Office avec Open XML et VSTO
Génération de documents Office avec Open XML et VSTOGénération de documents Office avec Open XML et VSTO
Génération de documents Office avec Open XML et VSTOguested7f6
 
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
Meetup Mobile Montpellier
 
Architecture .net
Architecture  .netArchitecture  .net
1-android.pdf
1-android.pdf1-android.pdf
1-android.pdf
FethiBenYahia1
 
Windev
WindevWindev
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
Renaud Dumont
 

Similaire à DART.pptx (20)

Adama Coulibaly.pptx
Adama Coulibaly.pptxAdama Coulibaly.pptx
Adama Coulibaly.pptx
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
 
Projet de fin d étude (1)
Projet de fin d étude (1)Projet de fin d étude (1)
Projet de fin d étude (1)
 
Hello droid
Hello droidHello droid
Hello droid
 
Introduction au développement Android
Introduction au développement AndroidIntroduction au développement Android
Introduction au développement Android
 
Chapitre 1 android
Chapitre 1 androidChapitre 1 android
Chapitre 1 android
 
Android Studio, premier contact
Android Studio, premier contactAndroid Studio, premier contact
Android Studio, premier contact
 
Android Studio, premier contact
Android Studio, premier contactAndroid Studio, premier contact
Android Studio, premier contact
 
Chap android
Chap androidChap android
Chap android
 
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidDébuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
 
Ch2. Développement mobile
Ch2. Développement mobileCh2. Développement mobile
Ch2. Développement mobile
 
Cours 1 Android
Cours 1 AndroidCours 1 Android
Cours 1 Android
 
Introduction_Android_-_Complet.pdf
Introduction_Android_-_Complet.pdfIntroduction_Android_-_Complet.pdf
Introduction_Android_-_Complet.pdf
 
Ateliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceAteliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open source
 
Génération de documents Office avec Open XML et VSTO
Génération de documents Office avec Open XML et VSTOGénération de documents Office avec Open XML et VSTO
Génération de documents Office avec Open XML et VSTO
 
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
 
Architecture .net
Architecture  .netArchitecture  .net
Architecture .net
 
1-android.pdf
1-android.pdf1-android.pdf
1-android.pdf
 
Windev
WindevWindev
Windev
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 

DART.pptx

  • 1. VEILLE TECHNOLOGIQUE: FLUTTER et DART Presenter par: ADIAWIAKOYE Ahmadou
  • 2. FLUTTER : qu’est ce que c’est ? 01 Flutter est un kit de développement logiciel d'interface utilisateur open-source créé par Google. Il est utilisé pour développer des applications pour Android, iOS, Linux, Mac, Windows, Google Fuchsia et le web à partir d'une seule base de code
  • 3. Quelle est sa version stable actuelle? 02 31 août 2022, édition Flutter Vikings : version 3.3
  • 4. Donner quelques caractéristiques de FLUTTER 03 1. Base de code unique pour Android et iOS 1. Fonction de rechargement à chaud 1. Open-source et par Google 1. Programmation Dart
  • 5. quelques particularités de FLUTTER qui permettront de le choisir parmi tant d’autres outils de son genre. 04 Flutter permet aux développeurs d'écrire du code qui fonctionne sur différentes plates -formes . Deux applications différentes peuvent utiliser la même base de code. En plus de partager le code de l'interface utilisateur, l'interface utilisateur elle-même est également partageable. Cela rend la maintenance de la base de code unique beaucoup plus facile par opposition à différents codes pour différentes plates-formes.
  • 6. De quoi a-t-on besoin pour programmer avec Flutter 05 1. Systèmes d'exploitation 1. Espace disque 1. Outils (Windows PowerShell 5.0; Git pour Windows 2.x)
  • 7. Comment installe-t-on FLUTTER ? 05 1. Télécharger le sdk flutter sur ce lien : Windows install | Flutter 1. Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:srcflutter). 1. Ajouter flutter aux variables d’environnement 1. Installer l’extension flutter dans l’éditeur
  • 8. Donner les étapes pour créer un projet FLUTTER avec vs code 06 Commençons par ouvrir Visual Studio Code. Vous arrivez sur la page d’accueil. Fermez la fenêtre Welcome. Vous arrivez ensuite sur une fenêtre qui vous indique les différents raccourcis pour les différentes opérations qui nous intéressent (ouvrir un fichier etc.). On va ensuite afficher la barre d’accès avec la combinaison de touches « cmd + Shift + P » sur macOS , « Ctrl + Shift + P » sur Windows. Dans la barre de recherche, tapez « Flutter new » et sélectionnez ensuite « Flutter : New Application Project ». Sélectionnez ensuite un emplacement où l’enregistrer en lui donnant un nom. Visual Studio Code va créer tout un lot de fichiers sans que vous ayez à cliquer ou taper quoi que ce soit. Vous obtenez ainsi un projet comme ci-dessous :
  • 9. Quelle est la structure de base d’un projet flutter 07
  • 10. Quelle est la structure de base d’un projet flutter 07 android — Ce dossier contient un projet Android avec une activité qui exécute notre projet Flutter ios — Ce dossier contient un projet IOS qui exécute notre projet Flutter Ainsi, Android et iOS sont des dossiers spécifiques à la plate-forme utilisés pour exécuter l'application sur la plate-forme spécifique. lib - Dossier contenant les fichiers .dart. C'est le dossier principal de notre projet qui contient les fichiers que Flutter utilise pour créer notre application. pubspec.yaml - C'est le fichier qui contient les paramètres de notre projet, vous pouvez également y ajouter d'autres bibliothèques à votre projet.
  • 11. Quelle est l’architecture de flutter 08 Flutter est très flexible dans l’organisation d’un projet, il vous sera alors possible d’utiliser l’architecture de votre choix .
  • 12. Quelle est l’architecture d’un projet flutter? 09
  • 13. Quelle est l’architecture d’un projet flutter? 09 Dans main.dart: la première chose est d’importer le matériel désigné (import 'package:flutter/matériel.dart'). Dans la fonction main on appelle la fonction runApp qui prend en paramètre MyApp MyApp : est une classe qui hérite de StatelessWidget; il contient une methode build qui retourn MaterialApp qui a comme attribue MyHomePage (MyHomePage étend StatefulWidget) qui a un contenu Scaffold (La classe Scaffold est un widget extensible qui remplit l'espace disponible ou l'écran.) Scaffold contient AppBar, center, FloatingActionButton. AppBar: est un widget qui a un argument de titre qui reçoit le titre FloatingActionButton: est un widget qui contient les icônes. Center: il contient une classe column qui reçoit le texte
  • 14. C’est quoi un widget en FLUTTER ? Citer quelques exemples de widget. 10 Un widget est tout ce qui compose votre application que ce soit un texte, une image, un bouton, l’ensemble d’une page ou bien les opérations qui permettent de donner un résultat. Exemple: Text Row,Column Stack Container
  • 15. Expliquer la notion de Stateless et Stateful widget en FLUTTER 11 le Stateless widget est utile lorsque la partie de l’interface utilisateur que vous décrivez ne dépend de rien d’autre que des informations de configuration d’objet et du BuildContext dans lequel le widget est initialisé. {Un BuildContext n'est rien d'autre qu'une référence à l'emplacement d'un Widget dans l'arborescence de tous les Widgets qui sont construits. En bref, considérez un BuildContext comme la partie de l'arbre Widgets où le Widget est attaché à cet arbre. Un BuildContext n'appartient qu'à un seul widget.} Exemple à l’appui: Si un widget 'A' a des widgets enfants, le BuildContext du widget 'A' deviendra le parent BuildContext des enfants directs BuildContexts .
  • 16. Expliquer la notion de Stateless et Stateful widget en FLUTTER 11 Le Stateful widget: contrairement au Stateless widget, le Stateful widget contient l’instance de l’état du composant. Le Stateful widget se compose de deux parties : l’immutable Statefull widget est l’instance de son état L'immuabilité est utilisée pour des raisons de performances . Si le widget doit changer, créez une nouvelle instance configurée en conséquence. Il est plus rapide de vérifier si deux instances sont identiques que si leur état est le même. C'est l'une des raisons pour lesquelles const est souvent utilisé. L'état est l'information synchrone sur un widget qui est créée lorsque vous construisez un widget. Cet état change tout au long de la durée de vie du widget.
  • 17. C’est quoi State Management ? 12 State Management C’est la gestion de l'état, c'est-à-dire l'interface utilisateur se met à jour après chaque opérations terminées. Exemple à l’appui Supposons que nous travaillions sur une application de questionnaire, et dans cette application, l'état suivant se produit : Lorsque l'utilisateur s'inscrit pour la première fois, les pages de l'application sont mises à jour en fonction des préférences de l'utilisateur sélectionnées lors de l'inscription. Une fois que l'utilisateur entre dans l'application, il reçoit un questionnaire pertinent dans l'application. Une fois que l'utilisateur a sélectionné un questionnaire, les données relatives à ce test sont mises à jour, telles que les mauvaises réponses, le temps pris, etc. Une fois que l'utilisateur a terminé le papier, il reçoit les scores et le classement. Dans tous ces états, l'interface utilisateur se met à jour à l'aide de nouvelles données.
  • 18. Pourquoi utiliser les State Management ? 13 State Management : est essentielle dans le développement d'applications Flutter car elle nous permet de centraliser chaque état de l'interface utilisateur et de contrôler le flux de données dans l'application.
  • 19. Quels sont les State Management dans Flutter ? 14 Local State: Local State n'est rien d'autre que l'état éphémère. Lorsque vous modifiez l'état unique d'une page comportant des animations ou des contrôles d'interface utilisateur, vous traitez avec l'état local et nous pouvons utiliser un widget avec état à cette fin. Shared State Lorsque vous devez modifier l'état de plusieurs widgets, nous utilisons un Shared State dans l'application. Cette gestion d'état ne s'appelle rien d'autre que l'état de l'application uniquement.
  • 20. C’est quoi le mode de fonctionnement de FLUTTER ? 15 Flutter fonctionne comme un site Web qui permet au framework de reconstruire automatiquement l'arborescence des widgets. Il permet de visualiser l'effet de vos modifications, économisant ainsi du temps et contribue également à un développement rapide.
  • 21. Donnez et expliquez les widgets spécifiques à la conception (design) sous FLUTTER? 16 ● Les widgets Material Design implémentent le langage de conception Google du même nom Le Material Design est un ensemble de règles de design proposées par Google et qui s'appliquent à l'interface graphique des logiciels et applications ● Les widgets Cupertino imitent le design iOS d’Apple.
  • 22. Quel est le rôle de DART dans FLUTTER ? 17 Le langage utilisé par Flutter: Flutter utilise Dart comme langage de programmation. Il s'agit d'un langage de programmation optimisé pour le client pour les applications rapides sur plusieurs plates-formes, développé par Google et utilisé pour créer des applications mobiles, de bureau, backend et Web. Le language Dart pour application mobile: Les applications mobiles sont créées à l'aide de Flutter, un cadre de développement d'applications mobiles open source pour la création d'applications mobiles.
  • 23. Quels sont les outils pris en charge par DART ? 18 Darts game Outils en ligne de commande IDEs et éditeurs
  • 24. Quelles sont les bibliothèques fondamentales prises en charge par DART ? 19 Il existe trois bibliothèques Dart fondamentales: dart: core Dart:html dart: io
  • 25. Quels sont les services et fonctionnalités fournis par FLUTTER aux développeurs ? 20 Voici les bases de Flutter et pourquoi l'utiliser pour le développement d'applications mobiles? Rechargement à chaud Haute Performance Applications natives pour IOS et Android Développez un code pour deux plates-formes
  • 26. Donnez des exemples d’IDE prenant en charge FLUTTER. 21 Les Environnements de développement Android Studio IntelliJ Visual Studio Code
  • 27. Pourquoi choisir FLUTTER et pas IONIC? 22 Cela dépend de vos besoins. Si vous avez besoin de développer une application hybride ou PWA, Ionic est ce qu’il vous faut. D’autre part, si vous avez besoin de meilleures performances, tests, réutilisabilité du code, Flutter est la meilleure option.
  • 28. Avantages et Inconvénients de Flutter. 23
  • 29. Quel avenir pour FLUTTER? 24 Cela dépend des développeurs et de leur adoption de ce nouveau langage. Cependant, lorsque vous avez déjà choisi Flutter comme SDK ou décidé de l'essayer, nous vous invitons à le faire correctement et à automatiser la création, le test et la distribution de l'application en mettant en œuvre un outil CI / CD dédié pour Flutter.

Notes de l'éditeur

  1. Base de code unique pour Android et iOS Cette approche permet de simplifier et de réduire le temps et le coût de développement, et la maintenance est également une tâche facile. Fonction de rechargement à chaud (hot reload) Cette fonction permet aux développeurs et aux concepteurs de voir les changements au fur et à mesure qu’ils codent. Open-source et par Google Flutter est un choix populaire parmi les développeurs en raison de l’énorme soutien de la communauté. Programmation Dart Flutter utilise un langage de programmation facile à apprendre et à mettre en œuvre, appelé Dart, qui est le langage de programmation général de Google.
  2. Pour installer et exécuter Flutter, votre environnement de développement doit répondre à ces exigences minimales : Systèmes d'exploitation : Windows 10 ou version ultérieure (64 bits), basé sur x86-64. Espace disque : 1,64 Go (n'inclut pas l'espace disque pour IDE/outils). Outils : Flutter dépend de la disponibilité de ces outils dans votre environnement. Windows PowerShell 5.0 ou plus récent (préinstallé avec Windows 10) Git pour Windows 2.x, avec l' option Utiliser Git à partir de l'invite de commande Windows . Si Git pour Windows est déjà installé, assurez-vous que vous pouvez exécuter gitdes commandes à partir de l'invite de commande ou de PowerShell.
  3. Commençons par ouvrir Visual Studio Code. Vous arrivez sur la page d’accueil. Fermez la fenêtre Welcome. Vous arrivez ensuite sur une fenêtre qui vous indique les différents raccourcis pour les différentes opérations qui nous intéressent (ouvrir un fichier etc.). On va ensuite afficher la barre d’accès avec la combinaison de touches « cmd + Shift + P » sur macOS , « Ctrl + Shift + P » sur Windows. Dans la barre de recherche, tapez « Flutter new » et sélectionnez ensuite « Flutter : New Application Project ». Sélectionnez ensuite un emplacement où l’enregistrer en lui donnant un nom. Visual Studio Code va créer tout un lot de fichiers sans que vous ayez à cliquer ou taper quoi que ce soit. Vous obtenez ainsi un projet comme ci-dessous :
  4. https://medium.com/flutter-community/flutter-project-structure-create-a-simple-app-25891ae97951
  5. https://medium.com/flutter-community/flutter-project-structure-create-a-simple-app-25891ae97951
  6. Text Le Textwidget vous permet de créer une série de texte stylé dans votre application. Row,Column Ces widgets flexibles vous permettent de créer des mises en page flexibles dans les directions horizontale ( Row) et verticale ( Column). La conception de ces objets est basée sur le modèle de mise en page flexbox du Web. Stack Au lieu d'être orienté linéairement (horizontalement ou verticalement), un Stackwidget vous permet de placer des widgets les uns sur les autres dans l'ordre de la peinture. Vous pouvez ensuite utiliser le Positionedwidget sur les enfants de a Stackpour les positionner par rapport au bord supérieur, droit, inférieur ou gauche de la pile. Les piles sont basées sur le modèle de disposition de positionnement absolu du Web. Container Le Containerwidget vous permet de créer un élément visuel rectangulaire. Un conteneur peut être décoré avec un BoxDecoration, tel qu'un arrière-plan, une bordure ou une ombre. A Containerpeut également avoir des marges, un rembourrage et des contraintes appliquées à sa taille. De plus, a Containerpeut être transformé dans un espace tridimensionnel à l'aide d'une matrice.
  7. L'état ou state est une information qui peut être lue de manière synchrone lorsque le widget est construit et peut changer pendant la durée de vie du widget . Notion d'État Un State définit la partie « comportementale » d'une instance StatefulWidget . Il contient des informations visant à interagir/interférer avec le Widget en termes de : comportement disposition Toute modification appliquée à un état force le widget à se reconstruire .
  8. https://www.desuvit.com/state-management-in-flutter-a-comprehensive-guide/#:~:text=State%20management%20is%20essential%20in,data%20flow%20in%20the%20application.
  9. Text Le Textwidget vous permet de créer une série de texte stylé dans votre application. Row,Column Ces widgets flexibles vous permettent de créer des mises en page flexibles dans les directions horizontale ( Row) et verticale ( Column). La conception de ces objets est basée sur le modèle de mise en page flexbox du Web. Stack Au lieu d'être orienté linéairement (horizontalement ou verticalement), un Stackwidget vous permet de placer des widgets les uns sur les autres dans l'ordre de la peinture. Vous pouvez ensuite utiliser le Positionedwidget sur les enfants de a Stackpour les positionner par rapport au bord supérieur, droit, inférieur ou gauche de la pile. Les piles sont basées sur le modèle de disposition de positionnement absolu du Web. Container Le Containerwidget vous permet de créer un élément visuel rectangulaire. Un conteneur peut être décoré avec un BoxDecoration, tel qu'un arrière-plan, une bordure ou une ombre. A Containerpeut également avoir des marges, un rembourrage et des contraintes appliquées à sa taille. De plus, a Containerpeut être transformé dans un espace tridimensionnel à l'aide d'une matrice.
  10. État local L'état local n'est rien d'autre que l'état éphémère. Lorsque vous modifiez l'état unique d'une page comportant des animations ou des contrôles d'interface utilisateur, vous traitez avec l'état local et nous pouvons utiliser un widget avec état à cette fin. État partagé Lorsque vous devez modifier l'état de plusieurs widgets, nous utilisons un état partagé dans l'application. Cette gestion d'état ne s'appelle rien d'autre que l'état de l'application uniquement.
  11. Flutter dispose d’une fonctionnalité appelée “rechargement à chaud” (Hot Reload) qui apporte au développeur une simplicité dans le suivi de son travail. Elle permet d’accélérer et de faciliter les phases de tests et de corrections au cours des développements. Cette feature, très pratique, permet d’afficher en temps réel les modifications sur l’interface du device souhaité. Ainsi, le développeur peut se rendre compte du rendu de son développement et ajuster rapidement son code. https://www.adservio.fr/post/what-is-flutter-and-what-are-its-advantages#:~:text=Flutter%20is%20a%20mobile%20app,and%20easier%20than%20traditional%20methods. Flutter est un SDK d'application mobile qui vous permet de créer des applications natives de haute qualité sur iOS et Android. C'est également le principal moyen de développer des applications multiplateformes avec le nouveau système d'exploitation Fuchsia de Google. Le framework Flutter vous permet de créer facilement des interfaces utilisateur belles, rapides et réactives. Le cadre est également extensible, vous pouvez donc facilement ajouter de nouvelles fonctionnalités et fonctionnalités. Lors de la création d'une application Flutter, vous travaillerez avec ce qu'on appelle un "widget". Les widgets sont les éléments de base d'une application Flutter, et ils sont utilisés pour créer à la fois les composants visuels d'une application (comme les boutons et le texte) et les éléments fonctionnels (comme les widgets sans état). Il existe deux types de widgets : les widgets sans état et les widgets avec état. Comme leur nom l'indique, les widgets sans état sont ceux qui n'ont pas d'état interne (ou "état", en abrégé). Ce sont les widgets les plus simples et sont souvent utilisés pour les boutons ou le texte. D'autre part, les widgets avec état ont un état interne, et cet état peut être modifié au fil du temps, et cela se reflétera dans l'apparence et le comportement du widget. Les widgets avec état sont souvent utilisés pour les champs de saisie utilisateur ou les contrôleurs d'animation. Vous pouvez facilement créer des widgets sans état et avec état à l'aide du langage de programmation Dart. Vous pouvez également utiliser divers autres outils de développement pour vous aider dans le processus de développement, notamment Dart Analyzer et Flutter Inspector. https://bluewhaleapps.com/blog/why-your-next-app-should-be-developed-with-flutter Le langage de codage interne que Google utilise pour développer ses applications s'appelle Dart. Les applications dans Flutter sont construites avec Dart, ce qui permet aux concepteurs d'accéder facilement aux autres bibliothèques de code de Google. Non seulement cela permet de réutiliser beaucoup de code au lieu d'écrire à partir de zéro, mais cela donne immédiatement aux applications un aspect très soigné. Pour que cela ait un sens, vous devez considérer que les applications sont développées en utilisant quelques équipes. Les développeurs backend font des choses comme faire fonctionner tous les boutons et permettre aux informations que vous soumettez dans une application d'être enregistrées dans des bases de données. Les développeurs frontend font en sorte que tout soit beau. Flutter facilitebackendet les développeurs frontaux de travailler ensemble simultanément. La raison principale en est une fonctionnalité appelée "rechargement à chaud". Le rechargement à chaud entraîne l'exécution immédiate du code d'une application, chaque fois qu'une modification est apportée. Cela signifie que toute l'équipe peut voir exactement quels sont les effets de chaque changement, en temps réel. D'autres frameworks de codage demandent beaucoup d'efforts et de temps pour le faire, ce qui ralentit les projets.
  12. https://stacklima.com/qu-est-ce-que-les-widgets-dans-flutter/ Accessibilité : il s’agit de l’ensemble de widgets qui rendent une application flutter plus facilement accessible. Animation et mouvement : ces widgets ajoutent une animation à d’autres widgets. Actifs, images et icônes : ces widgets prennent en charge des actifs tels que l’affichage d’images et l’affichage d’icônes. Async : Ceux-ci fournissent une fonctionnalité asynchrone dans l’application Flutter. Bases : il s’agit de l’ensemble de widgets qui sont absolument nécessaires au développement de toute application flutter. Cupertino : Ce sont les widgets conçus par iOS. Entrée : cet ensemble de widgets fournit des fonctionnalités d’entrée dans une application flottante. Modèles d’interaction : ces widgets sont là pour gérer les événements tactiles et diriger les utilisateurs vers différentes vues de l’application. Disposition : cet ensemble de widgets aide à placer les autres widgets sur l’écran selon les besoins. Composants matériels : il s’agit d’un ensemble de widgets qui suivent principalement la conception matérielle de Google. Peinture et effets : il s’agit de l’ensemble des widgets qui appliquent des modifications visuelles à leurs widgets enfants sans modifier leur disposition ou leur forme. Défilement : cela permet de faire défiler un ensemble d’autres widgets qui ne sont pas défilables par défaut. Style : il s’agit du thème, de la réactivité et de la taille de l’application. Texte : Ceci affiche le texte.
  13. https://cynoteck.com/fr/blog-post/flutter-basics-why-use-flutter-for-mobile-app-development/
  14. https://cynoteck.com/fr/blog-post/flutter-basics-why-use-flutter-for-mobile-app-development/ 1. Darts game : Vous n'avez rien à télécharger pour DartPad. Il vous suffit de cliquer sur le lien https://dartpad.dartlang.org. DartPad prend en charge les bibliothèques de base. 2. Outils de ligne de commande : Dart SDK comprend ces outils à usage général. dartdoc dartfmt pub dart build_runner dartanalyseur IDEs et éditeurs: Des plugins Dart existent avec ces IDE courants. Studio Android je comprends l'idée Code Visual Studio
  15. 1. dart: core Cette bibliothèque contient toutes les fonctionnalités de base comme les chaînes, les dates, les entiers, les collections, la liste, etc.… 2. Dart:html Cette bibliothèque comprend les types d'éléments DOM (Document Object Model), les événements, le stockage local, les médias, le style CSS, etc. 3. dart: io Avec l'aide de cette bibliothèque, nous pouvons travailler avec des fichiers, des processus, des serveurs HTTP et des clients, des répertoires. Pour utiliser la bibliothèque, nous devons importer la bibliothèque comme import 'fléchette: io';
  16. Rechargement à chaud: Dans le flutter, vous n'avez pas besoin d'exécuter le code à chaque fois que vous avez apporté des modifications. Flutter fonctionne comme un site Web qui permet au framework de reconstruire automatiquement l'arborescence des widgets. Il permet de visualiser l'effet de vos modifications, économisant ainsi du temps et contribue également à un développement rapide. Haute Performance: Flutter ne nécessite pas de pont JavaScript et la vitesse est beaucoup plus rapide que d'autres. Applications natives pour IOS et Android: Flutter possède toutes les fonctionnalités des plates-formes natives, telles que le défilement, la navigation, les polices d'icônes, le texte, la vue Liste, etc., c'est pourquoi les applications conçues avec les fonctionnalités Flutter sur Android et iOS. Développez un code pour deux plates-formes: Flutter a ses propres widgets et designs. Les widgets sont les éléments qui contrôlent la vue et l'interface d'une application. Flutter est indépendant de la plate-forme couvrant à la fois iOS et Android. Ainsi, une application peut être conçue pour fonctionner sur les deux plates-formes.
  17. LEQUEL CHOISIR : FLUTTER OU IONIC ? Le choix entre les deux est difficile. Avant de choisir l’un d’entre eux, vous devez connaître les compatibilités et les différences techniques. Ionic et Flutter se livrent une guerre féroce où il est difficile d’entrevoir l’issue. Voyons les caractéristiques des différents outils en fonction des paramètres suivants. PORTABILITÉ DU CODE Comprendre la portabilité du code entre Ionic et Flutter permet de définir comment les deux codes se comportent dans différents environnements, processeurs et systèmes d’exploitation. Les codes Ionic et Flutter ont les mêmes performances lorsque nous les déployons sur le mobile et le web. Avec Flutter, vous pouvez créer de superbes applications iOS et Android à partir d’une seule ligne de code. En outre, la prise en charge des ordinateurs de bureau est plutôt stable. Si vous souhaitez déployer votre application comme PWA, vous devriez opter pour Ionic. PERFORMANCE Concernant les performances de Flutter par rapport à Ionic, leur niveau d’efficacité joue un rôle important. Si vous recherchez une animation exclusive, choisir Flutter est une option intelligente (FPS-60). Cependant, si vous envisagez de construire une application plus orientée vers l’utilisateur, Ionic offre les mêmes performances. Les performances de Flutter vs Ionic dépendent toujours de la façon dont vous codez pour les deux. La qualité du code joue un rôle majeur dans la décision de la performance de tout cadre. Les performances de Flutter par rapport à celles de Ionic dépendent de la taille du bundle de votre application. Ionic utilise le runtime standard du navigateur ainsi que des primitives (la plus petite unité de traitement). Par conséquent, la taille du paquet ionique est de 2 991 octets. Alors que Flutter nécessite un code lourd, même pour créer une application de base. OUTILS ET TECHNIQUES Ionic est un framework JavaScript alors que Flutter ne l’est pas. Pour être développeur Flutter, vous devez connaître un langage appelé Dart. Le marché actuel comprend 1,9 % de développeurs Dart même si les développeurs JS dominent avec 70 %. Si vous connaissez JavaScript, vous pouvez travailler dans plus de 100 frameworks JS pour le développement web, mobile et natif. Dart présente un écosystème autonome et hautement personnalisé qui a ses contraintes. C’est pourquoi cela crée une confusion sur les compétences d’un développeur Dart sur le marché. Il/elle doit uniquement travailler sur des applications compatibles avec Flutter. L’écosystème hautement personnalisé de Flutter vous enseigne uniquement le développement façon Flutter. Cela est différent pour les applications Ionic, le processus de création d’applications est semblable aux processus traditionnel. Surtout, vous coderez votre style avec CSS. Vous pouvez l’importer tant que vous travaillez sur des plateformes web. UTILISATEUR NATIF Les approches de l’utilisation des éléments d’interface utilisateur natifs ont beaucoup d’importance. Ni Flutter, ni Ionic n’utilisent les éléments d’interface utilisateur natifs de chaque plateforme. Les deux mettent automatiquement à jour les mêmes éléments, par exemple, les deux utilisent Material Design et Cupertino pour Android et iOs, respectivement. Flutter et Ionic permettent tous deux d’accéder aux API natives et aux services de la plateforme via une bibliothèque de plugins prêts à l’emploi. Toutefois, l’implémentation mobile native de Flutter est entièrement personnalisée. DURABILITÉ La durabilité signifie ici la durée de vie et la flexibilité du projet. Les projets alimentés par Ionic sont plus durables que ceux de Flutter. Lorsque vous construisez une application sur Ionic, vous choisissez une plateforme plus large que Flutter. Tout ce que vous créez sur Ionic, vous adoptez des normes web ouvertes. Cela vous permet de suivre la même norme et de créer un script uniforme pour développer une application multiplateforme. Surtout, vous pouvez utiliser l’application avec n’importe quel framework JavaScript.
  18. Productivité élevée. Puisque Flutter est multiplateformes, vous pouvez utiliser la même base de code pour vos applications iOS et Android. Cela peut certainement vous faire économiser du temps et des ressources. Grande performance. Dart est compilé en code natif. Il n’est pas nécessaire d’accéder aux widgets OEM car Flutter a le sien. Cela signifie une communication moins médiée entre l'application et la plateforme. Comme l'explique Wm Leler: «Flutter est le seul SDK mobile offrant des vues réactives sans passer par un pont JavaScript.» Tout cela contribue à des temps de démarrage rapides des applications et à moins de problèmes de performances. Développement rapide et simple. L'une des fonctionnalités les plus appréciées de Flutter est le rechargement à chaud. Ce qui vous permet de visualiser instantanément les modifications apportées au code sur les émulateurs, les simulateurs et le matériel. En moins d'une seconde, le code modifié est rechargé pendant que l'application est en cours d'exécution sans qu'un redémarrage soit nécessaire. C'est excellent non seulement pour créer des interfaces utilisateur ou ajouter des fonctionnalités, mais également pour corriger des bugs. En ce qui concerne la simplicité, Flutter affirme dans son document que la programmation avec Flutter est tellement simple qu’aucune connaissance préalable de la programmation n’est requise. «L’expérience des langages orientés objet est certainement utile, mais même les non-programmeurs ont créé les applications Flutter!». Compatibilité. Étant donné que les widgets font partie de l'application et non de la plateforme, vous rencontrerez probablement moins de problèmes de compatibilité, voire aucun, sur différentes versions de système d'exploitation. Cela signifie moins de temps consacré aux tests. Open-source. Les deux logiciels Flutter et Dart sont des logiciels à open-source gratuits. Ils fournissent une documentation complète et un soutien à la communauté pour vous aider à résoudre tous les problèmes que vous pourriez rencontrer. Cela dépend des développeurs et de leur adoption de ce nouveau langage. Cependant, lorsque vous avez déjà choisi Flutter comme SDK ou décidé de l'essayer, nous vous invitons à le faire correctement et à automatiser la création, le test et la distribution de l'application en mettant en œuvre un outil CI / CD dédié pour Flutter. Sans faire de comparaison avec d’autres plateformes, voici une liste de certaines caractéristiques et qualités qui pourraient vous inciter à tenter votre chance chez Flutter: Productivité élevée Grande performance. Développement rapide et simple Compatibilité Open-source.