Espace entre les widgets

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

Les enfants d’une Column se touchent. Pour ajouter de l’espace entre deux d’entre eux, insère un SizedBox vide dans la liste :

Column(
  children: [
    Text('Top'),
    SizedBox(height: 20),
    Text('Bottom'),
  ],
)

Un SizedBox ne dessine rien. Il occupe uniquement de l’espace : ici, 20 pixels de hauteur. Dans une Row, utilise plutôt SizedBox(width: 20).

Défi

Facile

Ajoute un espace de 24 pixels entre Title et Subtitle.

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: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Title', style: TextStyle(fontSize: 32)),
              Text('Subtitle'),
            ],
          ),
        ),
      ),
    );
  }
}