🔹 آشنایی با Row Widget در Flutter

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

✨ ساختار کلی Row:

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

⚙️ پراپرتی‌های مهم Row:

🔹 1. children:

لیست ویجت‌هایی که قراره کنار هم (افقی) قرار بگیرن.

🔹 2. mainAxisAlignment:

از اونجایی که محور اصلی Row افقی هست، این پراپرتی مشخص می‌کنه بچه‌ها افقی کجا قرار بگیرن:

• MainAxisAlignment.start → بچه‌ها سمت چپ (پیش‌فرض)

• MainAxisAlignment.center → بچه‌ها وسط افقی

• MainAxisAlignment.end → بچه‌ها سمت راست

• MainAxisAlignment.spaceBetween → اولی چپ، آخری راست، بقیه فاصله مساوی بینشون

• MainAxisAlignment.spaceAround → فاصله مساوی، ولی فاصله بیرونی نصف

• MainAxisAlignment.spaceEvenly → همه فاصله‌ها کاملاً مساوی

🔹 3. crossAxisAlignment:

محور عمودی (یعنی بالا/وسط/پایین نسبت به Row).

• CrossAxisAlignment.start → بالای ردیف

• CrossAxisAlignment.center → وسط عمودی (پیش‌فرض)

• CrossAxisAlignment.end → پایین ردیف

🚀 مثال عملی Row:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: RowExample(),
    );
  }
}

class RowExample extends StatelessWidget {
  const RowExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Row Widget"),
        centerTitle: true,
        backgroundColor: const Color.from(
          alpha: 0.452,
          red: 1,
          green: 0.757,
          blue: 0.027,
        ),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, // فاصله مساوی افقی
          crossAxisAlignment: CrossAxisAlignment.center, // وسط‌ چین عمودی
          children: const [
            Icon(Icons.star, color: Colors.amber, size: 40),
            Text("سلام دنیا 🌍", style: TextStyle(fontSize: 20)),
            ElevatedButton(onPressed: null, child: Text("کلیک")),
          ],
        ),
      ),
    );
  }
}

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

• یک ردیف وسط صفحه ساخته میشه.

• آیتم سمت چپ: ستاره طلایی ⭐

• وسط: متن "سلام دنیا 🌍"

• سمت راست: دکمه‌ی "کلیک"

• چون spaceEvenly استفاده کردیم → فاصله‌ی بین همه‌ عناصر مساویه.
  

🎯 نکته مهم:

• Row = بچه‌ها کنار هم افقی

• Column = بچه‌ها زیر هم عمودی

• برای چیدمان‌های پیشرفته (فرم‌، کارت‌ها، Layout پیچیده)، معمولاً Row و Column با هم ترکیب میشن.