Développement des Applications Mobiles

Hybrides sous

Flutter

Dr. Mohammed BOUSMAH

Avantages Flutter Archi App Installation Concepts Etude de cas

À la fin de ce cours, vous serez capable de :

Décrire les avantages de Flutter

Expliquer l‘architecture d’une App Flutter

Identifier les différents types d’installation de Flutter

Utiliser les concepts de base de Flutter:

StatelessWidget StatefulWidget
Développer une Application mobile Cross-platform
fonctionnelle avec Flutter utilisant FireBase et la
Géolocalisation Google Maps
Développement d’Applications Mobiles Flutter
Copyright: bousmah@gmail.com
 Avantages Flutter Archi App Installation Concepts Etude de cas

Pourquoi choisir Flutter pour développer son application

1- Flutter est un SDK Google gratuit

2- Un seul code pour iOS et Android
è un développement Rapide
è une exécution très Rapide
è un coût de réalisation minimal
è “Look and Feel” des applications natives
è une Documentation très complète

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
 Avantages Flutter Archi App Installation Concepts Etude de cas

Pourquoi choisir Flutter pour développer son application

è un développement Rapide

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
 Avantages Flutter Archi App Installation Concepts Etude de cas

Pourquoi choisir Flutter pour développer son application

è Contrairement à React Native

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
 Avantages Flutter Archi App Installation Concepts Etude de cas

Pourquoi choisir Flutter pour développer son application

è On peut choisir provider package

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
 Avantages Flutter Archi App Installation Concepts Etude de cas

Pourquoi choisir Flutter pour développer son application

è une exécution très Rapide

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
 Avantages Flutter Archi App Installation Concepts Etude de cas

Pourquoi choisir Flutter pour développer son application

è Contrairement à React Native

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
Avantages Flutter Archi App Installation Concepts Etude de cas

Quelle est l’architecture d’une Application Flutter

Flutter est basé sur la notion de Composant nommé Widget

Flutter Mobile App = ∑-. 𝑊𝑖𝑑𝑔𝑒𝑡𝑠 + ∑ 𝑅𝑒𝑠𝑜𝑢𝑟𝑐𝑒𝑠 + ∑ 𝐶𝑜𝑛𝑓𝑖𝑔 𝐹𝑖𝑙𝑒𝑠

C’est quoi alors un Widget?

Widget = 𝐷𝑎𝑟𝑡 𝐶𝑙𝑎𝑠𝑠 𝑤ℎ𝑖𝑐ℎ 𝑟𝑒𝑡𝑢𝑟𝑛𝑠 𝑎 𝑔𝑟𝑎𝑝ℎ𝑖𝑐𝑎𝑙 𝑒𝑙𝑒𝑚𝑒𝑛𝑡

StatelessWidget (Static) 𝑆𝑡𝑎𝑡𝑒𝑓𝑢𝑙𝑊𝑖𝑑𝑔𝑒𝑡 (𝐷𝑦𝑛𝑎𝑚𝑖𝑐)

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
Avantages Flutter Archi App Installation Concepts Etude de cas

3 steps to install Flutter

1. Select the operating system on which you are installing Flutter
2. Download and Extract the zip file (for example, C:\flutter)
3. Add the Flutter plugin in your IDE (for example, Android Studio)

https://flutter.dev/

https://pub.dev/

https://dart.dev/

Thanks to the help of available Flutter packages pub.dev that

facilitate its execution such as the:
• Google Maps Flutter Package,
• Flutter Location Plugin

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
Avantages Flutter Archi App Installation Concepts Etude de cas

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
Avantages Flutter Archi App Installation Concepts Etude de cas

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
Avantages Flutter Archi App Installation Concepts Etude de cas

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
Avantages React Native App Installation Concepts Etude de cas

But: Etre capable de concevoir et réaliser une Application mobile

Cross-platform fonctionnelle avec Flutter utilisant FireBase et la
Géolocalisation Google Maps nommée CovidTracker

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com
Avantages Flutter Archi App Installation Concepts Etude de cas

Le Règlement général sur la protection des

données (RGPD)

Reformat code Control+Alt+L Command+Option+L

Auto-indent lines Control+Alt+I Control+Option+I

Comment/uncomment with Control+/ Command+/

line comment

Comment/uncomment with Control+Shift+/ Command+Shift+/

block comment

https://developer.android.com/studio/intro/keyboard-shortcuts

Développement d’Applications Mobiles Flutter

Copyright: bousmah@gmail.com