Flutter + Dart basics part 1

Flutter + Dart, les bases | 1

Hello ! Voici mon premier post et je vais commencer avec le développement d’application mobile car c’est ce que je suis en train d’apprendre actuellement pour les besoins de mon stage. Je viens de découvrir Flutter, qui se base sur le langage Dart.

Flutter est un moyen simple de coder des applications natives pour Android et iOS avec un seul et unique code. Il va compiler le code Dart en application native Android et iOS, et sortir les applications finales pour chacune de ces plateformes. Dart est parfaitement conçu pour le développement d’application natives, en raison de ses deux modes AOT (Ahead Of Time) et JIT (Just In Time). Là où le mode AOT offre la possibilité de générer une application native pour chaque plateforme (et pas uniquement Android et iOS, il semble que ce soit aussi le cas pour Windows/Mac et Linux), le mode JIT aide au développement avec sa merveilleuse fonctionnalité de rechargement à chaud (hot reload). Les gens React savent de quoi je parle (non, c’est pas une mauvaise trad, je dis vraiment les gens React et les gens Symfo… déformation de formation !).

D’après ce que j’ai pu voir, Flutter est assez facile à apprendre et à utiliser. Il fonctionne comme un arbre de widgets et ressemble assez à… un DOM. Pour les gens qui viennent du web, il devrait être assez simple de commencer avec quelques astuces que vous pouvez trouver dans l’excellente documentation.

J’ai commencé avec le tutoriel donné dans le manuel, pour créer une application mobile simple qui génère des noms de start up à l’infini lors du scroll. J’ai trouvé ce tuto amusant à réaliser, mais pas assez clair. Je ne comprends pas comment démarrer ma propre application en faisant celle-ci, ni comment coder des choses simples. J’ai juste copié et collé de gros morceaux de code, sans suffisamment d’explications pour comprendre comment les choses se sont déroulées.

Alors pour y voir plus clair, plongeons dans les bases de Flutter !

Tout d’abord, l’installation. Rien de vraiment difficile ici. Vous devrez installer Android Studio et obtenir le SDK Flutter. Vous pouvez télécharger Flutter ici et suivre le tutoriel. N’oubliez pas de mettre à jour le chemin pour exécuter les commandes Flutter directement dans la console Windows. Je travaille sur Windows 10 et Linux Mint, j’ai installé Flutter sur Windows pour essayer. C’est assez facile à mettre en place. J’utilise Visual Studio Code pour développer avec Flutter, j’ai donc ajouté les plugins Flutter et Dart.

Terminé ? Vous êtes prêt pour la suite.

Les widgets de Flutter

Flutter a la forme d’un arbre de widgets. Presque tout ce qui est à l’intérieur de l’application est un widget, imbriqué dans un autre widget. Dart est un langage de programmation orienté objet, donc un widget est le mot de Dart pour parler d’une classe.

Il existe de nombreux widgets prêts à être utilisés dans Flutter, vous pouvez consulter le catalogue de widgets ici. Un widget vient avec un lot de propriétés pour définir son apparence et son comportement.

Le widget text => propriétés : data, maxLines, semanticsLabel, softWrap, textAlign, style…

Le typage dans Dart

Flutter est basé sur le langage de programmation Dart qui est typé statiquement. On peut déclarer des types, mais c’est optionnel car Dart déduit le type tout seul.

Selon le manuel d’utilisation, Dart prend en charge les types suivants :

  • numbers (integer | double)
  • strings
  • booléens
  • lists (= tableaux)
  • sets
  • maps
  • runes (pour exprimer des caractères Unicode dans une chaîne de caractères)
  • symbols
code snippet

On déclare d’abord le type (String), puis le nom de la variable (name) et sa valeur (= « Joshua »). « print » est l’équivalent en Dart du console.log de Javascript, il permet d’afficher une donnée dans la console.

On ne peut pas modifier le type ultérieurement, mais on peut remplacer la valeur par une autre d’un même type. On peut également utiliser le type dynamique (« dynamic ») pour expliciter le fait qu’aucun type n’est attendu, mais ce n’est pas vraiment une bonne pratique.

Tout ce qu’on peut placer dans une variable est un objet. Chaque objet est une instance de la classe «Object» et en hérite. Il s’agit de la racine de la hiérarchie des classes Dart, donc chaque autre classe Dart est une sous-classe de la classe Object.

Les fonctions

Les fonctions doivent également avoir un type, il fait référence au type de la valeur que nous attendons qu’elle renvoie:

On devra renvoyer le type de valeur attendu, sinon nous obtiendrons une erreur.

void main () {…} est la fonction de niveau supérieur où l’exécution de l’application démarre. C’est une fonction obligatoire.

Les listes de Dart

Les listes sont un truc spécifique à Dart et tout à fait semblable à un tableau Javascript. Il faut toujours définir le type de valeurs attendues dans cette liste, on déclare donc une liste de cette façon: List <type> name = […]

Les listes sont des types intégrés à Dart, faisant référence à une classe abstraite «List», ainsi nous pouvons accéder à ses méthodes. Ces objets de type liste sont itérables, la documentation les décrit comme «une collection indexable d’objets avec une longueur». Les sous-classes de cette classe implémentent différents types de listes (growableList […], fixedLengthList […], voir la classe List dans le manuel de l’utilisateur).

C’est tout pour ce premier post. Je reviendrai sur les bases de Flutter dans le prochain. Merci d’avoir lu !

Nevae

Hello ! Je suis développeur IoT et UX designer junior. Vit en France, deux marmots, rat de bibliothèque, fille à chat, Flutter addict, bla bla bla. Les trucs habituels. Allez go, on parle de code !

One thought on “Flutter + Dart, les bases | 1

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

back to top