Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Apprendre à développer vos applications mobile avec Flutter et Dart

Par Mohamed Amine BOUSRIH Publié le 19/10/2018 à 00:10:02 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Cet article a pour but d’expliquer et présenter les notions fondamentales de la nouvelle technique du développement mobile Flutter créé par Google. Vous trouverez les étapes à suivre pour l’installation du Framework ainsi que la préparation de l’environnement du développement. Enfin, vous serez en mesure de commencer à créer une application Flutter pour Android, et à la fois iOS dans un temps records avec une très haute qualité du rendu. Je suis impatient de commencer la présentation de la première partie de mon article !

Flutter ? Qu'est-ce ce que c'est ?

Flutter est un SDK ou Framework qui a été créé et développé par Google. Il nous permet de créer des applications Android et/ou IOS. Flutter est donc un Framework très récent jusqu'au moment de la rédaction d'articles (Octobre 2018), où nous étions encore à la version bêta. La communauté de Google a annoncé la date de la publication de la version finale 1.0 de Flutter le 4 décembre 2018.

Ce Framework de Google essaie de s’imposer dans le marché du développement comme une référence technologique des applications mobiles. Il veut être le futur du développement mobile avec la notion des widgets, avec une grande facilité d’utilisation et surtout de la rapidité et beaucoup d'autres points très forts. Je vous invite donc à suivre cet article où je vais vous expliquer tout ce dont vous aurez besoin pour commencer avec Flutter.

Pour commencer, il faut bien savoir que la puissance technologique et budgétaire de Google va nous permettre d'utiliser un Framework stable et efficace. Ainsi, la documentation complète de Flutter qui couvre toutes les parties fonctionnelles pour fournir des applications qui répondent aux besoins du marché. Ce Framework sera certainement le plus utilisé dans les prochaines années dans le domaine du développement d'application mobile. Je vous invite donc à suivre une lecture complète de cet article si vous voulez vraiment comprendre et maîtriser la nouvelle technique Flutter.

Dart ? Qu'est-ce ce que c'est ?

Dart est un langage de programmation développé par la communauté Google. La première version date de 2011. Le but du développement de ce langage est de remplacer Javascript afin d'éviter les limites de performance de ce dernier. De plus, Dart peut aussi être utilisé pour la programmation de serveurs ainsi que le développement mobile avec le framework Flutter.

Ce langage a été créé principalement pour faire de grosses webapps (easy to scale). Voici le point essentiel de cette technique :

  • Résoudre des problématiques de performance des Web Apps.

  • Taux de productivité très élevé par rapport aux autres technologies.

  • La facilité d'apprendre et surtout, pas de mauvaises surprises.

  • Une plateforme et un système assez cohérents.

  • Fournir les bonnes pratiques et des explications bien détaillées

  • Une documentation complète.

  • Un langage Orienté objet basé sur les classes, héritage unique, typé optionnellement. Et ce n'est pas tout, plusieurs autres points forts de Dart que nous allons découvrir par la suite.

Voilà quelques exemples de codes simples Dart :

Un code simple pour afficher dans la console un message pour vous.

void main() 
{
  print('Bonjour, Bienvenue sur la plateforme SUPINFO !');
}

Chaque application a une fonction main() cette fonction est le point d'entrée. C'est le même principe que java et un autre langage de programmation comme C / C++ ... La fonction print() permet l'affichage sur la console.

Exemple de déclaration des variables avec Dart, Déclaration typée est optionnelle dans plusieurs cas qui facilite la vie des développeurs

var id = '743dj9';
var price = 29.90;
var name = 'cover';
var size = ['xs', 's', 'm', 'l','xl','xxl'];
var image = {
  'tags': ['accessory'],
  'url': '//path/to/accessory.jpg'
};

La plupart des variables n'ont pas besoin de la déclaration explicite des types.

Déclarations des structures de contrôle IF ELSE, FOR avec Dart :

if (10 > age ) 
{ 
  print('Enfant'); 
} 
else if (24 > age) 
{ 
  print('Adolescent'); 
} 
else 
{ 
  print('Adult') 
}

Cette structure de contrôle permet de vérifier l'âge et rependre avec un message sur la console Enfant, Adolescent ou adult.

for (var product in listOfProduct) {
  print(product);
}

Une boucle qui permet d'afficher la liste des produits un par un sur la console.

for (int day = 1;day >= 31; day++) 
{
  print(day);
}

Une boucle qui permet d'afficher les jours d'un mois de 1 jusqu'à 31

while (quantity > 0) 
{
  quantity -= 1;
}

Les fonctions et le passage des paramètres :

Les fonctions paramétrées et très faciles à implémenter surtout pour ceux qui font déjà java ou c# ou n'importe, c'est la même logique

bool AvailableInStock(int quantity) 
{
  if (quantity == 0 ) return false ;
  return true;
}

Exemple de code de la fonction récursive fibonacci :

int fibonacci(int n) 
{
  if (n == 0 || n == 1) 
  return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
var result = fibonacci(20);
  

Je vous invite donc à jeter un coup d'oeil sur la documentation Dart : https://www.dartlang.org/samples

Comment Flutter interagit avec la plateforme ?

Flutter adopte une approche différente pour éviter les problèmes de performances causés par la nécessité d'un pont Javascript. En utilisant un langage de programmation compilé, et pour comprendre la manière d'interaction de Flutter avec la plateforme, il faut savoir que Dart possède un système de compilation en code natif (AOT) pour plusieurs plates-formes. Ce système de compilation permet à Flutter de passer la communication directe avec la plateforme sans besoin d'un pont Javascript pour accéder aux ressources natives ou pour changer le contexte (comme avec ionic par exemple). Avec le nouveau concept et la nouvelle architecture,Flutter inclut ses propres widgets qui sont intégrés en tant que packages très fluides, extensibles et personnalisables pour faciliter la création d'interface de l'application.

Il faut bien noter alors que Flutter n'utilise pas les widgets OEM ou DOM ... Le framework Flutter déplace les widgets et le moteur du rendu à l'application ce qui permet d'être fluide et extensible. Flutter a besoin d'un canevas dans lequel les widgets vont être affichés sur l'écran de l'appareil, pour l'accès à toutes les ressources natives, aux événements et aux services (GPS, Appareil photo, NFC...)

Ce moteur de rendu est vraiment très efficace, il permet à la framework Flutter de dessiner les composants graphiques d'une façon très précis sur les écrans des appareils ios et Android à la fois et bien sûr natif, ce moteur de rendu graphique utilise la librairie Skia Graphics qui est éprouvée ça veut dire qu'on va avoir exactement le même rendu partout, c'est bien sure grace à l'ensemble des widgets recréent par Flutter, on n'a pas de miracles même pour le côté animation.

Les six principales raisons pour basculer vers Flutter

Après avoir présenté Flutter & Dart dans les deux dernières sections, maintenant je vais vous présenter les raisons pour lesquelles je trouve Flutter très efficace et facile d'utilisation.

  • Première raison : La documentation de Flutter est vraiment exceptionnelle car elle est lisible et accessible que l'on soit débutant, intermédiaire ou confirmé. Sur le site flutter.Io vous trouverez tout ce dont vous avez besoin dès l'installation du Framework jusqu'à la phase de production de votre application, qu’elle soit sur Mac OS ou Windows ! C'est alors vraiment un gagne temps toutes ces documentations pas-à-pas.

  • Deuxième raison : Les widgets dans Flutter sont pratiquement tous en un un widget. Ça veut dire que des classes et des portions de code qui sont près-faites. Cela facilite l'intégration de n'importe quel objet de façon rapide, facile et avec beaucoup de propriétés et fonctions. Je pense que les widgets sont parmi les meilleurs avantages sur flutter.

  • Troisième raison : le Material Design Le matériel désign va nous permettre d'avoir vraiment de belles applications, et grâce aux widgets qui vont se conformer avec le matériel design en fonction des règles IOS et Android. Ceci va nous permettre d'être le plus proche possible ergonomiquement aux utilisateurs de deux plateformes. Grâce aux packages du Material Design de Flutter on peut utiliser le matériel désign d'appel ou Android !

  • Quatrième raison : l'adaptabilité Grâce à l'adaptabilité nous allons avoir des widgets et matériaux design hybride (pour I’Os et Android en même temps) donc un design adapté en fonction de l'OS !

  • Cinquième raison : Hot Reload Si vous avez déjà développé des applications qu’elle soit pour IOS ou Android ou même avec Xamarin Formes (avec Android Studio, Xcode ou VisualStudio), si vous faites un changement dans le code et vous voulez voir sur votre simulateur ce qui s'est passée, il faut faire un rebuild de l'application. Ça va prendre un peu de temps pour le relancement de l'application pour voir ce que vous venez de changer. Tandis qu'avec flutter et grâce à Hot Reload il suffit juste d'enregistrer le code avec CTRL + S et vous auriez la modification en temps réel sur votre simulateur !

  • Sixième raison : SDK de Google Comme Apple(IOS) qui a sa propre SDK depuis des années, Facebook a aussi créé React Native. Par contre Google a été dépendant du langage Java. Après les Problèmes de Google avec Oracle (Java), Google a enfin décidé de créer sa propre SDK. Cela va nous permettre de créer des applications selon des guidelines précises.

Aussi, il va nous permettre de profiter d'un certain niveau de stabilité et résistance. Nous savons très bien que Google à la main sur 80% des appareils dans le monde. Google a donc le potentiel de lancer sa propre SDK. Et rappelez-vous bien les prochaines années de cet article, dans lequel je vous dis que Flutter va être le futur du développement Mobile.

Installation de la plateforme Flutter

Dans cette partie je vais vous montrer pas à pas comment installer tous qu’on aura besoin pour la plateforme Flutter sur Windows, avant de commencer, pour installer la Framework Futter et l'exécuter, votre environnement de développement doit répondre au minimum aux exigences suivantes :

  1. Configuration requise et la préparation d’environnement de développement

    • Systèmes d'exploitation Minimal Windows 7 SP1 en 64 bits

    • Espace minimal sur le disque 400 Mo (Libre après l’installation de l’IDE).

    • Autre outil indispensable dans votre environnement. pour faire fonctionner Flutter : PowerShell. Git scm (pour windows utilisable à partir de invite de commande PowerShell).

    • vous trouverez ici la documentation pour installer Powershell : https://docs.microsoft.com/en-us/powershell/scripting/setup/installing-windows-powershell?view=powershell-6#upgrading-existing-windows-powershell

  2. Installation de SDK Flutter

    Une fois que vous avez la configuration requise, powershell et Git pour Windows, votre environnement est prêt à installer le SDK flutter ainsi l’IDE et les packages dont vous aurez besoin pour développer votre première application Flutter !

    • Première étape : télécharger Flutter Vous trouverez dans ce lien l’archive des versions de Flutter : https://flutter.io/sdk-archive/#Windows, Actuellement, la dernière version est la v0.9.4 qui date de 09/10/2018, en attendant la version finale (le 4 décembre 2018 selon la communauté de Google).

    • Deuxième étape : Extraire le fichier compressé et déplacer le dossier Flutter à l’endroit que vous voulez.

    • Troisième étape : Vous commencez à cliquer double sur la console “flutter_console.bat”. Maintenant on peut voir et diagnostiquer l'état de Flutter, (les mises à jour...).

  3. Modifier les Variables d’environnement

    Voilà donc notre nouvelle SDK Flutter est maintenant installée. Il faut maintenant effectuer la mise à niveau des variables de l’environnement, et ajouter “flutter\bin”, pour terminer cette action. Allez dans Panneau de configuration> Comptes d'utilisateurs> Ensuite Modifier les variables d'environnement». Ou tout simplement dans la barre de recherche windows écrivez “Modifier les variables de d’environnement”

  4. FInalisation et configuration de Flutter et Android Studio

    Je vais vous présenter maintenant comment diagnostiquer l'état de Flutter pour vérifier s’il y a des dépendances indispensables à l’installation de Flutter, ainsi que la mise au niveau de la Framework, Let’s Go !

    Si vous n’avez pas Android studio sur votre ordinateur n'hésitez pas à le télécharger et l’installer. Une fois bien installé, passez par l'Assistant de configuration d'Android Studio qui va installer le SDK Android automatiquement. La SDk Android et un élément nécessaire pour que Flutter puisse créer l’application pour la plateforme Android.

    Installez android studio à partir de ce lien : https://developer.android.com/studio/index.html

    Afin de pouvoir tester votre première application Flutter il faut configurez votre device , vous aurez besoin d'un appareil Android avec une version Android 4.1 ou supérieur.

    1. Activez le mode développeur et le débogage et installer le Pilote USB Google. Si besoin documentation (https://developer.android.com/studio/run/win-usb)

    2. Branchez votre appareil

    3. Vérifiez si flutter reconnaît votre appareil en exécutant cette commande flutter devices à l’aide de console.

    Nous arrivons à la fin de la procédure. La dernière étape avant de vous lancer avec Flutter, il va falloir installer les plugins Flutter et Dart pour assurer l’exécution, compilation du code Dart, le hot Reload, et le débogage (etc.) avec Android Studio.

    C’est vraiment très simple:

    1. Démarrez Android Studio.

    2. Allez dans File>Settings>Plugins.

    3. Ensuite Browse repositories.

    4. Sélectionner Flutter et cliquez sur install.

    5. Cliquez sur Yes pour installer le plugin Dart ensuite automatiquement.

    6. Redémarrez Android Studio à la fin

Félicitation, maintenant vous êtes prêts à développer votre première application. Vous me devez un pot de protéines ! :D

Conclusion

Dans cet article j’ai présenté Flutter et Dart la nouvelle technique proposée par Google. Ainsi que la philosophie des widgets, les raisons pour lesquelles il faut utiliser Flutter, et enfin les étapes pour préparer votre environnement de développement.

Il ne nous reste plus qu'à commencer de coder! Je vais vous présenter aussi la prise en main de Flutter et nous allons va créer une première application ensemble dans le prochain article.

Des liens utiles

La documentation officielle Flutter : https://flutter.io/docs/

La documentation officielle Dart : https://www.dartlang.org/guides/get-started

Article pertinent : https://www.fidelisa.com/2018/03/02/flutter/

Débat pertinent : https://www.developpez.com/actu/146016/Un-developpeur-donne-des-raisons-qui-peuvent-justifier-l-utilisation-de-Flutter-le-framework-de-Google-pour-creer-des-apps-natives-iOS-et-Android/

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels