Le concept des widgets Flutter et votre première application

Les widgets Flutter sont les principaux composants d’une application. Ils donnent l’apparence en fonction de leur configuration et de leur état.

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.

widget Flutter

En fait les widgets Flutter, sont les boutons, les champs de texte, l’animations, les conteneurs, … et même une page plus grande. Tout ce qui apparaît à l’écran ou interagit avec celui-ci est un widget.

Des widgets partout ! En les imbriquant ensemble, vous créerez une hiérarchie appelée Arborescence des Widgets.

Une application est un widget de niveau supérieur et son interface utilisateur est construite à l’aide d’un ou plusieurs widgets enfants. Par conséquent, cette fonctionnalité de composants nous aide à créer des interfaces utilisateur plus complexes.

L’un des avantages de flutter est que nous pouvons éditer ces widgets, qui sont très flexibles à utiliser, et écrire nos propres widgets rapidement.

Ces composants sont plus que des éléments structurels tels que des boutons, du texte, des images, des listes ou des curseurs. Un widget peut afficher quelque chose, aider à définir la conception, aider à la mise en page, gérer l’interaction avec l’utilisateur, etc.

Avant de prendre un exemple, nous allons démystifier quelques notions de base.

L’arborescence des widgets Flutter

Les widgets Flutter sont organisés dans une arborescence de parents-enfants, pour former ce que vous voyez à l’écran. Cette arborescence est tous les widgets que vous utilisez pour construire l’application, c’est-à-dire que le code que vous écrivez créera cette structure.‌‌

L’état des widgets Flutter

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.

StatefulWidget

Un widget avec état est utilisé lorsqu’une partie doit changer de manière dynamique pendant l’exécution. En fait, il peut subir plusieurs modification pendant l’exécution de l’application. Donc, il peut suivre les modifications et mettre à jour l’interface utilisateur.

Les widgets avec état sont utiles lorsque la partie de l’interface utilisateur que nous décrivons change de manière dynamique. Si nous créons un bouton qui se met à jour chaque fois qu’un utilisateur clique dessus, il s’agit d’un widget avec état.

StatelessWidget

Un widget sans état ne peut pas changer pendant l’exécution d’une application Flutter. Cela signifie qu’il est impossible de le modifier pendant que l’application est en action. Pour cette raison, l’apparence et les propriétés restent inchangées pendant toute la durée de vie du widget.

De plus, il ne stocke pas les valeurs susceptibles de changer. Les widgets sans état peuvent être utiles lorsque la partie de l’interface utilisateur que nous décrivons ne dépend d’aucun autre widget. Par exemple, le texte, les icônes et les boutons d’icônes.

Première application Flutter

Afin de tester votre code vous pouvez utiliser Android Studio, VS Code ou un IDE en ligne, comme dartpad ou flutlab. Dans la série des tutoriels Dart, nous avons installé, configuré et créé un projet avec Android Studio. Si vous avez des problèmes avec Android Studio, essayez VS Code, sinon testez votre code en ligne. Donc, vous devez être à l’aise avec le langage Dart pour que vous puissiez suivre les tutoriels de Flutter.

import 'package:flutter/material.dart';

void main() => runApp(
      const Center(
          child: Text("Hello Flutter!",
              textDirection: TextDirection.ltr,
              style: TextStyle(
                color: Colors.blue,
                fontSize: 25,
              ))),
    );

Exécution du code.

widgets Flutter

Comme vous le savez, chaque programme Dart doit avoir une fonction void main(), et Flutter ne fait pas exception. 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.
Nous avons créé une application Flutter simple qui affiche un texte "Hello Flutter!" au centre de l’écran.

Cet exemple nous montre quelques faits intéressants :

Nous avons plusieurs widgets imbriqués, comme Center et Text.
En réalité, les widgets peuvent avoir un ou plusieurs enfants, et cela se produit tout le temps et peut être très profond.
Les widgets Flutter peuvent avoir leurs propres propriétés, comme textDirection, style et color .

Astuce :

Pour l’auto complétion utilisez Ctrl+Espace.

Le widget Text permet d’afficher un texte du côté utilisateur. Il est hautement personnalisable, vous pouvez modifier la couleur et la taille de la police.

textDirection: TextDirection.ltr : définir la direction du texte, ltr qui veut dire left to right.

La structure de répertoires d’une application

Jetons un coup d’œil rapide sur la structure de répertoires d’une application Flutter.

android – dans ce dossier, nous avons tous les fichiers de projet pour l’application Android. Vous pouvez apporter des modifications, ajouter les autorisations requises et le code Android natif.

Le dossier ios – il contient tous les fichiers de projet pour l’application iOS. Vous pouvez ajouter les autorisations requises et ajouter du code iOS natif.

Le dossier lib – c’est le dossier où toute la magie opère. Vous avez un fichier main.dart. Tout votre code Dart est dans ce répertoire. En fait, il sera compilé en code natif (android et iOS).

test – dans ce dossier, vous pouvez écrire des tests pour votre application Flutter.

.gitignore – Je suppose que vous connaissez ce fichier si vous utilisez GIT comme système de contrôle de version pour vos projets. Il contient tous les noms de fichiers et de dossiers qui n’ont pas besoin d’être ajoutés à GIT .

pubspec.lock et pubspec.yaml – ces fichiers contiennent tous les noms de packages requis, leurs versions, les dépendances, le nom de votre application, la version de l’application, les dépendances de votre application, etc.

README – Il s’agit d’un fichier qui contient toutes les informations de base et la description de l’application.

Utiliser plus de widget Flutter

Nous allons voire comment utiliser StatelessWidget ainsi que d’autres widgets et fonctions.

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tutoriel Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Les Widgets Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Lorsque vous exécutez un code Flutter une deuxième fois, utilisez le rechargement à chaud, c’est plus rapide.

Autres concepts sur les widgets Flutter

Vous devez d’abord importer le package Flutter,Material Design est un langage visuel standard que Flutter utilise pour fournir des widgets.
La méthode main() utilise la notation de fléche (=>) qui vous permet de raccourcir les fonctions.
Notre application MyApp hérite de StatelessWidget, ce qui en fait également un widget.

Le widget Scaffold (qui veut dire échafaudage), issu de la bibliothèque Material, fournit une barre d’application par défaut, un titre et un corps qui contient l’arborescence de widgets de l’écran d’accueil. La sous-arborescence du widget peut être assez complexe. De plus,Scaffold est généralement utilisé comme sous-widget de MaterialApp, il remplit l’espace disponible et occupe la totalité de la fenêtre ou de l’écran de l’appareil.

En fait, la tâche principale d’un widget consiste à fournir une méthode build() qui décrit comment afficher le widget en fonction d’autres widgets de niveau inférieur. Donc, la fonction build()renvoie ce qui doit être affiché à l’écran.
MaterialApp est le widget le plus couramment utilisé pour le développement Flutter, qui est conforme aux concepts de Material Design.

BuildContext est utilisé pour localiser un widget particulier dans une arborescence et chaque widget possède son propre BuidContext. En fait, chaque widget dans Flutter est créé par la méthode build(), qui prend BuildContext comme argument.

Le corps de cet exemple consiste en un widget Center contenant un widget enfant Text. Le widget Center aligne sa sous-arborescence au centre de l’écran.

Astuce :

Pour formater votre code :

  • Android Studio/IntelliJ IDEA : clic droit sur le code et sélectionnez Reformat Code with dartfmt.
  • VS Code : clic droit et sélectionnez Format Document (Formater le document).

Comme exercice, je vous recommande d’aller à la documentation officielle des widgets Flutter et d’essayer de créer un widget pour vous familiariser un peu avec les concepts qu’on a abordé. Par exemple, Container ou Column. Prenez le code de Container et mettez-le à la place du widget Textà l’intérieur de Center. Jouez avec les propriétés comme la couleur, la hauteur et la largeur.

Le concept des widgets Flutter et votre première application

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Retour en haut