Flutter - Application d'architecture

Dans ce chapitre, parlons de l'architecture du framework Flutter.

Widgets

Le concept de base du framework Flutter est In Flutter, Everything is a widget. Les widgets sont essentiellement des composants d'interface utilisateur utilisés pour créer l'interface utilisateur de l'application.

Dans Flutter , l'application est elle-même un widget. L'application est le widget de niveau supérieur et son interface utilisateur est construite à l'aide d'un ou plusieurs enfants (widgets), qui à nouveau construits à l'aide de ses widgets enfants. Cecomposability fonctionnalité nous aide à créer une interface utilisateur de toute complexité.

Par exemple, la hiérarchie des widgets de l'application hello world (créée dans le chapitre précédent) est telle que spécifiée dans le diagramme suivant -

Ici, les points suivants méritent d'être notés -

  • MyApp est le widget créé par l'utilisateur et il est construit à l'aide du widget natif Flutter, MaterialApp .

  • MaterialApp a une propriété home pour spécifier l'interface utilisateur de la page d'accueil, qui est à nouveau un widget créé par l'utilisateur, MyHomePage .

  • MyHomePage est construit à l'aide d'un autre widget natif de flottement, Scaffold

  • Scaffold a deux propriétés - body et appBar

  • body est utilisé pour spécifier son interface utilisateur principale et appBar est utilisé pour spécifier son interface utilisateur d'en-tête

  • L'interface utilisateur d'en-tête est construite à l'aide d'un widget natif de flutter, l' AppBar et l' interface utilisateur du corps sont construites à l'aide du widget Center .

  • Le widget Centre a une propriété, Enfant , qui fait référence au contenu réel et il est construit à l'aide du widget Texte

Gestes

Les widgets Flutter prennent en charge l'interaction via un widget spécial, GestureDetector . GestureDetector est un widget invisible ayant la capacité de capturer les interactions de l'utilisateur telles que le tapotement, le glissement, etc., de son widget enfant. De nombreux widgets natifs de Flutter prennent en charge l'interaction via l'utilisation de GestureDetector . Nous pouvons également incorporer une fonctionnalité interactive dans le widget existant en le composant avec le widget GestureDetector . Nous apprendrons les gestes séparément dans les prochains chapitres.

Concept d'État

Les widgets Flutter prennent en charge la maintenance de l'état en fournissant un widget spécial, StatefulWidget . Le widget doit être dérivé du widget StatefulWidget pour prendre en charge la maintenance de l'état et tous les autres widgets doivent être dérivés de StatefulWidget . Les widgets Flutter sontreactiveen natif. Ceci est similaire à reactjs et StatefulWidget sera automatiquement restitué chaque fois que son état interne est modifié. Le re-rendu est optimisé en trouvant la différence entre l'ancienne et la nouvelle interface utilisateur du widget et en ne rendant que les modifications nécessaires

Couches

Le concept le plus important du cadre Flutter est que le cadre est regroupé en plusieurs catégories en termes de complexité et clairement organisé en couches de complexité décroissante. Une couche est créée à l'aide de sa couche de niveau suivant immédiate. La couche la plus haute est un widget spécifique à Android et iOS . La couche suivante contient tous les widgets natifs flottants. La couche suivante est la couche de rendu , qui est un composant de rendu de bas niveau et rend tout dans l'application de flutter. Les couches descendent vers le code spécifique à la plate-forme principale

L'aperçu général d'un calque dans Flutter est spécifié dans le diagramme ci-dessous -

Les points suivants résument l'architecture de Flutter -

  • Dans Flutter, tout est un widget et un widget complexe est composé de widgets déjà existants.

  • Des fonctionnalités interactives peuvent être intégrées chaque fois que nécessaire à l'aide du widget GestureDetector .

  • L'état d'un widget peut être maintenu chaque fois que nécessaire à l'aide du widget StatefulWidget .

  • Flutter propose une conception en couches afin que n'importe quelle couche puisse être programmée en fonction de la complexité de la tâche.

Nous discuterons de tous ces concepts en détail dans les prochains chapitres.