تخطَّ إلى المحتوى

📱 شرح Flutter

التخطيط بعمق

الدرس 10 من 25· ⏱ 1 دقائق قراءة

Column و Row

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text("الأوّل"),
    Text("الثاني"),
  ],
)

Row(
  children: [Icon(Icons.star), Text("تقييم")],
)
  • mainAxisAlignment: المحور الرئيسي (عمودي لـ Column).
  • crossAxisAlignment: المحور المتقاطع.

Container

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

Expanded و Flexible

يملأ المساحة المتاحة داخل Row/Column:

Row(
  children: [
    Expanded(child: Text("يتمدّد")),
    Text("ثابت"),
  ],
)

ويدجتس مساعدة

Padding(padding: EdgeInsets.all(8), child: ...)
SizedBox(height: 16)        // فراغ
Center(child: ...)
Stack(children: [...])      // طبقات فوق بعض

🎯 التالي: القوائم والشبكات.

هل كان هذا الدرس مفيدًا؟