Tout est widget : Text, Container et Icon

Comprenez la grande idée de Flutter, l'arbre de widgets, à travers trois briques de base : Text, Container et Icon.

8 min · 3 questions

En Flutter, tout est widget. Un widget est une brique d'interface : la description d'un morceau de ce qui s'affiche à l'écran. Un texte est un widget, une icône est un widget, un espacement est un widget... et l'écran entier aussi ! Pour construire une interface, on emboîte des widgets les uns dans les autres, comme des poupées russes. L'ensemble forme l'arbre de widgets : chaque widget a un parent (celui qui le contient) et parfois des enfants (ceux qu'il contient). Reprenons notre programme minimal et observons son arbre.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: Text(
            "Tout est widget !",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

De haut en bas : MaterialApp configure l'application entière (thème, navigation) selon Material 3, le langage visuel de Google. Scaffold (littéralement « échafaudage ») fournit la structure d'un écran : fond, barre de titre éventuelle... Center centre son enfant, et Text affiche du texte. Le paramètre style de Text reçoit un TextStyle qui règle la taille (fontSize), la couleur ou la graisse des caractères. Découvrons maintenant Container, la boîte à tout faire : un rectangle dont vous contrôlez la taille, la couleur et le contenu.

import 'package:flutter/material.dart';

Widget buildYellowBox() {
  return Container(
    width: 200,
    height: 100,
    color: Colors.amber,
    child: const Center(
      child: Text("Je suis dans une boîte"),
    ),
  );
}

La fonction buildYellowBox retourne un widget : découper ainsi son interface en petits morceaux nommés est une pratique très courante. Ce Container mesure 200 pixels de large, 100 de haut, se peint en jaune ambre grâce au catalogue de couleurs Colors, et contient un texte centré. Troisième brique de base : Icon, qui affiche un pictogramme. Flutter embarque des centaines d'icônes prêtes à l'emploi dans le catalogue Icons : une étoile, un cœur, une maison...

import 'package:flutter/material.dart';

Widget buildStar() {
  return const Icon(
    Icons.star,
    size: 48,
    color: Colors.orange,
  );
}

Retenez la logique de l'arbre : quand un widget accepte un seul enfant, le paramètre s'appelle child (c'est le cas de Center et de Container). Dans notre premier exemple, Scaffold est le parent de Center, qui est le parent de Text. Flutter dessine l'écran en parcourant cet arbre de haut en bas. Si vous savez dire qui est le parent de qui, vous savez lire n'importe quelle interface Flutter.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Dans Flutter, qu'est-ce qu'un widget ?
   • Une brique d'interface qui décrit un morceau de l'écran
   • Un fichier de configuration du projet
   • Une base de données intégrée au téléphone
2. Quel widget utilise-t-on pour afficher un pictogramme comme une étoile ?
   • Text
   • Container
   • Icon
3. Dans Center(child: Text("Salut")), quel widget est le parent ?
   • Text, car il est écrit en dernier
   • Center, car il contient Text via son paramètre child
   • Aucun : les deux widgets sont indépendants