Spacer écarte les éléments

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 4 sur 30.

Une barre supérieure comporte souvent un logo à gauche et des liens à droite. Un Spacer fait cela : c’est un widget vide qui occupe tout l’espace restant sur la ligne et pousse tout ce qui vient après à l’autre extrémité.

Row(
  children: [
    const Text('Logo'),
    const Spacer(),
    const Text('Cart'),
  ],
)

Le Spacer se place exactement là où doit se trouver l’espace. Les widgets qui le précèdent restent à gauche, ceux qui le suivent se déplacent vers la droite, et l’espace entre les voisins du même côté reste tel que vous l’avez défini.

mainAxisAlignment: MainAxisAlignment.spaceBetween répartit plutôt tous les enfants. Utilisez un Spacer lorsqu’un seul espace doit s’agrandir.

Défi

Facile

Garde Coddy à gauche et pousse Help et Log in jusqu’au bord droit, en les espaçant toujours de 16 pixels.

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: Padding(
          padding: const EdgeInsets.fromLTRB(16, 48, 16, 16),
          child: Column(
            children: [
              Row(
                children: [
                  const Text(
                    'Coddy',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const Text('Help'),
                  const SizedBox(width: 16),
                  const Text('Log in'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}