Astuces et meilleures pratiques pour Flutter

Au cours des dernières années, Flutter a gagné en popularité. Et pour de bonnes raisons : il s'agit d'un incroyable framework de développement d'applications multiplateformes qui vous permet de créer des applications pour les appareils mobiles, Web, de bureau et intégrés, le tout à partir d'une seule base de code. L'une des principales raisons pour lesquelles de nombreuses entreprises envisagent aujourd'hui d'utiliser Flutter est notamment due au fait qu'il fonctionne dès sa mise en place, qu'il est open source et qu'il est plus facile à comprendre que d'autres alternatives, ce qui le rend idéal pour les MVP (produit minimum viable).

Je travaille avec Flutter depuis plus d'un an maintenant. Je n'avais aucune expérience préalable avec les frameworks mobiles et Flutter a été ma première plongée dans le monde mobile. Je suis une développeuse Full Stack chez Osedea avec une formation en JavaScript, j'avais une relativement bonne base pour commencer avec Dart (langage de programmation derrière le framework Flutter). Dart est un langage relativement nouveau qui compile le code source à la fois en avance (AOT) et juste à temps (JIT). Il est similaire à JavaScript, mais le SDK Dart autonome est livré avec une machine virtuelle Dart et possède son propre « package manager » appelé pub.

Voici certaines choses que vous devez savoir si vous commencez, ou envisagez de commencer à travailler avec Flutter.

Connaître la langue

Tout d'abord et le plus important c’est de connaître votre langage. Bien que Dart soit très similaire à JavaScript, vous devez tout de même connaître les bases : l’étendue des variables et des méthodes, la sécurité nulle et l'opérateur bancaire, l'opérateur clé et l'utilisation de late pour les variables non nullables. Comme JavaScript, Dart est un langage à « thread » unique, il utilise async/wait avec isolates . Les Isolates sont particulièrement utiles pour les tâches de longue durée que vous souhaitez gérer sans bloquer l'interface utilisateur. Découvrez-en plus dans la documentation officielle de Dart et comment cela s'applique à Flutter. Apprenez-le et utilisez-le s'il convient à votre projet.

Astuce : parfois, cette tâche de longue durée doit être effectuée par le backend ou un service séparé à la place.

Les widgets

Là encore, ce sont les bases, mais assurez-vous de bien les comprendre car vous les utiliserez tout le temps. Si vous avez déjà commencé à jouer avec Flutter, vous savez probablement ce que sont les widgets, avec et sans état, et à quel point il est facile de faire apparaître votre premier « Hello World » sur Android et iOS.

Assurez-vous également d'apprendre et d’explorer avec les gestures et les widget controllers. Il est également important de se familiariser avec les Layout widgets pour vous aider à créer une bonne structure dès le départ.

Suivez les mises à jour

Lorsque j'ai commencé à travailler sur le projet, nous n'avions pas encore tous les atouts de Sound Null Safety qui a été publié avec Flutter 2.0. Heureusement, l'équipe et le client étaient de notre côté et nous avons réussi à mettre à jour Flutter et à intégrer ses dernières fonctionnalités. Maintenant, nous voyons const partout dans notre code. Ce qui est formidable, car le compilateur connaît à l'avance const, il n'en conservera donc qu'une seule copie référencée à tout moment et ne la reconstruira pas. C'est là une amélioration de performances.

La mise à niveau vers la dernière version du framework, du langage et des bibliothèques utilisées peut entraîner des gains de performances, plus de fonctionnalités et, bien sûr, plus de sécurité, ne négligeons pas cela. En le gardant à jour, vous vous assurez de tirer le meilleur de Flutter, en résolvant potentiellement certains problèmes et en commençant à utiliser de nouveaux widgets. Et hé, Flutter pour le Web ça sonne excitant, n’est-ce pas ?

Quelques extras astucieux

Voici quelques éléments supplémentaires qui peuvent vous aider à gagner du temps :

• Capturer l'état de l'application : utilisez didChangeAppLifecycleState, il capture l'état de l'application si elle est en arrière-plan ou au premier plan. Par exemple, si un utilisateur avait sa caméra ouverte pendant que quelqu'un l'appelait ou s'il changeait simplement d'avis et décidait de mettre votre application en arrière-plan. Dans ce cas, vous souhaitez probablement disposer de votre contrôleur de caméra ou arrêter et reprendre certains services en fonction de l'état de l'application, didChangeAppLifecycleState vous permettra d'attraper cet état.
• Modifier la conception de la barre d'état : utilisez SystemChrome.setSystemUIOverlayStyle
• ClipRRect est idéal pour arrondir les coins. Mais pas dans tous les cas. Si vous voulez jouer avec la forme d'un conteneur, la meilleure pratique serait d'utiliser la decoration : BoxDecoration(…) à la place. Et si vous avez besoin d'un avatar de forme circulaire, Flutter a un joli widget pour cela, CircleAvatar.

J'ai partagé mon expérience avec Flutter en espérant que cela vous à été utile! Si vous avez des questions, n'hésitez pas à nous contacter!

Crédit Photo: Kelly Sikkema