آشنایی با Column Widget در Flutter

🎯 آشنایی با Column Widget در Flutter

یکی از مهم‌ترین ویجت‌های چیدمان (Layout) در Flutter، ویجت Column هست.
همون‌طوری که از اسمش معلومه، وظیفه‌ی Column اینه که بچه‌های خودش رو در یک ستون عمودی (از بالا به پایین) بچینه.

Column(
  children: [
    Text("سلام"),
    Icon(Icons.star),
    ElevatedButton(onPressed: () {}, child: Text("کلیک")),
  ],
)

🔍 خروجی:

اول متن "سلام" نمایش داده میشه

زیر اون آیکون ستاره

و در آخر یک دکمه

⚙️ ویژگی‌های مهم Column

1. children

لیست بچه‌هایی که داخل ستون قرار می‌گیرن. (هر چیزی می‌تونه باشه: متن، آیکون، دکمه و …)

2. mainAxisAlignment

چون محور اصلی ستون عمودی هست، این ویژگی مشخص می‌کنه بچه‌ها توی این ستون عمودی کجا قرار بگیرن:

start → بالای ستون (پیش‌فرض)
center → وسط ستون
end → پایین ستون
spaceBetween → فاصله مساوی بین بچه‌ها، ولی بالا و پایین ستون خالی
spaceAround → فاصله‌ها مساوی، ولی فاصله‌ی بیرون نصف فاصله‌ی بین بچه‌ها
spaceEvenly → همه‌ فاصله‌ها دقیقاً مساوی (بالا، بین، پایین)

3. crossAxisAlignment

این ویژگی تعیین می‌کنه بچه‌ها افقی در کجای ستون قرار بگیرن (یعنی ترازبندی در عرض):

start → چپ‌چین
center → وسط
end → راست‌چین

🚀 مثال کامل Column در عمل

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(
        appBar: AppBar(
          title: const Text("Flutter Column Example"),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // بچه‌ها در وسط عمودی
            crossAxisAlignment: CrossAxisAlignment.center, // بچه‌ها وسط افقی
            children: const [
              Text(
                "سلام 😍",
                style: TextStyle(fontSize: 24),
              ),
              Icon(Icons.star, color: Colors.amber, size: 40),
              SizedBox(height: 20), // فاصله بین ویجت‌ها
              ElevatedButton(
                onPressed: null, // برای فعال‌سازی: ()=>{}
                child: Text("کلیک"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

📊 نتیجه‌ی اجرای این کد:

در بالای صفحه یک AppBar با متن نمایش داده میشه.
در وسط صفحه یک متن "سلام 😍" قرار داره.
زیر اون یک آیکون ستاره طلایی.
در نهایت یک دکمه که روش نوشته "کلیک".

🔑 نکات پایانی

ستون همیشه بچه‌ها رو از بالا به پایین می‌چینه.
برای کنترل جای عمودی بچه‌ها از mainAxisAlignment استفاده کن.
برای کنترل افقی (تراز عرضی) بچه‌ها از crossAxisAlignment استفاده کن.
وقتی تعداد بچه‌ها زیاده و توی صفحه جا نمی‌شن، باید Column رو داخل یک SingleChildScrollView بذاری.