Entrez dans Flutter, l'entrée de Google dans le monde des frameworks multiplateformes. Pas nécessairement nouveau sur la scène, avec la version 1.0 lancée en 2018, Flutter continue de grandir et d'ajouter des fonctionnalités et des améliorations. Basé sur le langage Dart propre à Google, Flutter offre des graphismes fluides et des performances quasi-natives quelle que soit la plateforme sur laquelle il s'exécute.
Récemment, j'ai eu l'occasion de construire une application de base utilisant Flutter qui accède à l'API IMDB. Elle permet simplement à l'utilisateur d'entrer un mot de recherche de titre, affiche les résultats dans une liste et lorsque l'on touche une entrée, les détails de ce film s'affichent. L'inspiration est venue de notre pratique mobile ici à Improving, qui a travaillé sur du matériel de formation iOS pour ceux qui souhaitent apprendre à écrire des applications iOS. Si vous voulez essayer ce que j'ai écrit, vous devrez demander votre propre clé API. Le lien vers le dépôt du projet se trouve au bas de cet article.
Voici l'application en action sur Android :
Démarrer avec Flutter
Pour commencer avec Flutter, il est nécessaire d'installer le SDK Flutter et un outil de développement. IntelliJ IDEA ou Android Studio sont d'excellents choix qui disposent de plugins matures pour faciliter le développement. Visual Studio Code est un autre choix. Personnellement, je ne l'ai pas utilisé pour le développement de Flutter, mais je crois savoir que des plugins sont également disponibles pour cet IDE. Lisez et suivez les instructions d'installation de Flutter pour démarrer rapidement. Le seul problème que j'ai rencontré a été l'installation de CocoaPods sur MacOS. J'ai fini par utiliser homebrew pour installer CocoaPods au lieu d'utiliser l'installateur gem. CocoaPods n'est pas nécessaire si vous souhaitez uniquement développer avec Android. L'installation de CocoaPods n'est pas nécessaire si vous souhaitez uniquement développer avec Android. flutter doctor vous dira si vous avez tout installé correctement et vous indiquera ce qui doit être corrigé.
Lorsque vous créez un nouveau projet, que ce soit en ligne de commande ou avec l'IDE de votre choix, une application basique est construite pour compter le nombre de fois qu'un bouton a été pressé. Il n'y a rien d'extraordinaire, mais le code est bien commenté pour montrer ce que font tous les éléments. Pour commencer à développer, presque tout ce code doit être supprimé et de nouveaux widgets doivent être mis à la place de ce qui a été supprimé.
Tout dans Flutter est un widget
En parlant de widgets, presque tout dans Flutter est un widget. Flutter dispose d'une large sélection de widgets utilisés pour permettre aux utilisateurs d'interagir avec une application, ainsi que des widgets qui aident à la mise en page, au positionnement et à l'animation. Si un widget ne répond pas à un besoin, de nouveaux widgets peuvent être construits en étendant un widget existant ou en composant un nouveau widget. Pour moi, je pense que la chose la plus difficile à propos de Flutter est de savoir quels widgets existent et comment ils fonctionnent, en particulier en ce qui concerne la mise en page.
Les widgets sont soit avec état, soit sans état. Les widgets sans état sont considérés comme légers et sont utilisés pour des choses où la configuration du widget ne change pas. Si le widget doit être modifié, il est jeté et remplacé par un nouveau widget avec la nouvelle configuration. Les widgets avec état sont utilisés lorsque le widget doit changer dynamiquement ou lorsqu'il existe des dépendances en dehors du widget. Il est nécessaire pour le développeur de notifier Flutter lorsque l'état change afin que le widget puisse être redessiné. Il peut être difficile de choisir le bon type de widget et au fur et à mesure que le développement progresse, le widget peut passer de sans état à avec état ou même l'inverse si un widget est simplifié.
Un exemple de widget sans état est un texte est un exemple de widget sans état. Une fois configuré, il n'a pas besoin d'être modifié. Il aura toujours une certaine valeur, et la police et la taille resteront les mêmes. En comparaison, un exemple de widget avec état est TextField. Il est censé changer au fur et à mesure que l'utilisateur tape sur le clavier.
Lors de la création d'une application, les widgets sont disposés dans un arbre, un peu comme le font les développeurs Java avec la boîte à outils Swing. Presque tous les aspects d'un widget peuvent être configurés. Par exemple, un widget texte affiche simplement du texte à l'écran. Cependant, la taille, la police, la direction, l'alignement, ce qui se passe en cas de débordement, et bien d'autres choses encore peuvent être spécifiées. Une application Flutter peut être magnifique !
Qu'en est-il de Dart ?
En ce qui concerne le langage Dart, il s'agit d'un langage syntaxique de style C qui n'est pas sans rappeler JavaScript ou Java. Il est orienté objet, collecte les déchets et possède de nombreuses autres caractéristiques que l'on retrouve dans les langages populaires. Il utilise le modèle async/await qui renvoie des Futures. Tout cela se passe à l'intérieur d'une boucle d'événements comme celle utilisée par JavaScript. C'est un langage très confortable pour développer.
La partie la plus difficile de Dart pour moi est le modèle async/await et la façon dont il est viral dans la pile d'appels. Une fois qu'une méthode est étiquetée comme asynchrone, tout ce qui l'appelle doit être asynchrone. C'est une façon très différente d'écrire du code par rapport à mes expériences précédentes avec Java et les langages apparentés. C'est cependant nécessaire dans Flutter pour que l'interface utilisateur reste réactive et fluide. Flutter a un modèle à un seul thread avec une boucle d'événements pour traiter les événements. Il est possible de créer plus de threads (ou d'isolats comme Dart les implémente) pour exécuter des tâches de traitement plus lourdes, ce qui permet à l'application de rester réactive.
Puis-je tester cette chose ?
Oui ! Les tests unitaires, les tests de widgets et les tests d'intégration sont tous pris en charge. Les tests unitaires sont faciles à écrire en utilisant Mockito for Dart pour simuler les dépendances externes. Les tests de widgets permettent à un développeur de s'assurer que lorsqu'un bouton est pressé, le comportement attendu est affiché à l'écran. Les tests d'intégration peuvent être exécutés sur des appareils réels ou émulés pour s'assurer que toutes les parties de l'application fonctionnent ensemble.
J'ai trouvé que les tests étaient simples et ne ressemblaient pas à d'autres cadres de test. Les tests apparentés peuvent être regroupés et une série de correspondances est disponible. Le test unitaire du code de la couche intermédiaire est facile en utilisant Mockito pour simuler les dépendances externes. Mockito est également utile pour tester les widgets afin de simuler le code de la couche intermédiaire. Je n'ai pas essayé un test d'intégration complet, mais il semble être très similaire aux tests de widgets où les attentes du comportement de l'interface utilisateur sont vérifiées après l'interaction avec l'interface utilisateur.
Mon expérience avec Flutter
La construction de ce petit exemple d'application m'a montré à quel point une interface utilisateur peut être construite rapidement avec Flutter. J'avais déjà une certaine expérience de Flutter, mais il m'a fallu moins d'une journée pour l'écrire, plus une autre journée partielle pour comprendre comment la tester correctement. Mes plus gros problèmes étaient les suivants : Quels widgets de mise en page devrais-je utiliser, surmonter un truc bizarre de version d'iOS avec les simulateurs d'iOS (sans rapport avec Flutter), et trouver quelles bibliothèques Linux supplémentaires j'avais besoin pour faire fonctionner mon application sur Linux. Dans mon cas, j'ai eu besoin d'installer quelques bibliothèques C++ supplémentaires ainsi qu'une pour supporter la bibliothèque flutter_secure_storage pour que l'application Linux puisse être compilée. L'utilisation d'IntelliJ IDEA avec les émulateurs Android a parfaitement fonctionné. La fonctionnalité de rechargement à chaud permet également de construire des interfaces avec un retour d'information rapide.
La documentation de Flutter est également très solide. Tous les widgets que j'ai consultés étaient accompagnés d'une brève explication et d'un exemple de code montrant comment les utiliser. Les bibliothèques tierces sont également nombreuses, bien que la qualité de la documentation de ces bibliothèques soit un peu mitigée. En parcourant rapidement le site https://pub.dev (le dépôt officiel de paquets pour Dart), il semble qu'il y ait une bibliothèque disponible pour de nombreux besoins courants et d'autres moins courants. Il y a de nombreuses réponses à des questions sur Stack Overflow, de nombreux articles de blog et d'autres moyens d'obtenir de l'aide. La communauté Flutter semble très active.
Devrais-je utiliser Flutter pour mon application ?
La réponse est la même pour la plupart des choses : cela dépend. Je pense que vous devriez fortement l'envisager.
Si vous avez besoin d'une application qui fonctionne sur plus d'une plateforme, de manière native, c'est un choix évident. Si vous cherchez à créer une belle interface utilisateur avec Material ou le langage de conception d'Apple, vous devriez utiliser Flutter. Je pense également que toute application, quelle que soit sa taille, est un bon candidat pour utiliser Flutter.
Flutter n'est pas forcément un bon choix si vous avez besoin d'un matériel spécifique qui n'existe que sur une plateforme. La même fonctionnalité n'existera pas sur une autre plateforme et il n'y aura probablement pas de bibliothèque Dart pour la prendre en charge. Mais Flutter prend en charge l'utilisation d'API spécifiques à une plateforme, ce qui reste une possibilité.
La question qu'il convient de se poser est la suivante : "Pourquoi ne devrais-je pas utiliser Flutter pour ma prochaine application ?".
Liens connexes
Page d'accueil de Flutter - https://flutter.dev/
Page d'accueil du langage Dart - https://dart.dev/
Référentiel de paquets Dart / Flutter - https://pub.dev/
IMDB API - (EN ANGLAIS) https://imdb-api.com/
Référentiel de projets d'exemple - https://github.com/improving-minnesota/flutter-imdb
