Flutter : Widget

Si vous avez déjà utilisé Flutter, vous avez sûrement entendu parler des widgets. Mais savez-vous ce que c’est exactement ? Dans cet article, nous allons voir ce que sont les widgets, comment ils fonctionnent et pourquoi ils sont si importants dans Flutter.

Un widget est un élément de base de l’interface utilisateur (UI) dans Flutter. Il peut être un bouton, un texte, une image, une icône, une liste, une grille, etc. Chaque widget a des propriétés qui définissent son apparence et son comportement, comme la couleur, la taille, la position, l’animation, etc.

Les widgets sont organisés en une hiérarchie appelée arbre de widgets (widget tree). Chaque widget est le parent ou l’enfant d’un autre widget. Le widget racine est le widget qui contient tous les autres widgets de l’application. Le widget enfant est le widget qui est contenu dans un autre widget. Par exemple, si vous avez un widget texte dans un widget bouton, le widget texte est l’enfant du widget bouton, et le widget bouton est le parent du widget texte.

L’arbre de widgets est construit à partir du code que vous écrivez dans votre application. Chaque fois que vous créez un nouveau widget, vous l’ajoutez à l’arbre de widgets à un endroit spécifique. Par exemple, si vous voulez créer un écran avec un titre et une liste, vous pouvez écrire quelque chose comme ceci :

import 'package:flutter/material.dart';

// function to trigger build process
void main() => runApp(const ApertoApp());

class ApertoApp extends StatelessWidget {
  const ApertoApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.indigoAccent,
          title: const Text("Mon application Flutter"),
        ), // AppBar
        body: ListView(
          children: const [
            Text('Premier élément'),
            Text('Deuxième élément'),
            Text('Troisième élément'),
          ],
        ),
      ),
    ); // MaterialApp
  }
}

Ici, vous créez un widget Scaffold qui est le widget racine de votre écran. Le widget Scaffold a deux propriétés : appBar et body. La propriété appBar prend un widget AppBar qui contient un widget Text avec le titre de votre écran. La propriété body prend un widget ListView qui contient une liste de widgets Text avec les éléments de votre liste.

Lorsque vous lancez votre application, Flutter va parcourir l’arbre de widgets et afficher chaque widget à l’écran selon ses propriétés. Si vous modifiez une propriété d’un widget, Flutter va reconstruire l’arbre de widgets et mettre à jour l’écran avec le nouveau rendu.

Les widgets sont donc la clé pour créer des interfaces utilisateurs dynamiques et réactives avec Flutter. Ils vous permettent de décrire comment votre application doit s’afficher et se comporter en fonction des données et des événements. Il existe de nombreux types de widgets dans Flutter, chacun avec ses propres caractéristiques et fonctionnalités. Vous pouvez les combiner et les personnaliser pour créer des UI adaptées à vos besoins et à votre style.