التخطيط (Layout)

Column — ترتيب عمودي

ترتّب العناصر فوق بعضها:

Column(
  children: const [
    Text('السطر الأول'),
    Text('السطر الثاني'),
    Text('السطر الثالث'),
  ],
)

Row — ترتيب أفقي

Row(
  children: const [
    Icon(Icons.star),
    Text('تقييم'),
  ],
)

المحاذاة

Column(
  mainAxisAlignment: MainAxisAlignment.center,    // المحور الرئيسي
  crossAxisAlignment: CrossAxisAlignment.start,   // المحور المتقاطع
  children: [ ... ],
)

Container — الصندوق المرن

للتحكّم في الحجم والمسافات والخلفية:

Container(
  padding: const EdgeInsets.all(16),
  margin: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.purple,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text('صندوق منسّق'),
)

المسافات

const SizedBox(height: 20)   // مسافة فارغة
const Padding(
  padding: EdgeInsets.all(16),
  child: Text('نص بحشو'),
)

🎯 التالي: الحالة (State) والتفاعل.