عندما تبدأ رحلتك مع Flutter، ستكتشف أن التخطيطات (Layouts) هي العمود الفقري لأي واجهة مستخدم. كل زر، نص، صورة أو حتى مساحة فارغة تراها داخل تطبيق Flutter يتم تنظيمها من خلال الـ Layout widgets.
الفكرة الأساسية أن Flutter لا يعتمد على “ملفات تصميم” منفصلة مثل XML في أندرويد، بل كل شيء هو widget، حتى التخطيطات نفسها. وهذا ما يجعل الكود أكثر وضوحًا ومرونة.
في هذا المقال، سنغوص في عالم التخطيطات ونتعرف على جميع أنواعها كما وردت في الدليل الرسمي. سنقسمها إلى ثلاث مجموعات:
- تخطيطات لطفل واحد (Single-child layout widgets).
- تخطيطات لعدة أطفال (Multi-child layout widgets).
- تخطيطات Sliver للقوائم المتدفقة.
أولًا: تخطيطات طفل واحد (Single-child layout widgets)
هذه الفئة مخصصة لوضع عنصر واحد فقط والتحكم في حجمه أو مكانه.
1. Align
يُستخدم لمحاذاة عنصر داخل مساحة أكبر.
Align(
alignment: Alignment.bottomRight,
child: Text("أنا في الأسفل يمين 👇"),
)
2. AspectRatio
يحافظ على نسبة العرض إلى الارتفاع.
AspectRatio(
aspectRatio: 16 / 9,
child: Container(color: Colors.blue),
)
3. Baseline
يرتب النصوص حسب خط الأساس.
Row(
children: [
Baseline(
baseline: 40,
baselineType: TextBaseline.alphabetic,
child: Text("Flutter", style: TextStyle(fontSize: 30)),
),
Text("Layout", style: TextStyle(fontSize: 16)),
],
)
4. Center
يبسط الأمور ويضع العنصر في الوسط.
Center(child: Text("في المنتصف تمامًا"))
5. ConstrainedBox
يفرض قيودًا على الحجم.
ConstrainedBox(
constraints: BoxConstraints(maxWidth: 200, minHeight: 100),
child: Container(color: Colors.green),
)
6. Container
الأداة الأشهر لأنها متعددة الاستخدامات.
Container(
padding: EdgeInsets.all(16),
margin: EdgeInsets.all(8),
color: Colors.orange,
child: Text("أنا داخل Container"),
)
7. CustomSingleChildLayout
للتخطيطات المخصصة باستخدام delegate. (نادر الاستخدام للمبتدئين)
8. Expanded
يمد العنصر ليملأ المساحة داخل Row/Column.
Row(
children: [
Expanded(child: Container(color: Colors.red)),
Expanded(child: Container(color: Colors.blue)),
],
)
9. FittedBox
يضبط حجم الطفل ليناسب الحاوية.
FittedBox(
child: Text("تكبير/تصغير تلقائي"),
)
10. FractionallySizedBox
يحدد الحجم كنسبة من المساحة المتاحة.
FractionallySizedBox(
widthFactor: 0.5,
child: Container(color: Colors.purple, height: 50),
)
11. IntrinsicHeight / 12. IntrinsicWidth
تجعل العناصر تعتمد على حجمها الطبيعي. (مفيدة لكن قد تؤثر على الأداء)
13. LimitedBox
يضع حدًا في حال لم توجد قيود من الوالد.
14. Offstage
يخفي العنصر لكنه يبقى موجودًا في الشجرة.
15. OverflowBox
يسمح للطفل بالتجاوز عن حجم الوالد.
16. Padding
لإضافة مسافات حول العناصر.
Padding(
padding: EdgeInsets.all(20),
child: Text("نص مع padding"),
)
17. SizedBox
لحجم ثابت أو لإضافة مسافة فارغة.
SizedBox(width: 50, height: 50)
18. SizedOverflowBox
مثل SizedBox لكن يسمح بالتجاوز.
19. Transform
لتحويلات مثل التدوير والتحريك.
Transform.rotate(
angle: 0.2,
child: Text("دوران بسيط"),
)
ثانيًا: تخطيطات متعددة الأطفال (Multi-child layout widgets)
هذه المجموعة تنظم أكثر من عنصر معًا.
1. Column
يرتب الأطفال عموديًا.
Column(
children: [
Text("العنصر الأول"),
Text("العنصر الثاني"),
],
)
2. Row
يرتب الأطفال أفقيًا.
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.home),
Icon(Icons.star),
Icon(Icons.person),
],
)
3. Flex
مرن أكثر من Row/Column.
4. Flow
لتخطيطات معقدة باستخدام delegate.
5. GridView
شبكة قابلة للتمرير.
GridView.count(
crossAxisCount: 3,
children: List.generate(9, (index) {
return Container(color: Colors.blue[100 * (index % 9)]);
}),
)
6. IndexedStack
يعرض طفل واحد فقط حسب الفهرس.
7. LayoutBuilder
يبني التخطيط حسب قيود الشاشة (مفيد للـ responsive).
8. ListView
قائمة قابلة للتمرير.
ListView(
children: List.generate(10, (i) => Text("عنصر رقم $i")),
)
9. Stack
لعرض العناصر فوق بعضها.
Stack(
children: [
Container(color: Colors.blue, width: 200, height: 200),
Positioned(top: 20, left: 20, child: Text("نص فوق الحاوية")),
],
)
10. Table
ينظم البيانات في جدول.
11. Wrap
يلف العناصر إذا لم تتسع في صف واحد.
Wrap(
spacing: 8,
children: List.generate(6, (i) => Chip(label: Text("Tag $i"))),
)
12. CustomMultiChildLayout
للتخطيطات المعقدة باستخدام delegate.
ثالثًا: Widgets الـ Sliver
تستخدم مع CustomScrollView لإنشاء قوائم متدفقة ديناميكية.
1. SliverAppBar
شريط علوي يتفاعل مع التمرير.
2. SliverFixedExtentList
قائمة بعناصر بارتفاع ثابت.
3. SliverGrid
شبكة داخل CustomScrollView.
4. SliverList
قائمة ديناميكية.
5. SliverPadding
يضيف فراغات داخل الـ sliver.
6. SliverToBoxAdapter
يسمح بدمج widgets عادية داخل التمرير المخصص.
الخاتمة
التخطيطات هي الأساس في Flutter، وفهمها يعطيك قوة هائلة لبناء واجهات متجاوبة وسلسة.
ابدأ بالأبسط مثل Row وColumn، ثم جرّب الأدوات المتقدمة مثل Stack وSliverAppBar لتصميم تطبيقات احترافية.