Sur notre dernière application Flutter chez BAM, nous avons travaillé avec une designeuse, qui n'avait jamais travaillé avec une équipe Flutter. L'application avait pour but de transmettre des informations de manière claire et efficace pour une app d'e-learning autour de l'anatomie humaine.

La collaboration avec l'équipe de développement s'est bien passée et la designeuse a remarqué certains points qui fluidifiaient le travail de design grâce à Flutter.

Pour avoir le contexte complet, il faut savoir que l'application développée avait une version Android, iOS mais aussi Web. En effet, grâce à Flutter Web, nous avons pu faire un produit totalement crossplatform sans compromis et sans devoir retravailler les composants. Cela nous a aussi permis d'avoir un design cohérent sur tablette, notamment sur iPad, un type de device souvent oublié lors du développement mobile.

1. Trois plateformes, un design

L'une des choses qui a été le plus remontée lors du projet, c'est la qualité de l'intégration des designs et l'absence de compromis lors de l'intégration, quel que soit le design.

En effet, chez Bam, on est souvent habitué à devoir retravailler certaines parties de design en fonction de la technologie utilisée. Par exemple, sur React Native, il faut parfois travailler avec des ombres plus simples afin d'avoir un rendu similaire suivant la plateforme. Sur Android notamment, les ombres peuvent être mal gérées par certains devices.

Sur Flutter, l'intégralité de l'affichage est gérée par un moteur Skia. S'il a parfois le désavantage de ne pas réutiliser le design de la plateforme native, il permet par contre d'avoir une interface graphique unifiée sur tous les appareils. 

Cela permet d'avoir un branding fort et cohérent pour votre application sans faire de compromis sur l'apparence.

Côté développement cela permet aussi de fluidifer les processus. En effet, les développeurs, quand ils développent une fonctionnalité, peuvent se concentrer uniquement sur un device. Pas besoin de faire des aller-retours entre un téléphone iOS et 2 téléphones Android pour être sûr d'avoir le bon design.

2. Une intégration plus rapide avec Flutter

La designeuse a aussi remonté que les intégrations se déroulaient plus rapidement sur les designs. En effet, l'équipe peut unifier le test des design. Cela signifie que lors du développement, nous pouvons tester le rendu des Widgets sur un seul device (par exemple un iPhone) et être sûr que le rendu sera similaire sur les autres plateformes. Cela nous a permis de gagner du temps sur l'intégration. Celui-ci nous a permis de nous concentrer sur des petits détails UI qui facilitent l'immersion pour l'utilisateur final. 

Par exemple, grâce au widget Hero, vous pouvez facilement créer une animation entre 2 pages en Flutter. Vous pouvez notamment lire l'article de GuillaumeDM qui a décortiqué cette animation afin de mieux la comprendre.

Le fait que les composants soient similaires sur toutes les plateformes libère aussi du temps lors de la validation des design par le PO. En effet, en testant directement sur le web, il est possible en ajustant la taille de la page Web d'avoir un aperçu très rapide du rendu sur tous les types de devices sans devoir tous les allumer (on a un device lab très fourni chez BAM qui permet justement de tous les gérer).

Tout ça nous permet de nous concentrer sur la partie business du produit, l'UI étant juste un support pour le business de notre client.

3. Du temps libéré pour améliorer l'expérience utilisateur

Maintenant qu'on a vu ce qu'il était possible de réaliser avec Flutter sur du design, il reste l'étape suivante, optimiser les designs et se concentrer sur des détails qui ne seraient pas possibles à faire aussi rapidement dans d'autres technologies.

Aujourd'hui, la majorité des grosses applications introduisent des micro animations afin de renforcer l'implication des utilisateurs. Par exemple, lorsque Twitter a ajouté une animation sur son bouton 'J'aime', l'utilisation de ce bouton a fortement progressé. 

En se concentrant et en ajoutant des micro animations au sein d'une application, on peut donc augmenter la rétention des utilisateurs. 

On peut aussi imaginer généraliser le fait d'avoir une version web pour les applications mobiles. En effet, le rendu des applications web sur les dernières versions de Flutter est bluffant. La majorité des plugins sont directement disponibles sans aucune modification, ce qui permet de porter une application sans aucune modification.

On peut donc ainsi imaginer une application qui a une preview en mode web disponible. Cela peut permettre d'essayer une application sans avoir à l'installer et donc faciliter l'onboarding des utilisateurs. Pour une application social ou de partage, cela peut être notamment très utile pour faire grossir une base d'utilisateurs.

Conclusion

Aujourd'hui, Flutter est utilisé majoritairement pour les applications mobiles. Mais à mesure que le framework muri, nous pouvons améliorer la qualité et la vitesse de delivery. Ce qui signifie qu'on peut ensuite passer plus de temps à ajouter des fonctionnalités optionnelles, mais qui peuvent rajouter une vraie valeur à nos clients.