Programmation Cross Plateforme
Flutter
Introduction
1
Fiche Module
Présentation générale
● Unité d’enseignement: Développement Cross-Platforme Flutter
● Prérequis: Algorithmique, Base de données, Conception orientée objet et programmation JAVA.
● Modalité d’évaluation :
➢ 40% Projet
➢ 60% Examen pratique Charge horaire Nb ECTS
● Utilisation de l’Approche par Projet (APP) 33H 3
2
PLAN
01 La technologie cross-platform
02 Technologie à adopter : Flutter
03 Plan de cours
04 Environnement de travail
05 Structure et premier projet
3
Les technologies
4
Développement Natif
5
Android
Studio
(Java/Kotlin)
Xcode
(ObjectiveC/Swift)
6
Développement
natif
Avantages:
❖ Accès complet aux fonctionnalités de l'appareil et du système d'exploitation.
❖ Performances puissantes.
❖ Applications fluides.
❖ Accès à toutes les API natives et aux fonctionnalités spécifiques à la
plateforme.
7
Développement
natif
Inconvénients:
❖ Pas de support multi-plateforme.
❖ Coûts de développement élevés si un support différent du système
d'exploitation est nécessaire.
❖ Aucune réutilisation de code.
8
Développement hybride
9
Cordova
(HTML, CSS et JS)
Ionic
(HTML, CSS et JS)
10
Développement
hybride
Avantages:
❖ Réduction des coûts de développement.
❖ Prise en charge de différents systèmes d'exploitation.
❖ Réutilisation du code.
❖ Grandes capacités de personnalisation.
11
Développement
hybride
Inconvénients:
❖ Des performances plus lentes.
❖ Accès limité aux fonctionnalités du système d'exploitation.
❖ Aucune interaction avec d'autres applications natives.
12
Développement cross-
platform
13
Flutter
(Dart)
React Native
(JS)
14
Développement cross-
platform
Avantages:
❖ Prise en charge de différents systèmes d'exploitation.
❖ Les performances de l'interface utilisateur sont presque aussi rapides
que natives.
❖ Réutilisation du code.
15
Développement cross-platform
Inconvénients:
★ Des performances plus lentes que le native mais pas aussi que l’hybride
(cependant, ceci dépend de la technologie à utiliser).
★ Accès limité aux fonctionnalités du système d'exploitation (cependant,
pas aussi limité que pour l'hybride).
★ Dépendance de bibliothèques externes.
16
Flutter
17
Flutter
★ Flutter est un framework open-source développé par Google.
Il est basé sur le langage de programmation Dart, également
développé par Google.
★ Dart est un langage moderne et performant, spécialement
conçu pour la création d'applications mobiles et Web.
18
Flutte
r
★ L'objectif principal de Flutter est de permettre aux
développeurs de construire des interfaces utilisateur
réactives et dynamiques, avec un seul code source pour
toutes les plateformes cibles.
★ Cela signifie que vous pouvez développer une application
Flutter et la déployer sur Android, iOS, le Web et même le
bureau, sans avoir à réécrire le code à chaque fois.
19
Flutte
r
Utilisation de widgets de base
★ Flutter fournit une variété de widgets de base qui peuvent être
utilisés pour construire des interfaces utilisateur simples.
★ Certains exemples de widgets de base incluent Text, Container,
Row, Column, ListView et etc. Ces widgets peuvent être utilisés
pour afficher du texte, des images, des listes et organiser le
contenu de l'application.
Installation
https://docs.flutter.dev/get-started/install
20
Technologie
à adopter :
Flutter
[Flutter vs React Native]
21
Architecture des applications natives
• L’application native communique avec la plateforme pour créer des widgets (élément graphique
dans le UI tel que le bouton) ou accéder à des services ( tel que l’appareil photo).
• Le rendu des widgets est fait sur un Canvas et les événements sont renvoyés aux widgets.
• Une architecture assez simple, cependant, il faut créer des applications différentes pour chaque
plateforme car les widgets et le langage de développement sont différents chez iOS et Android.
22
Technologie à adopter : Flutter
[Flutter vs React Native]
React Native Flutter
• Utilise un langage interprété, donc il est obligé de • Utilise un langage compilé.
communiquer avec la plateforme en passant par
Approche afin de réduire les problématiques de
un pont (« bridge » permettant de passer d’un
performance.
contexte à l’autre).
Le fait de compiler le code permet également de
Problématiques de performance (dues au pont)
réduire le temps de démarrage de l’application.
23
Technologie à adopter : Flutter
[Flutter vs React Native]
Critères React Native Flutter
En bref Un Framework pour créer Une boîte à outils d'interface
des applications natives à utilisateur portable pour créer des
l'aide de React sur mobile, applications compilées en natif sur
Web et bureau à partir d'une mobile, Web et bureau à partir d'une
seule base de code seule base de code
Sortie officielle Mars 2015, Conférence F8 Décembre 2018, Google I/O
Gratuit et open source Oui Oui
Langage de JavaScript Dart
programmation
Popularité sur GitHub 106k* étoiles 146k* étoiles
Rechargement à chaud Oui Oui
Performances de Proche du natif Plus rapide, 90 FPS
l'application
Apparence native Basse, dépendance aux Mieux, a accès aux fonctionnalités de
bibliothèques tierces base de l'appareil
24
Technologi
e à adopter
: Flutter
[Flutter vs React Native]
25
Plan de cours
1. Les widgets Flutter de base couramment utilisés
2. Les listes et StatefulWidget
3. GridView, Form et gestion des User Input
4. Les routes et la navigation
5. Communication HTTP
6. Stockage local.
26
Environnement
de travail
[Prérequis]
27
Sous Windows
1. Téléchargez la dernière version stable du SDK Flutter à partir du site officiel
: https://flutter.dev/docs/get-started/install/windows
2. Extrayez le fichier zip et placez le contenu du dossier flutter dans
l'emplacement d'installation souhaité pour le SDK Flutter (par exemple C:\
flutter).
3. Si vous souhaitez récupérer le SDK Flutter directement du repo Flutter sur
GitHub à l’aide de Git, vous pouvez ignorer les étapes 1 et 2. À la place,
dans l'emplacement d'installation souhaité pour le SDK Flutter (par exemple
C:\flutter), sous le dossier « C:\ » à l’aide de la console de Git tapez :
C:\>git clone https://github.com/flutter/flutter.git -b stable
28
Sous MacOs
1. Téléchargez la dernière version stable du SDK Flutter à partir du site officiel :
https://flutter.dev/docs/get-started/install/macos
2. Extrayez le fichier zip et placez le contenu du dossier flutter dans l'emplacement
d'installation souhaité pour le SDK Flutter (par exemple ~/development).
• cd ~/development
• unzip ~/Downloads/flutter_macos_XX.YY.ZZ-stable.zip
3. Si vous souhaitez récupérer le SDK Flutter directement du repo Flutter sur GitHub à
l’aide de Git, vous pouvez ignorer les étapes 1 et 2. À la place, dans l'emplacement
d'installation souhaité pour le SDK Flutter (par exemple ~/development), sous le
dossier « ~/development » à l’aide de la console de Git tapez :
C:\>git clone https://github.com/flutter/flutter.git -b stable
29
Structure
Plateformes Builds Lib Test pubspec.yaml pubspec.lock
cibles
30
Architectu
re
31
Première
applicatio
n Flutter :
Hello
World
32
Merci pour votre attention
33
