Qu’est ce qu’un widget dans Flutter ?

Qu’est ce qu’un widget dans Flutter ?

  1. Objectifs

    • Dans cet article, nous comprendrons certains des concepts clés des widgets du framework Flutter.
  2. Présentation

    • Flutter est la boîte à outils d’interface utilisateur de Google pour créer de belles applications iOS et Android compilées en natif à partir d’une base de code unique.
    • Dans Flutter, tout ce qui apparaît dans l’interface utilisateur s’appelle widget et ils héritent tous de la classe Widget. Lorsque vous créez une interface utilisateur dans Flutter, vous le faites en attachant chaque widget à l’écran de l’application afin qu’il s’adapte exactement à l’endroit où vous le souhaitez.
    • Dans Flutter, tout est construit sur des widgets. Les éléments, les styles, les thèmes et même l’état de l’interface utilisateur sont gérés dans des widgets spécifiques.
    • Les widgets décrivent à quoi leur vue devrait ressembler compte tenu de leur configuration et de leur état actuels.
    • Lorsque l’état d’un widget change, le widget reconstruit sa description, que le framework compare à la description précédente afin de déterminer les changements minimaux nécessaires dans l’arborescence de rendu sous-jacente pour passer d’un état à l’autre.
    • Une application Flutter se compose de plusieurs interfaces utilisateur, chaque interface utilisateur étant constituée d’un ou de plusieurs widgets .
    • Ces widgets ne sont que des éléments d’interaction entre l’utilisateur et l’application.
    • Les widgets représentent une vue avec une configuration et un état . Un widget est construit avec une configuration et un état.
    • 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).
  3. Définitions

    • Un widget est tout ce qui compose votre application que ce soit un text, une image, un bouton, l’ensemble d’une page ou bien les opérations qui permettent de donner un résultat.
    • Les widgets Flutter sont les principaux composants d’une application. Ils donnent l’apparence en fonction de leur configuration et de leur état.
    • Qu'est ce qu'un widget dans Flutter
      Source: https://www.agaetis.fr/blogpost/flutter-2-vient-de-sortir-mais-au-fait-cest-quoi
  4. Les différents types de widgets

    • Chaque widgets Flutter peut être sans état ou avec état. La principale différence est la possibilité de restituer les widgets au moment de l’exécution. Le widget sans état ne sera utilisé qu’une seule fois et est immuable.
    • Par contre un widget avec état peut être utilisé plusieurs fois en fonction du changement de son état interne.
      • Widgets Flutter sans état (StatelessWidget
        )
        • Les widgets sans état sont des widgets qui ne stockent aucun état. C’est-à-dire qu’ils ne stockent pas les valeurs susceptibles de changer.
        • Par exemple, une icône est sans état ; vous définissez l’image de l’icône lorsque vous la créez, puis elle ne change plus. Un widget Texte est également sans état.
        • Si vous souhaitez modifier la valeur du texte, il vous suffit de créer un tout nouveau widget avec le nouveau texte. Les widgets Text Flutter ne stockent pas de propriété de texte modifiable.
      • Widgets Flutter avec état (StatefulWidget)
        • Cela signifie qu’il peut suivre les modifications et mettre à jour l’interface utilisateur en fonction de ces modifications.
        • Le widget avec état lui-même est immuable, mais il crée un objet State qui garde une trace des modifications.
        • Lorsque les valeurs de l’objet State changent, il crée un tout nouveau widget avec les valeurs mises à jour. Ainsi, le widget léger est recréé mais l’état persiste à travers les changements.



  5. Les Catégorie de widgets Flutter

    • Les widgets flutter sont divisés sur au moins sur 14 catégories. Ils sont principalement séparés sur la base de la fonctionnalité qu’ils fournissent dans une application.
    • Les Catégorie de widgets Flutter

      • Accessibilité
        • il s’agit de l’ensemble de widgets qui rendent une application flutter plus facilement accessible.
      • Animation et mouvement
        • ces widgets ajoutent une animation à d’autres widgets.
      • Actifs, images et icônes
        • Ces widgets prennent en charge les actifs tels que les images d’affichage et les icônes d’affichage.
      • Async
        • Ils fournissent une fonctionnalité asynchrone dans l’application Flutter.
      • Notions de base
        • Il s’agit de l’ensemble de widgets qui sont absolument nécessaires au développement de toute application Flutter.
      • Cupertino
        • Ce sont les widgets conçus par iOS.
      • Entrée
        • Cet ensemble de widgets fournit des fonctionnalités d’entrée dans une application flottante.
      • Modèles d’interaction
        • Ces widgets sont là pour gérer les événements tactiles et diriger les utilisateurs vers différentes vues de l’application.
      • Disposition
        • Cet ensemble de widgets aide à placer les autres widgets sur l’écran selon les besoins.
      • Composants matériels
        • Il s’agit d’un ensemble de widgets qui suivent principalement la conception matérielle de Google.
      • Composants matériels
        • Il s’agit de l’ensemble de widgets qui appliquent des modifications visuelles à leurs widgets enfants sans modifier leur disposition ou leur forme.
      • Défilement
        • Cela offre une possibilité de sacroller à un ensemble d’autres widgets qui ne sont pas défilants par défaut.
      • Styling
        • Il s’agit du thème, de la réactivité et du dimensionnement de l’application.
      • Texte
        • Ce texte d’affichage.
  6. Les widgets Flutter

    • Flutter est livré avec une suite de puissants widgets de base, dont les suivants sont couramment utilisés :
      • Text:
        • Le Textwidget vous permet de créer une série de texte stylé dans votre application.
        • Un texte est un widget dans Flutter qui nous permet d’ afficher une chaîne de texte avec une seule ligne dans notre application .
        • Le widget texte est l’un des widgets les plus utilisés dans Flutter. Pour afficher du texte dans les applications flottantes, nous devons utiliser un widget de texte. Nous ne pouvons pas imaginer une application sans texte.
        • En utilisant ce widget, nous pouvons afficher le texte sur une seule ligne ou sur plusieurs lignes. Le texte peut être personnalisé avec différentes propriétés telles que la taille de police, la famille de polices, le poids de police, la couleur, etc.
      • Row,Column :
        • Ces widgets flexibles vous permettent de créer des mises en page flexibles dans les directions horizontale ( Row) et verticale ( Column). La conception de ces objets est basée sur le modèle de mise en page flexbox du Web.
      • Stack:
        • Au lieu d’être orienté linéairement (horizontalement ou verticalement), un Stackwidget vous permet de placer des widgets les uns sur les autres dans l’ordre de la peinture. Vous pouvez ensuite utiliser le Positioned widget sur les enfants de a Stackpour les positionner par rapport au bord supérieur, droit, inférieur ou gauche de la pile. Les piles sont basées sur le modèle de disposition de positionnement absolu du Web.
      • Container:
        • Le Containerwidget vous permet de créer un élément visuel rectangulaire. Un conteneur peut être décoré avec un BoxDecoration, tel qu’un arrière-plan, une bordure ou une ombre.
        • Un container peut également avoir des marges, un rembourrage et des contraintes appliquées à sa taille. De plus, un container peut être transformé dans un espace tridimensionnel à l’aide d’une matrice.
  7. Application

    • Créer une application Flutter simple qui affiche un texte “Hello Flutter!” avec une couleur bleu au centre de l’écran.
    • Code utilisé
      • import 'package:flutter/material.dart';
        
        void main() => runApp(
              const Center(
                  child: Text("Hello Flutter!",
                      textDirection: TextDirection.ltr,
                      style: TextStyle(
                        color: Colors.blue,
                        fontSize: 25,
                      ))),
            );
        
    • Interprétation du code
      • void main(): Chaque programme Dart doit avoir une fonction void main()
      • runApp():
        • La méthode runApp() est une instance de widget, ce qui en fait la racine de l’arborescence qui démarre notre application.
        • La méthode runApp() prend un widget comme argument. Dans notre cas, Center , qui possède un autre widget enfant, Text.
        • Le but principal de runApp() est d’attacher le widget donné à l’écran.