Flutter Mobile Development · درس

عناصر التخطيط الأساسية

أتقن عناصر التخطيط الأساسية مثل Row وColumn وContainer وStack لإنشاء واجهات مستخدم منظمة ومتجاوبة

عناصر التخطيط الأساسية درس مجاني في Flutter Mobile Development على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Flutter Mobile Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Why Layouts Matter

In Flutter, everything is a widget! To build complex and beautiful user interfaces, you need to arrange these widgets on the screen.

Layout widgets are special widgets designed to help you organize other widgets, defining their size, position, and how they interact with each other.

Meet the Container

The Container widget is one of the most versatile layout widgets. Think of it as a customizable box that can hold a single child widget.

You can use it to:

Add padding or margins
Set background colors or decorations
Define specific width and height
Transform its position or rotation

Simple Colored Box

Let's create a basic Container with a child Text widget. Notice how we set its color and padding.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Container Demo')),
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(20.0),
            color: Colors.blueAccent,
            child: const Text(
              'Hello from Container!',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ),
      ),
    );
  }
}

Horizontal with Row

When you need to arrange multiple widgets side-by-side horizontally, the Row widget is your go-to. It takes a list of widgets as its children.

Row automatically tries to fit its children along the horizontal axis, and you can control their alignment within the row.

Row of Buttons

Here's how you can place three buttons next to each other using a Row. We'll add some spacing between them.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Row Demo')),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
              ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
              ElevatedButton(onPressed: () {}, child: const Text('Button 3')),
            ],
          ),
        ),
      ),
    );
  }
}

Vertical with Column

Just as Row arranges widgets horizontally, the Column widget arranges them vertically, one below the other.

It also takes a list of children and lets you control their vertical alignment.

Stacked Text Fields

Let's create a simple login-like form using a Column to stack two TextFields and a button vertically.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Column Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: TextField(
                  decoration: InputDecoration(labelText: 'Username'),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: 'Password'),
                ),
              ),
              ElevatedButton(onPressed: () {}, child: const Text('Login')),
            ],
          ),
        ),
      ),
    );
  }
}

Aligning Children

Both Row and Column use two important properties for alignment:

mainAxisAlignment: How children are positioned along the primary axis (horizontal for Row, vertical for Column). Examples: start, center, end, spaceAround.
crossAxisAlignment: How children are positioned along the perpendicular axis (vertical for Row, horizontal for Column). Examples: start, center, end, stretch.

These give you fine control over your layouts!

Overlapping with Stack

Sometimes you need to place widgets on top of each other, like text over an image. That's where the Stack widget comes in.

Stack allows you to layer multiple children widgets. You can control their exact position within the stack using the Positioned widget.

Image with Text Overlay

Let's put some text directly on top of an image using a Stack. We'll use Positioned to place the text precisely.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Stack Demo')),
        body: Center(
          child: SizedBox(
            width: 300,
            height: 200,
            child: Stack(
              children: <Widget>[
                Image.network(
                  'https://picsum.photos/300/200',
                  fit: BoxFit.cover,
                ),
                const Positioned(
                  bottom: 10,
                  left: 10,
                  child: Text(
                    'Beautiful Scenery',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      shadows: [
                        Shadow(blurRadius: 5, color: Colors.black)
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Layout Challenge

Which of the following widgets are primarily used for arranging multiple children widgets in a single direction (either horizontally or vertically)?

Layouts Mastered!

Great job! You've now mastered the fundamental layout widgets in Flutter:

Container: A versatile box for single children, offering padding, margin, color, and size control.
Row: Arranges multiple children horizontally.
Column: Arranges multiple children vertically.
Stack: Layers children on top of each other, often used with Positioned.

Understanding these is key to building any Flutter UI!

الأسئلة الشائعة

هل درس «عناصر التخطيط الأساسية» مجاني؟

نعم — نص درس «عناصر التخطيط الأساسية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Flutter Mobile Development، انتقل إلى CoddyKit PRO. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

ماذا ستتعلم في «عناصر التخطيط الأساسية»؟

أتقن عناصر التخطيط الأساسية مثل Row وColumn وContainer وStack لإنشاء واجهات مستخدم منظمة ومتجاوبة تتمرن على Flutter Mobile Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Flutter Mobile Development؟

لا تُشترط خبرة سابقة. Flutter Mobile Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «عناصر التخطيط الأساسية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Flutter Mobile Development هذا؟

نعم. كل درس في Flutter Mobile Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

عناصر Stateless مقابل Stateful
عناصر التخطيط الأساسية
عناصر واجهة المستخدم التفاعلية
إنشاء قوائم قابلة للتمرير باستخدام ListView

← العودة إلى Flutter Mobile Development