Spacer يباعد بين العناصر

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 4 من 30.

غالبًا ما يحتوي الشريط العلوي على شعار إلى اليسار وروابط إلى اليمين. يحقق Spacer ذلك: فهو عنصر واجهة مستخدم فارغ يشغل كل المساحة المتبقية في الصف، ويدفع كل ما يأتي بعده إلى الطرف الآخر.

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

يوضع Spacer تمامًا في المكان الذي ينبغي أن تكون فيه المسافة الفارغة. تبقى عناصر الواجهة التي تسبقه إلى اليسار، وتنتقل العناصر التي تليه إلى اليمين، وتبقى المسافة بين العناصر المتجاورة على الجانب نفسه كما ضبطتها.

أما mainAxisAlignment: MainAxisAlignment.spaceBetween فيوزّع كل العناصر المتفرعة متباعدةً عن بعضها. استخدم Spacer عندما تريد أن تتسع مسافة فارغة واحدة فقط.

التحدي

سهل

أبقِ Coddy على اليسار وادفع Help وLog in إلى الحافة اليمنى، مع إبقائهما متباعدين بمقدار 16 بكسل.

جرّب بنفسك

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