Flutter Spacer, Stack & Positioned - All Common Properties

---

🔹 Spacer - All Common Properties

Spacer Row, Column বা Flex এর ভিতরে Empty Space তৈরি করার জন্য ব্যবহার করা হয়।

Row(
  children: [

    Icon(Icons.home),

    Spacer(),

    Icon(Icons.settings),
  ],
)

Spacer Widget

Spacer(

  // কতটুকু Space নিবে
  flex: 1,

)

Multiple Spacer Example

Row(
  children: [

    Text("A"),

    Spacer(flex: 1),

    Text("B"),

    Spacer(flex: 2),

    Text("C"),
  ],
)

📌 Spacer Properties Summary

Property	কাজ
flex	কত অংশ Space নিবে

---

🔹 Stack - All Common Properties

Stack Widget একাধিক Widget একটার উপর আরেকটা বসানোর জন্য ব্যবহার করা হয়।

Stack(

  // Children Alignment
  alignment: Alignment.center,

  // Text Direction
  textDirection: TextDirection.ltr,

  // Size Behavior
  fit: StackFit.loose,

  // Overflow Control
  clipBehavior: Clip.hardEdge,

  children: [

    Container(
      width: 300,
      height: 300,
      color: Colors.blue,
    ),

    Text(
      "Flutter",
      style: TextStyle(
        color: Colors.white,
        fontSize: 25,
      ),
    ),
  ],
)

StackFit Values

StackFit.loose
StackFit.expand
StackFit.passthrough

📌 Stack Properties Summary

Property	কাজ
alignment	Children Position
fit	Children Size Control
clipBehavior	Overflow Control
textDirection	Layout Direction
children	Stack এর Widget List

---

🔹 Positioned - All Common Properties

Positioned শুধুমাত্র Stack এর ভিতরে কাজ করে।

Stack(
  children: [

    Container(
      width: 300,
      height: 300,
      color: Colors.blue,
    ),

    Positioned(

      child: Icon(
        Icons.favorite,
        color: Colors.white,
        size: 40,
      ),
    ),
  ],
)

---

Positioned with All Properties

Positioned(

  // Top থেকে Distance
  top: 20,

  // Bottom থেকে Distance
  bottom: null,

  // Left থেকে Distance
  left: 20,

  // Right থেকে Distance
  right: null,

  // Width
  width: 100,

  // Height
  height: 50,

  child: Container(
    color: Colors.red,
  ),
)

---

Positioned.fill()

Positioned.fill(

  // Left Margin
  left: 10,

  // Top Margin
  top: 10,

  // Right Margin
  right: 10,

  // Bottom Margin
  bottom: 10,

  child: Container(
    color: Colors.green,
  ),
)

---

Positioned.directional()

Positioned.directional(

  // Text Direction
  textDirection: TextDirection.ltr,

  // Start Position
  start: 20,

  // Top Position
  top: 20,

  // End Position
  end: 20,

  // Bottom Position
  bottom: 20,

  child: Container(
    color: Colors.orange,
  ),
)

---

🔹 Complete Stack Example

Stack(

  alignment: Alignment.center,

  children: [

    Container(
      width: 300,
      height: 300,
      color: Colors.blue,
    ),

    Positioned(
      top: 20,
      left: 20,
      child: Icon(
        Icons.favorite,
        color: Colors.white,
      ),
    ),

    Positioned(
      bottom: 20,
      right: 20,
      child: Icon(
        Icons.star,
        color: Colors.yellow,
      ),
    ),

    CircleAvatar(
      radius: 40,
      child: Text("S"),
    ),
  ],
)

---

📌 Widget Summary

Widget	ব্যবহার
Spacer	Empty Flexible Space
Stack	Widget Overlap
Positioned	Stack এর ভিতরে Position Control
Positioned.fill	পুরো Stack Fill
Positioned.directional	Start/End Position Control

---

📌 Visual Example

┌─────────────────────┐
│ ❤️ Top Left         │
│                     │
│       Avatar        │
│                     │
│         ⭐ Bottom   │
└─────────────────────┘

Flutter-এ Stack + Positioned ব্যবহার করে Badge, Floating Button, Notification Count, Profile Overlay, Custom UI Design ইত্যাদি তৈরি করা হয়।