Spacer rozsuwa elementy

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 4 z 30.

Górny pasek często ma logo po lewej stronie i linki po prawej. Spacer robi właśnie to: jest pustym widżetem, który zajmuje całe wolne miejsce w wierszu i przesuwa wszystko, co znajduje się za nim, na drugi koniec.

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

Spacer umieszcza się dokładnie tam, gdzie ma być odstęp. Widżety przed nim pozostają po lewej stronie, widżety za nim przesuwają się w prawo, a odstęp między sąsiadami po tej samej stronie pozostaje taki, jak go ustawiono.

mainAxisAlignment: MainAxisAlignment.spaceBetween zamiast tego rozsuwa wszystkie elementy potomne. Użyj Spacer, gdy ma się powiększać tylko jeden odstęp.

Wyzwanie

Łatwy

Umieść Coddy po lewej stronie, a Help i Log in przesuń do prawej krawędzi, zachowując między nimi odstęp 16 pikseli.

Spróbuj swoich sił

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