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