Flutter: Rex d’une première Expérience

Pourquoi et comment?

Contexte

Je suis développeur web depuis quelques années maintenant et avec une grosse appétence front-end. Comme beaucoup, je suis très curieux et j’ai soif d’apprendre. L’ennui et la monotonie sont deux choses qui me terrifies.

Il y’a quelques temps, j’ai entendu parler de Flutter. Un nouveau framework développé par Google. Et là ma première réaction fut:

Pourquoi Google sort un autre framework, alors qu’on dispose déjà d’Angular?!

Bref, je me dis qu’il faut que je creuse le sujet. Je vais donc sur le site officiel et je commence à lire, à me documenter et à décortiquer toute la doc.

Je comprends donc que l’idée n’est pas de remplacer Angular mais de proposer un framework capable de répondre à une problématique :

Comment développer une application accessible quelque soit la plateforme (web, iOS, Android)?

Ni une ni deux ça me donne envie d’essayer tellement ça à l’air simple.

Projet

Durant le premier confinement, j’ai monté une équipe de collègues qui comme moi se sont retrouvés en inter-contrat. On avait développé une application web permettant de visualiser sur une map les clients de notre employeur ainsi que les collègues en mission.

Voici donc mon sujet de projet : essayer de faire une application mobile répondant à ce besoin.

Rex

Installation

Franchement, il suffit de suivre la doc et c’est très simple et très clair. Personnellement, j’utilise IntelliJ sous Windows et ça a été très rapide.

• On télécharge le SDK ou on clone le repo git de flutter
• Petite mise à jour du path Windows pour faire connaître les commandes spécifiques
• Hum on n’oublie pas de redémarrer 😏
• Android studio est facultatif si vous n’avez pas dans l’objectif de dev pour Android
• IDE: personnellement, j’utilise IntelliJ et il suffit d’installer Deux plugins (Dart et Flutter)

Et voilà on est prêt à commencer 😁

Premier devs

Je crée mon nouveau projet via IntelliJ (Flutter Application). Je découvre un code démo assez basique. J’en profite pour comprendre un peu le fonctionnement, les imbrications de widgets et surtout la syntaxe.

Je commence par essayer de composer ma structure de page. Il m’en faut 4 en tout:

• Une concernant les collaborateurs
• Une concernant les clients
• Une permettant de créer des missions (lien entre un collègue et un client)
• Et enfin une pour la map

Je me rends compte que pour ne pas partir trop de travers il faut que je me documente un peu.

Je choisis donc de lire tous les cookbooks de la documentation Flutter. Ça a été un régal, tout à l’air simple et facile à mettre en place. J’ai rarement vu une doc aussi bien faite et complète.

Cependant, je me rend vite compte que je m’emballe un peu. Et oui comment je vais stocker mes données? Je n’ai pas forcément envie de mettre quelque chose de trop complexe en place. Très vite je trouve plein de solutions. Une retiens mon attention: localstore.

C’est compatible avec toutes les plateformes c’est simple à utiliser donc parfait je prends. Je peux donc créer mon petit modèle de données.

Mon petit côté pointilleux reviens à la charge. Hem et les tests unitaires? Ben oui en Angular tu fais du TDD donc là on fait quoi? Certes cette fois je n’avais pas envie de faire du TDD mais j’ai quand même mis en place des TUs. Encore une fois la doc est vraiment très bien faite.

Enfin un dernier point à aborder, qu’est ce qu’on utilise pour la map? Là y a beaucoup de choix, des solutions plus ou moins payantes. Je me suis tourné vers flutter_map. Une solution compatible avec toutes les plateformes et gratuite.

Après quelques semaines (oui je fais ça sur mon temps perso et je suis papa donc pas beaucoup de temps pour faire ça) je finis une V1 de mon appli et là quelle fierté 😁. C’est fonctionnel et sur mon iPhone ça s’utilise très bien.

Vous trouverez le repo git ici et vous pouvez jouer avec l’application ici.

Pour s’en servir en mode web app mobile, pour iOS il suffit d’ouvrir Safari, d’appuyer sur l’icône pour afficher les options de la page puis de cliquer sur « sur l’écran d’accueil ».

Conclusion

Ce fut une excellente expérience, je me vraiment amusé. Flutter est vraiment facile à prendre en main et simplifie beaucoup de comportements communs. Il fournit une sacré liste de widgets qui peut être enrichie avec d’autres librairies.

Quelques bémols:

• J’ai été déconcerté par l’absence de «protected» on est soit en privé doit en public.
• La syntaxe un peu trop flex à mon goût, je suis plutôt pro typescript très strict.

Je ne suis pas dupe, mon code n’est sûrement pas parfait et peut être amélioré. Mais mon but était de découvrir et ça le fait. C’est également pour ça que j’ai choisi GitHub pages pour déployer l’appli, simple, rapide et répond à mon besoin.

J’ai hâte en tout cas d’avoir une nouvelle idée de projet mobile que cette fois j’essayerai de pousser jusqu’au Store iOS. Affaire à suivre…

Un grand merci pour le temps passé à me lire. C’est la première fois que je fais un article en français. Je veux bien un retour là dessus en plus du reste 🙂