Développer une application mobile avec Flutter

Développer avec Flutter, optimisez la phase de développement

Dans un article précédent, nous avons analysé pourquoi et comment moderniser une application avec Flutter. Mais qu’en est-il lorsque l’application est encore au stade du projet? 

En premier : Faire le choix du langage de programmation à utiliser et des technologies associées. Est-ce que vous cherchez à développer sur iOS ? Développer sur Android ? Peut-être les deux ! Et pourquoi pas rendre votre application disponible aussi sur le web ? 

Des interrogations que Flutter, le framework multi-plateformes de Google, résout.  

Nous allons voir dans cet article, les avantages de ce framework, puis comment développer avec Flutter.

Sommaire
 

Construire un projet de développement avec Flutter

Pourquoi utiliser Flutter ?

Flutter est un kit de développement logiciel (SDK) d’interface utilisateur open-source, développé par Google, qui utilise Dart comme langage de programme. 

Son principe est d’être multi-plateformes : pouvoir développer en un code des applications flexibles au déploiement sur mobile et web, toutes marques et types d’environnements confondus. 

Concrètement, si vous êtes aux prémices de la gestion de projet de votre application et que vous ne souhaitez pas fermer des opportunités quant aux choix stratégiques de déploiement de votre application, Flutter est le candidat idéal. 

Par exemple, prenons le cas d’une entreprise qui souhaite développer une application métier à destination de ses collaborateurs. Il est fort probable que ses employés aient un téléphone mobile différent. Traditionnellement, il faudrait développer cette application pour chaque types d’appareils : Android et iPhone. Concrètement, il faudrait développer en deux fois, avec un langage de programmation différent pour chacun. En utilisant Flutter, l’impératif de multiplication du travail est supprimé. 

Ce framework a deux types de widgets. D’un côté il y a les widgets communs, et de l’autre les spécifiques à chaque systèmes d’exploitation mobiles (iOS, Android, Harmony, etc.) et ordinateurs (Windows, Mac, Linux, etc.). Grâce à ce système, Flutter concrétise l’adage “build once, run everywhere”, un seul code pour tous les environnements. 

Dans notre quotidien de développeurs d’applications sur-mesure, une seule équipe est nécessaire à mobiliser pour développer une application qui utiliserait Flutter, au lieu d’avoir des besoins en compétences différents par système d’exploitation mobile et web. 

De fait, avec Flutter le développement est plus rapide (car un seul code est à produire) et moins énergivore en termes de ressources matérielles, financières et humaines. 

Systèmes d’exploitation et Les différents types d’applications

Pour mieux comprendre la prouesse technique et les bénéfices que permet Flutter, il faut d’abord comprendre comment les applications arrivent à fonctionner sur nos mobiles et ordinateurs (desktop).

Chacun de nos appareils ont ce qu’on appelle un système d’exploitation, plus connu sous l’abréviation “OS” pour operating system en anglais. Cet OS est “l’ensemble des programmes permettant de faire fonctionner et contrôler un appareil informatique” (source: Le Robert). C’est sur ce système d’exploitation que les applications existent

On retrouve selon le type d’appareil mobile :

  • Android, chez Google, 
  • Blackberry, chez Blackberry 
  • iOS, chez Apple 
  • Harmony, chez Huawei
  • Meego, chez Nokia et Intel 

Et pour les ordinateurs, on retrouve les OS : Windows, OS X (chez Apple) et Linux. 

Tous permettent les fonctionnalités suivantes : 

  • Gestion de la connectivité
  • Gestion de la mémoire du processeur
  • Gestion des fichiers et de la sécurité
  • Articulation entre toutes les autres applications.

Pour lesquelles, ces applications, existent de trois manières  : native, web ou hybride

Les applications natives

Traditionnellement une application est développée pour un type de système d’exploitation. C’est ce qu’on appelle une application native. Elles sont codées dans les langages de programmation natifs de chaque système d’exploitation. 

Ce type d’application est pertinent si vous ciblez le grand public et un parc hétérogène de mobiles. Car, conçu exclusivement pour le type d’OS choisi, elles communiquent facilement avec. 

L’inconvénient en état est qu’il faut procéder à un développement additionnel si on souhaite avoir son application disponible sur d’autres appareils mobiles et d’autres systèmes d’exploitations mobiles que celui choisi au départ. 

Ceci dit, des solutions existent pour remédier à cet inconvénient. L’une d’entre elles étant d’opter pour un langage multi-plateforme plutôt que natif comme il est question en utilisant le framework Flutter.

Les applications web

Ce sont des applications uniquement accessibles via un navigateur Web. 

Elles se différencient des applications mobiles car elles n’ont pas besoin d’être téléchargées et installées sur son appareil (ordinateur ou mobile). L’avantage est de ne pas être restreint au type de système d’exploitation utilisé. 

Et, codées en majorité avec CSS, HTML et JavaScript, elles se différencient d’un site web car elles sont plus interactives et plus complexes. Un site web fonctionne par requêtes Serveur / Navigateur, il est par essence statique. Alors qu’une application web utilise en plus un framework qui supporte beaucoup plus de code au niveau du backend. C’est le cas par exemple d’applications web : Google Keep ou Discord. 

Ainsi l’avantage d’une application web est la possibilité de développer plus de complexités entre le serveur et les navigateurs. Si bien qu’on a plus d’interactions avec son utilisateur, sans se limiter à tel ou tel système d’exploitation. Le tout sans avoir à le forcer à télécharger l’application en question. 

Les applications hybrides

Tout comme les applications natives, les applications hybrides peuvent être installées sur smartphone. Elles sont, quant à elles, exécutées via un navigateur web. Elles sont développées en HTML5, un langage web également utilisé pour développer des applications hybrides. Ces applications ne sont pas aussi stables et rapides que des applications natives. Tous les systèmes hybrides conviennent parfaitement pour des applications de contenu par exemple (blog, recettes, tutos etc.), ou encore pour des besoins éphémères.

En résumé, avant de développer votre application, vous devez réfléchir à quel type d’application correspond le mieux à votre objectif visé. Natives, web ou hybrides, chacune auront des avantages et des inconvénients à vous apporter, mais aussi des contraintes de développement. Flutter sera un framework pertinent pour limiter ces contraintes, du fait qu’il est flexible à tous types d’environnements de codage. 

Comment installer Flutter

Si vous souhaitez développer vous même avec Flutter, cette partie vous indique comment installer le logiciel. Sinon rendez-vous au point suivant pour comprendre comment  développer avec Flutter.

Pour installer Flutter cela va dépendre du système d’opération principal : Windows, macOS, Linux ou Chrome OS. Selon l’OS, différentes exigences sont à remplir pour pouvoir exécuter le programme : 

  • Pour Windows : avoir un OS Windows 10 (64-bit) x86-64, au minimum, 1,64 GB de mémoire disponible, et l’installation préalable de Windows PowerShell 5.0 et Git for Windows 2.x
  • Pour macOS : avoir 2,8 GB de mémoire disponible, et l’installation préalable de Xcode pour disposer ensuite de git 
  • Pour Linux : avoir un OS Linux (64-bit), 600 MB de mémoire, et disposer dans votre environnement des lignes commandes 
    • bash
    • curl
    • file
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which
    • xz-utils
    • zip

Si vous répondez à toutes ces conditions vous pouvez vous rendre sur le site suivant et télécharger le dossier zip adéquat. 

Comment développer avec Flutter ?

La structure d’une application Flutter

Comme évoqué précédemment, le but de Flutter est d’être multi-plateformes. Le framework Flutter vous permet de développer en une seule fois plusieurs composants applicatifs : une application mobile Android, une application mobile iOS et une application web par exemple. 

La technologie Flutter repose sur des rendering library Skia et 2D graphiques en Dart. 

C’est un framework conçu en un système extensible par couches de bibliothèques indépendantes (qui n’ont pas accès aux couches inférieures), et dont chaque partie du niveau cadre est conçue pour être optionnelle et remplaçable.

developper avec flutter archidiagram

On retrouve au centre de cette architecture le moteur Flutter : en majorité écrit en C++ dans Dart. Son rôle est double : 

  • Installer tout ce qui compose les bibliothèques principales de Flutter (animation, graphiques, E/S de fichiers et de réseaux, plugins, etc.)
  • Exécuter la chaîne de code développée en Dart. 

Ensuite la structure de Flutter se compose de 4 éléments : 

  • La bibliothèque Fondation : elle dispose de tous les packages requis, en langage Dart, pour les éléments de base de développement. 
  • Les widgets : ils composent la conception de l’interface utilisateur de votre application (nous détaillons ce point plus bas dans l’article). 
  • Les widgets spécifiques embedder plateform : des intégrateurs spécifiques aux différents systèmes d’exploitations, écrits dans leur langage natif (Java, C++, C/Objective-C++, etc.). Ils fournissent un point d’entrée et les éléments nécessaires à la bonne coordination avec le système d’exploitation sous-jacent. Pour savoir comment créer un cadre qui articule les API de l’embedder à partir d’un code unique.
  • Le système d’exécution sur machine virtuelle (MV) : permet la visualisation directe du code (après rafraichissement) sans avoir à recompiler complètement celui-ci. Le travail de développement est plus rapide car plus simple pour visualiser ses modifications. 

Langage de programmation Dart par Google

Développé depuis 2010, pour être une alternative à JavaScript, Dart est un langage de programmation optimisé client. 

Plusieurs types de données sont supportés : 

  • Les chaînes de caractères (String)
  • Les nombres (int et double)
  • Les booléens (Vrai ou Faux / True ou False)
  • Les listes (Lists ou Arrays)
  • Les ensembles (Sets)
  • Les dictionnaires (Maps)

La plateforme Dart compile de deux manières. D’un côté en plateformes natives, pour les applications ciblées mobiles et desktop. On retrouvera ici une machine virtuelle qui compile en just-in-time (JIT) et une production de code ahead-of-time (AOT). Et de l’autre côté en plateforme Web, pour les applications qui ciblent uniquement le web. Le compilateur web fera la traduction directe de Dart vers JavaScript. 

Langage de programmation Dart par Google : La plateforme Dart compile de deux manières

Les avantages de Dart sont alors nombreux. C’est un langage open source, ce qui le rend accessible à tous gratuitement. Étant développé par Google, il s’assure une longévité sur une entreprise pérenne. Bien qu’étant un langage plutôt récent, la documentation évolue et s’agrandit.

Pour en apprendre plus sur le langage Dart, voici notre sélection de plusieurs liens proposés par Google : 

Les widgets Flutter

Les widgets sont les éléments centraux dans Flutter. Ils se définissent comme étant un  “élément de base de l’interface graphique d’un logiciel” (Larousse). En exemple de widget on retrouve : barre d’outils, texte, image, bouton, etc. 

Dans Flutter les widgets s’organisent hiérarchiquement sous la forme d’une arborescence (tree), entre widgets parents et widgets enfants, et selon deux types de configuration : 

  • StatelessWidget (sans états) : qui ne stockent pas de valeurs (comme de icônes et ou du texte) 
  • StatefulWidget (avec état) : qui stockent de la valeurs (comme un bouton qu’on sélectionnerait et qui activerait) 

On retrouve les catégories suivantes : 

  • Les bases communes (pour tous les développements avec Flutter) 
  • Accessibilité 
  • Animation et mouvement
  • Actifs, images et icônes
  • Asynchrone
  • Cupertino (widget propre à Apple) 
  • Entrée
  • D’interaction (ex : les actions tactiles) 
  • Disposition 
  • Composants matériels (widget propre à Google) 
  • Défilement (scroll)
  • Styling
  • Texte

Vous pouvez retrouver ici le détail de chacune de ces catégories sur ce lien.

Conclusion

Lorsque vous souhaitez développer votre application, il y a une question centrale : sur quel système d’exploitation mobile la déployer ? 

Si vous souhaitez déployer votre logiciel sur un maximum de systèmes mobiles et web, tout en optimisant la phase de développement, le framework Flutter est ce qui est le plus adapté. 

Bien que récent, Google assure sa fiabilité et une expansion de documentations pour se l’approprier. À l’avenir, ce type de développement (multi-plateformes) deviendra la norme. 

Alors intéressé pour développer votre projet avec la solution multi-plateformes Flutter ? 

Si notre expertise Flutter vous intéresse vous pouvez directement nous contacter

AxioCode est une entreprise de développement de logiciel web et application mobile, dont la conviction est de vous accompagner du début et au-delà de votre projet applicatif. 

Profitez de l’expérience et de l’expertise au travers de nos ressources gratuites.
Exemples, études de cas, modèles pdf, word ou excel, livres blancs : tout ce dont vous avez besoin pour construire votre projet d’application ou de logiciel.