Back

Architecture d’une application Flutter

Architecture d’une application Flutter

  1. Objectif

    • Discuter de l’architecture du framework Flutter.
  2. Présentation

    • Flutter a une architecture modulaire en couches. Cela vous permet d’écrire votre logique d’application une seule fois et d’avoir un comportement cohérent sur toutes les plates-formes, même si le code du moteur sous-jacent diffère selon la plate-forme.
    • L’architecture en couches expose également différents points de personnalisation et de remplacement, si nécessaire.
    • Le concept de base du framework Flutter est dans Flutter, tout est un widget. Widget sont essentiellement des composants d’interface utilisateur utilisés pour créer l’interface utilisateur de l’application.
    • L’interface utilisateur est construite à l’aide d’un ou plusieurs enfants (widgets), qui se construisent à nouveau à l’aide de ses enfants
      widgets.
    • Cette fonctionnalité de composabilité nous aide à créer une interface utilisateur de toute complexité.
    • Flutter a une architecture modulaire qui effectivement permet d’écrire le code une seule fois et de l’utiliser sur plusieurs plateformes (Android, ios, ou web) même si le moteur est différent de plateforme à plateforme, pour le développeur c’est transparent. voici en image cette architecture:
    • Architecture d'une application Flutter

    • L’architecture Flutter comprend principalement quatre composants.
      • Flutter Engine (Moteur de flutter)
        • Le Flutter Engine est un environnement d’exécution portable pour les applications mobiles de haute qualité. Il implémente les bibliothèques principales de Flutter, y compris l’animation et les graphiques, les E/S de fichiers et de réseau, la prise en charge de l’accessibilité, l’architecture des plugins, ainsi qu’un environnement d’exécution et une chaîne d’outils Dart pour développer, compiler et exécuter des applications Flutter.
      • Foundation Library (Bibliothèque de la Fondation)
        • Il contient tous les packages requis pour les éléments de base de l’écriture d’une application Flutter. Ces librairies sont écrites en langage Dart.
      • Widgets (Widget)
        • Les widgets sont les éléments de base de l’interface utilisateur dans Flutter.
        • La conception de l’interface utilisateur pour une application implique la composition et la modification de divers widgets simples tels que du texte, des formes et des animations pour en créer des plus complexes.
        • Les widgets Flutter ne sont que des éléments de votre interface utilisateur. Si vous êtes familier avec le développement Android ou iOS, vous établirez la connexion immédiate aux vues (pour Android) et aux UIViews (pour iOS). C’est une bonne comparaison à faire et vous ferez bien de commencer votre voyage avec cet état d’esprit. Une façon plus précise de penser, cependant, est qu’un widget est un plan.
      • Embedder Platform Specific (widgets spécifiques)
        • Embbeder est différent pour chaque plateforme et son rôle est de créer l’exécutable ou les modules pour chaque plateforme.

        • Les applications Flutter sont packagées de la même manière que toute autre application native pour les plates-formes cibles.
        • Flutter fournit un certain nombre d’intégrateurs spécifiques à la plate-forme pour les plates-formes cibles qui coordonnent une application flottante avec le système d’exploitation sous-jacent pour accéder à des services tels que les surfaces de rendu, l’accessibilité, la saisie et la gestion de la boucle d’événements de message.
        • L’intégrateur est généralement écrit dans le meilleur langage approprié pour la cible. plate-forme.
        • L’embedder pour Android est écrit en C++ et Java, Objective C/Objective C++ pour iOS et macOS, et C++ pour Windows et Linux. Avec l’utilisation de l’embedder, le code Flutter peut également être intégré dans une application existante en tant que module.
  3. Architecture d’une application Flutter simple

  4. Organisation par widgets

    • Flutter présente cette particularité d’avoir une organisation par widget.
    • Comme il est coutume de dire, sur Flutter tout est widget !
    • Ainsi, il existe une multitude de widgets remplissant chacun un rôle bien précis. Pour obtenir un design de type Android, il existe un widget nommé Material Components. Alors que pour obtenir un style IOS, les ingénieurs de Google ont développé les widgets Cupertino.
    • Il existe donc des widgets pour tout et n’importe quoi. Qu’il s’agisse de texte, de champs à remplir, de barres de navigation, il y a un ou des widgets qui correspondent.
    • Pourquoi fonctionner avec des widgets ?
    • Flutter ne fonctionne pas en utilisant les composants natifs. Tout a été recodé afin d’optimiser les performances. L’avantage est que le rendu est parfaitement conforme aux éléments d’origine et qu’un seul code suffit pour réaliser une application multiplateforme.
    • Les widgets s’articulent un peu comme une page web et sa notion de Document Object Model (DOM). Une arborescence est créée, les widgets s’imbriquent. Il existe donc des notions de parents, d’enfants, etc.
    • Il existe deux types de widgets, ceux qui ont un état fixe et ceux qui vont évoluer au fil du temps. Ils sont nommés respectivement StatelessWidgets et StatefulWidgets. Pour ces derniers, l’état est donc observé en permanence afin de détecter les changements et modifier en conséquence l’affichage. Ces notions seront revues en détail dans le chapitre Les états.
    • Afin de mettre en pratique ces aspects et de pouvoir enfin tester, il va falloir maintenant configurer notre environnement de travail et procéder à quelques installations qui vont être décrites dans le chapitre suivant.



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement