cours sur le langage dart

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.