🎨 آشنایی با Container Widget در Flutter

اگه بخوای توی Flutter فقط یک ویجت بهت بدن که باهاش همه‌کاره باشی، اون Container هست.
استایل بدی، رنگ بدی، گوشه‌هاشو گرد کنی، سایه بندازی، بهش فاصله بدی، توش هرچیزی بذاری … خلاصه یک «جعبه‌ی همه‌فن‌حریف»!

⚡️ Container چیه؟

Container مثل یه جعبه تو خونه می‌مونه:

• می‌تونی چیزی داخلش بذاری (child).

• می‌تونی سایزشو کوچیک یا بزرگ کنی.

• می‌تونی رنگش کنی.

• حتی می‌تونی گوشه‌هاشو گرد کنی و براش قاب بگیری 😎
  

📌 مهم‌ترین پراپرتی‌های Container:

🔹 1. child (ویجت داخلی)

هر چی بخوای می‌ذاری داخلش.

Container( 
  child: Text("سلام دنیا 👋"),
)

🔹 2. width و height (عرض و ارتفاع)

ابعاد جعبه رو مشخص می‌کنن.

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
)

🔹 3. color (پس‌زمینه)

می‌تونی مستقیم رنگ بدی.

Container(
  color: Colors.red,
  child: Text("پس‌زمینه قرمزه!"),
)

🔹 4. padding (فاصله داخلی)

این فاصله بین مرز جعبه تا محتوای داخلشه.

Container(
  padding: EdgeInsets.all(20),
  color: Colors.green,
  child: Text("این متن از دیواره فاصله داره!"),
)

🔹 5. margin (فاصله بیرونی)

فاصله Container با ویجت‌های اطرافش.

Container(
  margin: EdgeInsets.all(30),
  color: Colors.amber,
  child: Text("من از بقیه فاصله گرفتم"),
)

🔹 6. decoration (استایل‌های حرفه‌ای)

وقتی بخوای جذاب‌ترش کنی → گرد کردن گوشه‌ها، سایه، گرادیانت و …

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.orange,
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.black45,
        blurRadius: 10,
        offset: Offset(5, 5),
      )
    ],
  ),
)

🚀 یک مثال کامل Container

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("مثال Container")),
        body: Center(
          child: Container(
            width: 200,
            height: 100,
            alignment: Alignment.center, // متن وسط چین بشه
            margin: const EdgeInsets.all(20),
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(15),
              border: Border.all(color: Colors.white, width: 3),
            ),
            child: const Text(
              "سلام دنیا 🌍",
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

• یک جعبه‌ی آبی خوشگل وسط صفحه

• گوشه‌های گرد و یک قاب سفید دورش

• متن "سلام دنیا 🌍" داخلش وسط‌چین شده

• و اطرافش هم یه فاصله‌ی قشنگ (margin) داره

✨ نکته آخر:

Container مثل یک پایه است برای طراحی UI:

• وقتی فقط اندازه یا فاصله می‌خوای → SizedBox ساده‌تره.

• ولی وقتی رنگ، حاشیه، تزئینات و امکانات کامل لازم داری → Container بی‌رقیب میشه. 💪

موفق باشید✨