Le 2 juin dernier avait lieu : la première édition de FlutterConnection, la première conférence française entièrement consacrée au framework Flutter. Cet événement, tant attendu par les passionnés de technologie, a réuni une communauté de développeurs, d’experts et de curieux, tous animés par le désir de plonger dans les profondeurs de ce framework en plein essor.

Organisée avec soin et dévouement, la conférence a su attirer l’attention de nombreux acteurs afin de partager les connaissances, les idées et les découvertes qui émergent de cette technologie.

Cette première édition a été un véritable succès, marquée par la présence d’une liste impressionnante de speakers et de sujets d’une qualité exceptionnelle. Au cœur de cette expérience enrichissante, Mehdi Slimani, notre expert en Flutter, a eu le privilège de faire partie du comité décisionnel. Cette opportunité unique lui a permis de jouer un rôle actif dans la sélection des sujets et des intervenants, contribuant ainsi à façonner une programmation captivante et pertinente pour l’ensemble des participants.

Dans cet article, nous allons plonger au cœur de la première édition de FlutterConnection, découvrir les temps forts, les moments d’apprentissage et les grandes révélations qui ont marqué cette journée.

Custom Lint – Rémi Rousselet

Présenté par Rémi Rousselet, Custom Lint est un package qui permet de créer des règles d’analyse statique personnalisées, offrant une grande flexibilité pour le développement d’applications mobiles Flutter.

Ce puissant plugin facilite la définition de règles d’alerte et de formatage de code sur mesure, similaires à celles déjà disponibles dans les IDE via le fichier analysis-options.yaml. Grâce à custom_lint, les développeurs peuvent adapter l’analyse de leur code en fonction de leurs besoins spécifiques.

Un exemple concret de l’utilisation de custom_lint est sa compatibilité avec Riverpod. Il peut détecter des erreurs dans les déclarations extends, offrant ainsi une vérification précise lorsque l’annotation @Riverpod est utilisée.

Making your Flutter apps Accessible – Akanksha Singh

Akanksha Singh nous a partagé des recommandations pratiques pour améliorer l’accessibilité des applications Flutter. Cela inclut l’utilisation d’un contraste suffisant entre le texte et l’arrière-plan, la gestion des variations de typographie et la fourniture de descriptions précises lors des appels à l’action.

Les classes Semantics permettent d’ajouter du contexte sémantique à des widgets, tandis que les widgets MergeSemantics et ExcludeSemantics offrent un contrôle précis de l’accessibilité dans l’arborescence des widgets.

The World of Dart-Only Plugins – Renan Araujo

Renan Araujo nous a présenté le développement de plugins entièrement écrits en Dart pour Flutter. Il a exposé les différentes couches essentielles qui permettent à une application Flutter d’interagir avec les couches natives. Tout commence par le code de l’application, qui communique avec le framework Flutter. Ensuite, le moteur C++ de Flutter intervient pour passer à la couche de code spécifique du système d’exploitation, et enfin atteindre la couche runner.

Poursuivant sa présentation, Renan nous a introduit le FFI (Foreign Function Interface) ainsi que les bindings JNI (Java Native Interface). Ces bibliothèques permettent une interaction directe avec les bibliothèques natives et les couches C++, sans avoir besoin de Kotlin, Swift ou C++. C’est une excellente nouvelle pour les développeurs qui souhaitent se focaliser exclusivement sur Dart. Cependant, il est important de noter que Renan a souligné certaines limitations liées à cette approche, notamment en ce qui concerne le multi-threading.

En conclusion, Renan nous a offert un aperçu du développement de plugins pour Flutter entièrement en Dart. Il a mis en avant les différentes couches d’interaction ainsi que des outils tels que le FFI et le JNI.

Flutter on Desktop – Teresa Wu

Ensuite, Teresa Wu a souligné les avantages du développement multiplateforme avec Flutter et a partagé les étapes essentielles pour configurer et distribuer des applications sur différentes plateformes.

Elle a notamment présenté des conseils pratiques pour configurer correctement Flutter sur les systèmes d’exploitation tels que macOS, Linux et Windows. Elle a également partagé des recommandations sur la distribution des applications finales pour chaque plateforme cible.

Write complex business logic visually with Flutter & FlutterFlow – Pooja Bhaumik

Dans cette présentation, Pooja Bhaumik a réalisé une démonstration de Live Coding avec FlutterFlow en intégrant une logique complexe. Elle a essentiellement montré comment mettre en œuvre une application similaire à Kahoot en utilisant uniquement FlutterFlow, accompagné de quelques morceaux de code Flutter, tout en intégrant une base de données Firebase.

L’objectif de cette présentation était de démontrer que FlutterFlow peut être utilisé pour des flux plus complexes que de simples affichages sans données, mais qu’il peut réellement interagir avec du code et créer des actions personnalisées qui s’exécutent les unes après les autres.

The road to Dart 3 – Majid Hajian

Dans ce voyage au pays de Dart, Majid nous présente l’ensemble des fonctionnalités majeures de Dart 3. : les records, les patterns, les class modifiers.

Tout commence par un overview des records qui est une façon de structurer ou déstructurer les données comme l’exemple suivant :

(String, int) parseJson(Map<String, dynamic) json) {
  return (json['name'] as String, json['age'] as int);
}

Les records peuvent assimiler aux tuples qu’on peut trouver dans d’autres langages comme swift.

var (String name, int age) = parseJson(json);
print('name: $name, age: $age');

Cette nouvelle syntaxe permet de vérifier la structure de vos données grâce à de nouveaux mots clés comme l’utilisation de case :

final json = {'name': 'Jean', 'age': 30};

if (json case {'name': 'Jean', 'height': int age}) {
	print('json valid');
  print('Jean is $age years ago.'); 
} else { 
  print('Error: json contains no age info for Jean!');
}

Et dorénavant il est possible d’utiliser des sealed class comme en kotlin de la façon suivante :

sealed class State { … }
class Loading extends State { … }
class Success extends State { … }
class Error extends State { … }

// ...
switch (state) {
    Loading() => _Loading(),
    Success() => _ContentPage(),
    Error() => _ErrorPage()
}

Lifecycle of RenderObject – Craig Labenz

L’après-midi s’est poursuivi avec un sujet plus approfondi sur le fonctionnement du rendu des widgets sous Flutter, présenté par Craig Labenz. Il a exploré les différentes phases d’un RenderObject : d’abord sa phase de dimensionnement/layout, puis sa phase d’impression des pixels/rendering, et enfin sa phase de description du widget pour l’accessibilité/semantics. De plus, il nous a présenté une comparaison des performances entre l’ancien moteur de rendu Skia et le nouveau Interpeller. L’objectif principal de cette présentation était de comprendre les mécanismes sous-jacents à la méthode de rendu de Flutter.

Advanced topics with webviews – Guillaume Bernos

C’est maintenant le tour de Guillaume Bernos de partager avec nous ses expériences concernant l’utilisation des webviews, ainsi que les problèmes auxquels il a été confronté. Tout d’abord, il nous présentera les deux principaux packages permettant d’utiliser les webviews : flutter_webview et flutter_inappwebview. Il expliquera comment ajuster la hauteur et la largeur des webviews, optimiser le chargement des pages en les réduisant, injecter une police dans la webview et même ajouter du code JavaScript supplémentaire à la page. Pour finir, il abordera une solution alternative aux webviews, consistant à convertir les pages HTML en widgets Flutter.

Mind your app footprint – SNCF Connect

Comment minimiser l’impact environnement de votre application ? Ce sujet fût très intéressant !

Light vs Dark mode

Tout d’abord, l’équipe de la SNCF Connect nous présente quelques résultats obtenus avec Greenspector. Ceux-ci permettent de se rendre compte de l’importance d’un mode « dark » par rapport au mode « light » sur la consommation de CO2. Nous constatons un gain de 25 % de grammes de CO2 sur les écrans AMOLED.

  • 3.9 g de CO2 light mode
  • 3.0 g de CO2 “blue” Dark mode

Sur des écrans LCD, aucune diminution n’est perceptible car cette technologie ne permet pas d’éteindre les pixels selon leur couleur.

Mode dégradé

Selon le mode d’utilisation de la batterie ou le pourcentage de celle-ci, il est possible d’apporter un mode dégradé à votre application, par exemple en limitant l’utilisation du GPS, la fonction de tracking, etc. Adopter de telles stratégies permet d’économiser de l’énergie et de satisfaire les besoins de l’utilisateur de manière ciblée.

BFF (Back For Front)

Effectuer x appels d’API au sein d’une application mobile est très consommateur d’énergie. L’équipe de la SNCF Connect a mis en place un BFF (Backend For Frontend) permettant de regrouper cette multitude d’appels API ainsi qu’une politique de cache. Cette pratique permet de réduire considérablement la consommation d’énergie.

From Network failures to offline success : a journey of visible app – Dominik Roszkowski

Dominik Roszkowski a partagé son expérience de travail pour l’application Visible et sa transition d’une application axée sur le réseau avec de nombreuses erreurs gérées de différentes manières vers une application axée sur le mode hors ligne. Fondamentalement, il a expliqué comment il a abordé ces changements avec son équipe et a considérablement réduit le nombre d’exceptions réseau, tout en améliorant considérablement l’expérience utilisateur.

Vous vous demandez comment il a fait ? Eh bien, les données sont d’abord stockées localement, et une table SQLite est utilisée pour stocker toutes les actions qui doivent encore être synchronisées avec le backend et qui le seront ultérieurement. Bien sûr, cela a bien fonctionné, car l’application Visible est destinée à un seul utilisateur et sert principalement de journal de notes, ce qui permet une utilisation principalement hors ligne. De plus, la résolution des conflits n’est pas vraiment un problème dans ce contexte. Cependant, cela pourrait être beaucoup plus difficile pour une application qui travaille avec des données en temps réel ou qui dépend des données d’autres utilisateurs.

An introduction to game development with Flame – Lukas Klingsbo

En raison d’un imprévu de dernière minute, Felix Angelov n’a pas pu être présent, et c’est donc Lukas Klingsbo, un ingénieur open source, qui a pris la responsabilité de conclure cette journée. Pendant sa présentation, nous avons pu en apprendre davantage sur la compatibilité de Flame avec différents modules, tels que le lecteur audio et Forge 2D, ainsi que sur ses compétences en matière de détection de collisions et d’effets de caméra. Cela nous a permis de découvrir les différentes fonctionnalités de l’outil et d’en savoir un peu plus sur le moteur de jeu.

Conclusion

En conclusion, la conférence FlutterConnection a été une super expérience pour tous les participants passionnés de Flutter. Les différents talks présentés par des experts de renom ont offert un éventail de sujets allant des meilleures pratiques de développement à l’optimisation de la performance en passant par l’accessibilité.

Pour ceux qui n’ont pas pu assister à la conférence ou qui souhaitent revoir les présentations, vous pouvez retrouver l’ensemble des talks sur le lien suivant : https://async.techconnection.io/.

Nous attendons avec impatience une future édition.