Spacer tiene gli elementi separati

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 4 di 30.

Una barra superiore spesso ha un logo a sinistra e dei link a destra. Un Spacer fa proprio questo: è un widget vuoto che occupa tutto lo spazio rimasto nella riga e spinge tutto ciò che viene dopo verso l'altra estremità.

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

Spacer va esattamente nel punto in cui dovrebbe esserci lo spazio vuoto. I widget che lo precedono rimangono a sinistra, quelli che lo seguono si spostano a destra e lo spazio tra i vicini sullo stesso lato rimane come l'hai impostato.

mainAxisAlignment: MainAxisAlignment.spaceBetween distribuisce invece tutti i figli separandoli. Usa un Spacer quando deve ampliarsi un solo spazio.

Sfida

Facile

Mantieni Coddy a sinistra e sposta Help e Log in fino al bordo destro, mantenendoli comunque a 16 pixel di distanza.

Provalo tu

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'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}