Spacer Memisahkan Elemen

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 4 dari 30.

Bilah atas sering memiliki logo di kiri dan tautan di kanan. Spacer melakukan hal itu: ini adalah widget kosong yang mengambil semua ruang tersisa dalam baris, lalu mendorong semua yang ada setelahnya ke ujung lainnya.

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

Spacer ditempatkan tepat di tempat jarak seharusnya berada. Widget sebelumnya tetap di kiri, widget setelahnya berpindah ke kanan, dan jarak antara widget yang bersebelahan di sisi yang sama tetap seperti yang kamu atur.

mainAxisAlignment: MainAxisAlignment.spaceBetween justru merenggangkan setiap child. Gunakan Spacer saat hanya satu jarak yang perlu melebar.

Tantangan

Mudah

Letakkan Coddy di kiri dan dorong Help serta Log in ke tepi kanan, dengan jarak 16 piksel.

Coba sendiri

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