L’arborescence des widgets

Fait partie de la section Votre première application du Journey Flutter de Coddy. Leçon 3 sur 32.

Les widgets se trouvent à l’intérieur d’autres widgets. Un widget qui en contient un autre le lui transmet avec child:, comme ici avec Center :

Center(
  child: Text('Hello'),
)

Center ne dessine rien lui-même. Il prend son widget enfant et le place au milieu de l’espace dont il dispose. Sans lui, le texte se trouve dans le coin supérieur gauche.

Des widgets imbriqués les uns dans les autres forment un arbre de widgets. Dans votre application, l’arbre est composé de MaterialApp, puis de Scaffold, puis de ce que vous placez dans son body:. Le widget enfant de chaque widget est écrit entre ses parenthèses, qui représentent donc l’arbre. Les virgules à la fin de chaque ligne permettent de garder le code bien ordonné.

Défi

Facile

Le texte est bloqué dans le coin supérieur gauche. Enveloppe-le dans un Center pour qu’il se trouve au milieu de l’écran :

remplace body: Text('Right in the middle'), par un Center dont le child: est ce Text

Essayez vous-même

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Text('Right in the middle'),
      ),
    );
  }
}