Spacer separa los elementos

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 4 de 30.

Una barra superior suele tener un logotipo a la izquierda y enlaces a la derecha. Un Spacer hace eso: es un widget vacío que ocupa todo el espacio libre de la fila y empuja todo lo que viene después hacia el otro extremo.

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

El Spacer va exactamente donde debe estar el espacio. Los widgets que están antes se quedan a la izquierda, los que están después se mueven a la derecha y el espacio entre los elementos vecinos del mismo lado se mantiene tal como lo definiste.

mainAxisAlignment: MainAxisAlignment.spaceBetween separa todos los elementos secundarios. Usa un Spacer cuando solo deba ampliarse un espacio.

Desafío

Fácil

Mantén Coddy a la izquierda y coloca Help y Log in en el borde derecho, con una separación de 16 píxeles.

Pruébalo tú mismo

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