Ce tutorial est une démonstration en laboratoire pour le plaisir, à but non lucratif, pour montrer que le concept est possible, ou pour un cours dans le cadre scolaire. Ne testez pas dans un environnement réel de production
Flutter pour créer facilement des applications mobiles: qu'est-ce que flutter?
Que de chemin parcouru depuis la version release preview 1 en 2018 ! Pour rappel, Flutter est un framework, un SDK, qui permet de développer des apps mobiles Android et IOS, mais maintenant il permet aussi en même temps de créer les environnements desktop et web. Patrice de Saint Steban, dev fullstack à Nantes, nous présente cette évolution.
Une fonctionnalité intéréssante est arrivée: le hot reload ou hot reloading lors de la mise à jour sur l’app. C'est un raffraichissement automatique de l'écran lorsque le code a changé dans l'éditeur. Ca permet d'éviter de demander au nivigateur de raffraichir la page à chaque fois, ou d'appuyer sur F5.
Flutter pour créer facilement des applications mobiles: timeline
2018 ios android
2019 web
2020 beta
2021 flutter2
2022 flutter 3
2023 flutter 3.7 janvier
Flutter pour créer facilement des applications mobiles: Dart?
Flutter utilise le Langage objet Dart, créé par Google en 2010, et compilé dans le langage natif de la multiplateforme cible, soit ios android, web desktop, ou embarqué
Flutter est inspiré du web avec react JS, react native, hot reload (librairies javascript)
Un des gros interets c'est que Flutter est open source.
700 000 apps sur le play store, 1 sur 5
30000 packages flutters disponibles pour nos apps
Ce SDK open source intègre des notions de composants, et se base sur des bibliothèque de widgets créées par la communauté (Android, IOS)
Le langage Dart, a été créé par Google en 2010 (pour remplacer javascript, résoudre tous les problèmes de performances) Dart change de direction.
Dart s’execute sur une machine virtuelle, un VM, comme Java, C#... Il rienté objet fortement typé (comparé à javascript)
Flutter est mono thread, isolate (comme Kotlin) et permet des traitements asynchrones (les Future en Dart, équivalents aux promises de javascript)
On peut l'utiliser pour faire de la programmation reactive, utiliser des streams comme RXJS en java
Flutter pour créer facilement des applications mobiles: pourquoi Flutter utilise-t-il DART ?
La compilation permet de transformer le développement DART en multi langage sur les environnements Android, IOS et web et embarqué
La couche SKIA permet de dessiner les écrans (utilisé par chrome aussi)
On a de la compilation Just in time JIT et AOT Aheat Of Time
Fast allocation (les objets sont rapidement créés en mémoire)
On a un garbage collector qui fonctionne de manière transparente (il n’arrête pas l’app comme celui de Java)
Il existe un gestionnaire de dépendances (comme javscript NPM ou MAVEN en Java)
Flutter pour créer facilement des applications mobiles: quelle architecture?
3 couches
Framework DART :
Couche 1) Material/Cupertino/Widgets/Rendu/animations/gestes/fondation
Couche 2) Moteur C++, Skia, Dart, channels pour communiquer entre plateformes
Couche 3) Patesformes, Android, IOS, web, desktop
Application : code Dart compilé qui contient l’arbre composants (virtual tree) un peu comme react et son Virtual Dom, et le rendering va dessiner sur le canvas
La platform channel qui dialogue avec les API natives (son, app photo…)
En flutter tout est Widget et chacun a sa responsabilité
Flutter pour créer facilement des applications mobiles: les types de widgets
2 types de widgets :
stateless, méthode build, comme react
stateteful, le widget a un état, méthode createstate qui contient un état et une méthode build, avec une méthode pour modifier l’état, et rappeler le build pour reconstruire le widget.
Objet, state<T> : createdn nitState, build, dispose
Flutter pour créer facilement des applications mobiles: le Hello world
L'IDE lance ces commandes pour initialiser l'application:
flutter create –platforms android,ios,windows,linux,macos,web my app
Ensuite pour lancer l'application en fonction de l'environnement:
flutter run
flutter run -d chrome
flutter run -d macos
Flutter pour créer facilement des applications mobiles: l'environnement de dev
Flutter peut-être utilisé sur les IDE (Integrated development editor) classiques comme Android Studio, Intellij, Vscode, fonctionnant sous Windows, Linux, MacOS… Il y a même des modules pour imacs, vim pour les puristes
Flutter CLI , la command line interface permet de debugger si besoin
Live & hot reloading, même avec un tel branché sur le device de dev ça fonctionne nickel
L'inspecteur d’arbre de composant
On a les tests unitaires, widgets et tests d’integrations gérés, « golden test » image du rendu et comparaison de l’image
Le profiling pour voir les performances
Le formating de code
Exemples sous Intellig/Android studio ou Vscode, on utilise l'API animation, l'API gesture...
Flutter pour créer facilement des applications mobiles: Multiplateforme?
Une même app deployée sur tous ces environnements: Android, ios, desktop, web, embedded
On a même vu des exemple en embedded sur des terminaux Google home ou sur les voitures, les tableaux de bords
Dialogue avec code natif : on peut appeler du code spécifique à la plateforme (grace aux plateforme channels) on dialogue avec le code natif par exemple en Swift ou Java, Kotlin sur les montres connectées.
Sur la montre, un objet connecté, il y aura toujours du code natif, mais il sera géré par flutter
Grace à la librairie Pigeon : on écrit du DART, et il génére le code équivalent en Kotlin Swift et C++ et il s’occupe de serialiser les objets, les appels…
Flutter pour créer facilement des applications mobiles: comparaison avec les autres environnements de dev
Comparé à React native qui fonctionne en javascript et qui dialogue avec un bridge et dialogue avec la plateforme : on utilise le même textbox de base Android ou IOS. Inconvénient : TOUT est en javascript dans une VM javascript.
Comparé en Cordova (html, css, javascript) /electron (vscode est une app electron): on écrit en mode web, navigateur qui affiche l’app web, vers une webview et un GPU. L'interet est d'utiliser Cordova si on a juste un site internet, une application web (web first) à transformer en application mobile. Exemple avec un site en Python Django.
Si vous etes en mobile first, c'est à dire que votre business est axé en priorité sur les application mobiles, react native peut etre pas mal aussi.
Et si vous partez sur de un déploiement complet en web, mobile, embarqués, et dektop, Flutter est clairement à son avantage.
Attention aux outils d’analytics qui n’ont pas de SDKS en DART, mais qui l’ont en natif, mais on peut toujours appeler ces SDKs via pigeon
Flutter pour créer facilement des applications mobiles: qui est-ce qui l'utilise?
SNCF connect, app toute en flutter
Google Pay
BMW
Ubuntu, l’installateur est écrit avec Flutter
Philips hue
Rive, version desktop et web, pour créer des animations (ont migré leur ancienne application javscript vers flutter)
Wiztivi pour france24, app video sur la télé, en a découlé, la version mobile te la version site web
Toyota, sur un écran dans la voiture
Les développeurs natifs qui ont envie d'avoir un MVP rapide en méthodologie Devops font leur POC en Flutter, et ensuite, comme tout ce qui est fait n'est plus à faire, les demandes de nouvelles features arrivent
Flutter pour créer facilement des applications mobiles: liens intéréssants
https://pub.dev/ Le répertoire officiel des packages pour Dart et Flutter.
Cet article reflète exclusivement l'opinion de ses auteurs et n’engage en aucune façon Consultingit. J'espère que ça vous a plu. Vos commentaires/remarques sont les bienvenus:
Besoin d'aide avec Flutter? L'association Consultingit peut vous aider