Découvrir Flutter, l’outil permettant de créer des applications iOS et Android

Flutter est un framework open source UI développé par les ingénieurs de Google pour créer des applications natives multiplateformes. Depuis la publication de sa première version en 2017, Flutter est considéré à la fois comme un processus, une philosophie et une communauté.

Cet outil présente tous les avantages des autres outils multiplateformes, notamment le fait de cibler plusieurs plateformes. Flutter permet de créer des applications pour iOS et Android ainsi que des sites web et des applications desktop pour macOS, Windows et Linux à partir d’une seule base de code. Cette fonctionnalité rend la construction d’applications plus simple et plus rapide.

Les applications Flutter sont développées en langage de programmation Dart. Il s’agit d’un langage orienté objet de famille C : si vous maîtrisez C#, Kotlin, Swift ou Java, vous trouverez Dart très familier et serez rapidement à l’aise. Vous pouvez compiler Dart en code natif, ce qui rend votre application rapide, et grâce au moteur de rendu visuel Skia, les applications développées en Flutter présentent une performance très proche, voire identique, à celles des applications développées en langages natives (Swift ou Kotlin).

Quels sont les avantages de Flutter ?

L’utilisation de Flutter par les développeurs s’explique par les nombreux avantages de cet outil :

Flutter est open source. Vous pouvez donc contribuer au code source du framework, suivre son évolution et même essayer les nouvelles fonctionnalités en cours de développement.
Flutter met à disposition de superbes animations et des transitions élaborées. Vous pouvez également créer les éléments UI personnalisés. Comme les widgets sont composables, vous pouvez être créatif et flexible avec l’UI.
Flutter utilise une approche déclarative pour concevoir les écrans. La seule différence avec SwiftUI ou Jetpack Compose est qu’il permet de cibler toutes les plateformes à partir de la même base de code.
Dart est un langage moderne, axé sur l’interface utilisateur. Il est compilé en code natif ARM ou x86 ou en Javascript. Il prend en charge toutes les grandes fonctionnalités du langage que les développeurs ont appris à apprécier (et attendent !), telles que async / await pour la gestion des processus d’exécutions et l’inférence des types.
Le Hot reload (ou rechargement à chaud) permet d’effectuer des mises à jour du code et de l’interface utilisateur qui reconstruisent l’arborescence des widgets. Elle peuvent ensuite être diffusées en direct sur les émulateurs et les appareils – sans avoir à recharger l’état ou à recompiler l’application.

Les inconvénients de Flutter

Bien que Flutter présente de nombreux avantages, on peut toutefois relever quelques points négatifs dans l’utilisation de cet outil.

Flutter n’est pas le meilleur outil pour toutes les applications. Détaillons à présent deux domaines dans lesquels son utilisation comporte des limites.

Flutter n’est pas fait pour les jeux vidéos

S’il est possible de créer des jeux 2D simples à l’aide de Flutter, pour des jeux 2D et 3D complexes, vous préférerez probablement baser votre application sur une technologie de moteur de jeu multiplateforme telle qu’Unity. Cette dernière dispose des fonctionnalités plus spécifiques au domaine, comme la physique, la gestion des sprites (élément graphiques pouvant se déplacer sur l’écran), des ressources, la prise en charge du multijoueur, etc.

Cas des applications nécessitant un SDK natif spécifique

Flutter prend en charge de nombreuses fonctionnalités natives. Si votre application est fortement intégrée aux fonctionnalités d’un appareil et aux SDK (kit de développement) de la plateforme, il peut être intéressant d’écrire l’application en utilisant les outils spécifiques à la plateforme. Heureusement, vous pouvez généralement créer des ponts vers le code natif de la plateforme. Toutefois, Flutter ne fonctionne pas sur tous les types d’appareils existants. Par exemple, il ne prend pas encore en charge watchOS, tvOS ou widgets d’iOS 14, et sa prise en charge du web reste limitée.

Les recommandations de Cellenza dans l’utilisation de Flutter

Vous êtes Tech Lead ou responsable mobile ? Vous vous demandez pourquoi utiliser Flutter ?

Nous vous proposons quelques recommandations à suivre sur l’utilisation, le développement et l’approche de cet outil.

Recommandation 1 : « keep widgets under control»

Pour éviter de vous retrouver avec un code long, illisible, comportant plusieurs centaines de lignes compliquées à lire, il est conseillé de bien découper les vues (views) et le code métier. En découpant vos widgets, vous vous faciliterez la lecture du code. Il est donc conseillé d’éviter les grands arbres au profit d’un découpage du code en petits widgets : cette méthode vous permettra par ailleurs plus facilement de réutiliser le code.

Recommandation 2 : utilisez les tests unitaires et les tests widgets

Un test unitaire permet de vérifier qu’un morceau de code respecte les consignes de bonne pratique. L’utilisation des tests unitaires et des tests widgets vous permet de vous assurer qu’un changement du code n’aura pas d’impact sur la logique mise en place. Contrairement à la plupart des frameworks mobiles, Flutter permet de réaliser les tests UI aussi simples que s’il s’agissait de tests unitaires.

Recommandation 3 : pensez aux animations

Flutter propose plusieurs outils permettant d’enrichir l’expérience utilisateur :

Rive et Lottie: deux outils externes intégrables à Flutter
AnimationController: disponible avec le framework.

En les utilisant, vous serez en capacité de réaliser facilement des animations très intéressantes et de rendre votre application beaucoup plus attractive pour l’utilisateur.

Recommandation 4 : limitez les packages

Les packages (ou paquets) sont des sources externes et fonctionnalités déjà existantes, utilisable sans avoir à les récréer (ex : accès au fichier caméra, accès à la base de données…). Très pratiques, ils ne doivent pourtant utilisés que lorsqu’ils sont nécessaires. Les packages peuvent être un bon choix lorsque vous souhaitez accélérer votre processus de construction et Pub (le Package manager du langage de programmation Dart) en contient un très grand nombre. Toutefois, soyez vigilants avec l’utilisation de ces packages : utilisés sans étude préalable, ils risquent d’avoir des effets significatifs sur votre application à moyen et longue terme.

Cas d’usage de Flutter

Dans le cadre de la Cellenza Mobile Academy, j’ai développé une application « DSM Manager ». Cette application avait pour objet d’encadrer les réunions dans le cadre d’une équipe agile. Le but de cette application ? Timeboxer les réunions pour éviter les dépassements de temps des Daily Stand-up Meetings !

L’application a été créée sous un framework Flutter pour iOS et Android. Un projet qui a nécessité 6 semaines de développement.

Plusieurs besoins avaient été identifiés :

Possibilité de gérer plusieurs sessions simultanément ;
Configuration des sessions selon les besoins (durée, nombre de participants…) ;
Mode light / dark.

Les grandes étapes du projet :

Choix de l’architecture : Flutter propose un très large choix d’architectures (BLoC (Business Logic Component è en savoir plus sur le State Management en Flutter) / Redux / Provider / Inherited Widget…). Dans le cas de ce projet d’application, j’ai choisi BLoC qui est l’approche la plus adaptée, la plus « clean » et la plus native pour les développeurs mobiles (la plus proche, de mon point de vue, du pattern MVVM – Model-View-ViewModel).
Intégration des animations : Flutter permets d’intégrer de manière assez simple dans vos applications des animations , qui peuvent avoir un effet important pour vos utilisateurs. Dans le cadre de ce projet « DSM Manager », j’ai testé différents types d’applications: Hero, AnimatoionController et Lottie. J’ai utilisé Hero pour les transitions entre les écrans de l’application, Lottie pour l’animation des icônes et boutons, et AnimationController pour les autres animations.
Continuous integraion / Continuous delivery : pour mon projet, j’ai pris la décision d’héberger le code d’application dans une repository AzureDevOps. J’y ’ai configuré les pipelines des build et release pour déployer mon application dans AppCenter (en savoir plus sur Flutter + AzureDevOps).

Flutter : l’essentiel à retenir

Flutter est une nouvelle approche permettant de développer les applications natives multiplateformes avec une forte identité visuelle. Un outil moderne, progressif, robuste et rapide qui facilitera la vie des développeurs mobiles.

Vous souhaitez en savoir plus sur les différentes technologies pour créer une App ? Découvrez notre série d’articles sur le sujet :