Cours & Travaux Pratiques – Cycle Ingénieur Génie Logiciel
Développement Mobile:
Introduction FLUTTER
« Construisons ensemble des applications modernes et performantes »
Dr. Ing. ELHEM Elkout
[Link]@[Link]
Année Universitaire 2025-2026
SDK vs Framework
Est-ce que vous connaissez la différence entre un SDK et un Framework ?
SDK (Software Development Kit)
• Boîte à outils complète
1 • Contient compilateur, debugger, bibliothèques
• Fournit tout pour développer
Exemples : Android SDK, iOS SDK, Flutter SDK
SDK vs Framework
Est-ce que vous connaissez la différence entre un SDK et un Framework ?
Framework
• Ensemble de briques logicielles réutilisables
2 • Impose une structure au code
• Fournit des composants prêts à l'emploi
Exemples : Spring, React Native, Flutter Framework
SDK vs Framework
Est-ce que vous connaissez la différence entre un SDK et un Framework ?
Analogie :
SDK = boîte à outils du constructeur
Framework = plan de l’architecte + briques préfabriquées
FLUTTER
Flutter: Un Framework multiplateforme
Une seule base de code → plusieurs plateformes
Basé sur le langage Dart
• Langage moderne développé par Google
• Syntaxe proche de Java/C#/JavaScript
• Optimisé pour le développement d’interfaces utilisateur réactives
Configuration
Installation Flutter SDK
1 Télécharger Flutter SDK
•Rendez-vous sur [Link]
•Téléchargez l’archive ZIP de Flutter SDK
•Extrayez le fichier dans un dossier choisi (ex. : C:\src\flutter)
Configuration
Installation Flutter SDK
2 Ajouter Flutter au PATH
•Ouvrez les paramètres système → Paramètres système avancés
•Cliquez sur Variables d’environnement
•Dans la variable PATH, ajoutez le chemin vers C:\src\flutter\bin
•Ouvrez le terminal et exécutez nano ~/.bashrc (ou nano ~/.zshrc si vous utilisez zsh).
•Ajoutez export PATH="$PATH:$HOME/flutter/bin" à la fin du fichier.
•Rechargez le fichier de configuration en exécutant source ~/.bashrc (ou
source~/.zshrc)
Configuration
Installation Flutter SDK
2 Ajouter Flutter au PATH
•Ouvrez le terminal et exécutez nano ~/.zshrc (ou nano ~/.bashrc si vous
utilisez bash).
•Ajoutez export PATH="$PATH:pwd/flutter/bin" à la fin du fichier.
•Rechargez le fichier de configuration en exécutant source ~/.zshrc (ou
source~/.bashrc).
Configuration
Installation Flutter SDK
3 Vérifier l’installation
•Ouvrez une fenêtre de commande et tapez la commande flutter doctor
•Flutter va analyser votre environnement et générer un rapport
Configuration
Configuration de l’éditeur du code
1 Téléchargez et installez Android Studio
Installer les plugins Flutter et Dart :
2 •Ouvrez Android Studio, allez dans "File" > "Settings" > "Plugins".
•Recherchez et installez les plugins "Flutter" et "Dart".
Configurer Android SDK
3 Assurez-vous que les outils Android SDK, Android SDK Platform-Tools et
Android SDK Build-Tools sont installés.
Configuration
Configuration de l’éditeur du code
1 Téléchargez et installez VS Code
2 Installer les extensions Flutter et Dart
Configurer Android SDK
3 •Assurez-vous que les outils Android SDK, Android SDK Platform-Tools et
Android SDK Build-Tools sont installés.
Configuration
Configuration d’un émulateur Android
1 Dans Android Studio, ouvrez l’AVD Manager via: tools ➔ AVD Manager
Cliquez sur «create virtual device» et suivez les instructions pour créer un
2
nouvel émulateur
Sélectionnez un appareil virtuel et une image système, puis cliquez sur «
3 Finish ». Lancez l’émulateur en cliquant sur l’icône de lecture à côté du nom
de l’appareil dans l’AVD manager
Configuration
Utilisation d’un appareil réel
1 Activez le “mode développeur” et le “débogage USB” sur votre appareil
Android.
Connectez votre appareil à votre ordinateur via un câble USB
2
Configuration
Configuration d’un émulateur IOS
✓Assurez-vous que Xcode est installé via l’App store.
✓Ouvrez Xcode et aller via Xcode ➔ Preferences➔ Components
✓Télécharger et installez une version de simulateur iOS
✓Lancer le simulateur via Xcode ➔ opeen Developer tools ➔ Simulator
✓Vous pouvez également lancer un simulateur iOS directement depuis VS
Code ou Android Studio après avoir séléctionné un émulateur.