Spacer Arayı Açar

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 4 / 30.

Üst çubukta genellikle sol tarafta bir logo, sağ tarafta ise bağlantılar bulunur. Spacer bunu yapar: satırda kalan tüm alanı kaplayan boş bir bileşendir ve kendisinden sonra gelen her şeyi diğer uca iter.

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

Spacer tam olarak boşluğun olması gereken yere konur. Önündeki bileşenler solda kalır, sonrasındaki bileşenler sağa geçer ve aynı taraftaki komşu bileşenler arasındaki boşluk, ayarladığınız gibi kalır.

mainAxisAlignment: MainAxisAlignment.spaceBetween bunun yerine her alt bileşeni birbirinden ayırır. Yalnızca tek bir boşluğun büyümesi gerektiğinde Spacer kullanın.

Görev

Kolay

Coddy'yi solda tut ve Help ile Log in'i aralarında yine 16 piksel olacak şekilde sağ kenara hizala.

Kendin dene

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