Sunny Tech 2022 – Comment bien démarrer avec Flutter ?

L’équipe Kaliop a eu la chance de participer à l’édition 2022 de la Sunny Tech qui se tenait les 30 juin et 1er juillet 2022 à Montpellier. Nous avons déjà partagé plusieurs articles suite à cet événement : une rétrospective globale de l’événement, un article sur les feature flags, un article sur l’histoire des navigateurs web… Nous vous proposons aujourd’hui de revenir sur la conférence « Première appli mobile Flutter ? Ne faites pas les mêmes erreurs que nous ! », présentée par Olivier Revial et Sébastien Flochlay de Stack Labs, tous deux développeurs Flutter, et qui nous ont apporté leurs conseils et bonnes pratiques pour bien débuter en Flutter. 

Flutter, c’est quoi ?

Flutter est un framework applicatif open-source et cross-platform, avec une seule et même codebase, développé par Google. Il permet de concevoir des applications natives pour le mobile (iOS, Android), pour le web (Web apps) et pour desktop (Windows, McOS, Linux). Il s’agit d’une alternative à React Native ou encore Cordova.

Aujourd’hui, Flutter compte environ 400 000 applications en production avec notamment de grands groupes qui se sont lancés comme Toyota, BMW, Alibaba Group ou encore SNCF Connect.

Quelques conseils pour bien démarrer avec Flutter

Dans un premier temps, il est indispensable de maîtriser Dart avant de se lancer. La bonne nouvelle est que Dart et Flutter s’apprennent rapidement. Beaucoup de ressources sont disponibles : la documentation Flutter est bien écrite et détaillée, on y retrouve notamment un learning center, des cookbooks, workshops et également des tutoriels.

Il existe aussi d’autres ressources pour bien se former, comme la plateforme de cours en ligne Udemy, qui propose de très bonnes formations Flutter. On peut en citer notamment deux :

• The Complete 2021 Flutter Development Bootcamp with Dart du Dr. Angela Yu
• Flutter & Dart – The Complete Guide [2022 Edition] de Maximilian Schwarzmüller

Youtube constitue également une bonne source d’information concernant Flutter. 

Côté conférences, on retrouve une grande communauté : 

• dartUP 2022
• Flutter Global Summit
• Flutter Engage 
• Flutter Vikings
• Flutter Europe
• Meetups

Pour rester informé.e des nouveautés, il peut être intéressant de s’abonner à la newsletter de Flutter, la Flutter Digest, qui propose des actualités sur Flutter et le mobile en général, tous les lundis. 

Enfin, les speakers nous ont partagé quelques liens indispensable de la communauté Flutter : 

• Le slack des développeurs Flutter
• Le discord des développeurs Flutter
• Le reddit des développeurs Flutter

Que ce soit 5, 10, 15 jours ou plus, l’essentiel est de comprendre Dart et de se jeter à l’eau. 

Il est important de noter que Dart est un langage orienté objet. Les conférenciers ont pensé à tout et ont préparé une liste de spécificités pour bien comprendre et bien démarrer avec Dart. 

Faire une bonne installation

Lorsque vous aurez correctement installé Flutter, vous serez enfin prêt.e à démarrer. Voici quelques commandes pour vous aider dans l’installation et la création de votre première app : 

• Flutter —version Connaitre votre version installée de Flutter
• Flutter upgrade updater la version de Flutter
• Flutter doctor détections de problèmes relatif à Flutter, iOs et android
• Flutter create —org com.organiezationName my_app creation d’une app Flutter

Pour aller plus loin, il y a l’outil FVM à connaître : Flutter Version Management, qui permet de jongler avec plusieurs versions de Flutter.

Maîtriser l’environnement de développement

Différence entre hot reload et hot restart

Le hot reload permet de reloader rapidement l’application afin de voir les changements que l’on a effectués instantanément. Attention, car ici on ne recharge pas le build Context. 

Le hot restart, plus rapide qu’un restart classique, permet lui un rechargement complet du state. 

Utiliser les linters

Les linters aident à la maintenabilité et la qualité du code. On peut utiliser notamment flutter_lints.

Quick-fix, auto-formatage et auto-completion

Les quick-fix proposés sont majoritairement très utiles. L’auto-formatage est très efficace et utile, notamment lorsque l’on a des widgets imbriqués les uns dans les autres. Enfin, l’auto-complétion permet de coder plus rapidement, car on a un visuel global des différents paramètres que l’on peut mettre en place.

Réalisation de l’app

On peut citer quelques outils pour maquetter facilement une app Flutter tels que Figma, Zeplin ou encore FlutterFlow qui permet de générer une application Flutter avec moins de code et en utilisant le browser. Autre design system du même genre : supernova.

Theming

Flutter permet d’avoir une interface graphique Cupertino (iOS) ou Material (Android). La mise à jour de Material Design 3 sortie récemment, permet maintenant de mettre en place un thème avec encore moins de lignes de code, tout en ayant la possibilité d’avoir un dark mode et de l’adapter facilement à son thème. 

Utilisation du thème en Flutter

Le thème se définit dans le fichier main avec l’objet Theme : c’est ici qu’on va définir le thème global en termes de police, de couleur, de spécificités design…

L’accessibilité

L’accessibilité permet d’ouvrir l’application à un plus grand nombre d’utilisateurs. La version 3 de Flutter permet une gestion facile de celle-ci. Le principal conseil ici est de penser à l’intégrer dès le début pour ne pas oublier de le faire. 

Le responsive et l’adaptive

Flutter permet d’adapter votre application à différentes tailles d’écran avec le responsive. L’adaptive permet d’adapter l’application aux différents devices : téléphones, tablettes, montres, desktop…

L’internationalisation

Elle permet de traduire votre application dans plusieurs langues. Flutter met à disposition une documentation dédiée à l’internationalisation. 

Définir des règles de nommage et une arborescence structurée du projet

Les fichiers deviennent vite nombreux, c’est pourquoi il est indispensable de structurer son projet. Plusieurs configurations sont possibles : folder-by-type, folder-by-layer, folder-by-feature, etc. 

Utilisation du state management

Le state management n’est pas propre à Flutter, mais il demeure indispensable à votre application car il vous permettra la gestion de l’affichage de la data instantanée dans vos différentes pages. Il en existe une multitude (Provider, bloC, redux…).

Persister la donnée

Encore ici beaucoup d’outils optimisés permettent la persistance de la donnée (shared_preferences, Flutter secure storage, Hive ou encore Hydrated bloc)…

Testing

Différents tests (fonctionnels, d’intégration, unitaires…) sont disponibles sur Flutter. Les tests unitaires vont permettre de tester le code fonctionnel, on a également les tests widgets qui vont permettre de tester un widget dans sa globalité ou encore les tests goldens qui sont également des tests widgets, mais font une comparaison avec une image et attendent que le widget ressemble à l’image. On peut également réaliser des tests d’intégration et aussi du code coverage par rapport aux tests précédemment écrits.

Flutter Dev Tools

Les Flutters dev tools sont différents outils de debug et d’analyse qui permettent d’améliorer les performances de votre application. Elles doivent être installées dans votre ide.

App Store et Google Play Store

Bien anticiper les fiches à poster sur les stores par rapport au niveau d’exigence et au délai de chaque plateforme pour pouvoir publier sereinement votre application.

Olivier Revial et Sébastien Flochlay nous offrent ici les meilleures astuces pour bien démarrer en Flutter et être accompagné au mieux dans la réalisation d’une application. L’essentiel des outils Flutter et des spécifications du langage Dart se trouvent dans cet article, mais vous pouvez aussi retrouver la présentation complète. Si vous voulez aller plus loin, j’ai également rédigé un article qui s’intitule : Flutter est-elle LA techno du moment ? J’y présente la techno, pourquoi elle suscite un tel engouement et ses grands principes de fonctionnement. 

Alors ne foncez pas tête baissée ! Happy Coding !