🚀 Modifiers in Jetpack Compose - সহজ ভাষায় সব কিছু!

Jetpack Compose-এ Modifier হলো এমন একটি শক্তিশালী টুল, যা আপনাকে UI কম্পোনেন্টের আকার, স্টাইল, লেআউট, ইন্টারঅ্যাকশন ইত্যাদি কাস্টমাইজ করতে সাহায্য করে। 🎨✨

আপনি যখন Compose UI বানান, তখন Modifier ব্যবহার করে সহজেই কম্পোনেন্টের ওপর বিভিন্ন এফেক্ট, পজিশনিং, স্টাইলিং ইত্যাদি প্রয়োগ করতে পারেন বিনা ঝামেলায়! ✅

---

🔥 Modifier কী?

Modifier হলো Composable UI-তে বিভিন্ন পরিবর্তন বা স্টাইল যোগ করার একটি ফাংশন। এটি চেইন আকারে (chaining) ব্যবহার করা যায়, মানে আপনি একাধিক Modifier একসাথে ব্যবহার করতে পারবেন!

📌 উদাহরণ:

Text(
    text = "Hello Jetpack Compose!",
    modifier = Modifier
        .padding(16.dp) // 16dp প্যাডিং যোগ করবে
        .background(Color.Cyan) // ব্যাকগ্রাউন্ড সাইয়ান করবে
        .border(2.dp, Color.Black) // 2dp কালো বর্ডার যোগ করবে
)

✅ এই Modifier গুলো চেইন আকারে কাজ করে
✅ Text-এর প্যাডিং, ব্যাকগ্রাউন্ড, ও বর্ডার নির্ধারণ করে

---

🎯 Modifiers-এর ক্যাটাগরি & ব্যাখ্যা

Jetpack Compose-এ Modifier বিভিন্ন ক্যাটাগরিতে বিভক্ত:

🏷 ক্যাটাগরি	🛠️ কাজ
Layout Modifiers	সাইজ, অবস্থান, ফ্লেক্সিবিলিটি নিয়ন্ত্রণ করে
Graphics & Styling Modifiers	ব্যাকগ্রাউন্ড, বর্ডার, শ্যাডো, অ্যালফা ইত্যাদি নিয়ন্ত্রণ করে
Interaction Modifiers	ক্লিক, স্ক্রল, ড্র্যাগ ইত্যাদি ইন্টারঅ্যাকশন হ্যান্ডেল করে
Focus Modifiers	TextField বা অন্য UI-তে ফোকাস ম্যানেজ করে
Pointer Input Modifiers	Gesture ও টাচ ইভেন্ট হ্যান্ডেল করে
Other Modifiers	কাস্টমাইজড Modifier (GraphicsLayer ইত্যাদি)

---

🏗 ১️⃣ Layout Modifiers (লেআউট সংশ্লিষ্ট Modifier)

এই Modifier-গুলো UI এর সাইজ, পজিশন, ও অ্যালাইনমেন্ট নিয়ন্ত্রণ করে।

🔹 Padding: কম্পোনেন্টের চারপাশে স্পেস দেয়

Modifier.padding(16.dp)

🔹 FillMaxSize: পুরো স্ক্রিন জুড়ে থাকে

Modifier.fillMaxSize()

🔹 Width & Height: নির্দিষ্ট প্রস্থ ও উচ্চতা নির্ধারণ করে

Modifier.width(200.dp).height(100.dp)

🔹 WrapContentSize: কনটেন্ট অনুযায়ী সাইজ সেট করে

Modifier.wrapContentSize()

🔹 Align: কম্পোনেন্টকে নির্দিষ্ট অবস্থানে রাখতে সাহায্য করে

Modifier.align(Alignment.CenterHorizontally)

---

🎨 ২️⃣ Graphics & Styling Modifiers (স্টাইলিং সংক্রান্ত Modifier)

এই Modifier-গুলো UI এর ব্যাকগ্রাউন্ড, বর্ডার, শ্যাডো, ট্রান্সপারেন্সি ইত্যাদি নিয়ন্ত্রণ করে।

🔹 Background: ব্যাকগ্রাউন্ড রঙ নির্ধারণ করে

Modifier.background(Color.Red)

🔹 Border: কম্পোনেন্টে বর্ডার যোগ করে

Modifier.border(2.dp, Color.Black)

🔹 Shadow: শ্যাডো এফেক্ট যোগ করে

Modifier.shadow(8.dp)

🔹 Alpha: কম্পোনেন্টের অ্যালফা (স্বচ্ছতা) নির্ধারণ করে

Modifier.alpha(0.5f) // 50% transparency

---

🎭 ৩️⃣ Interaction Modifiers (ইন্টারঅ্যাকশন নিয়ন্ত্রণকারী Modifier)

এই Modifier-গুলো UI-এর সঙ্গে ইউজারের ক্লিক, স্ক্রল, ড্র্যাগ, প্রেস ইত্যাদি ইভেন্ট নিয়ন্ত্রণ করে।

🔹 Clickable: ক্লিক ইভেন্ট যোগ করে

Modifier.clickable { println("Clicked!") }

🔹 Toggleable: টগল (switch on/off) ইফেক্ট দেয়

Modifier.toggleable(value = true, onValueChange = { /* Handle toggle */ })

🔹 Selectable: টেক্সট সিলেক্ট করা যায়

Modifier.selectable(selected = true, onClick = { /* Handle selection */ })

🔹 Draggable: ড্র্যাগ করা যায়

Modifier.draggable(
    orientation = Orientation.Horizontal,
    state = rememberDraggableState { delta -> /* Handle drag */ }
)

---

🔍 ৪️⃣ Focus Modifiers (ফোকাস নিয়ন্ত্রণকারী Modifier)

এই Modifier-গুলো UI-এর TextField বা অন্যান্য ইন্টারঅ্যাকটিভ উপাদানগুলোর ফোকাস কন্ট্রোল করতে সাহায্য করে।

🔹 Focusable: কম্পোনেন্টকে ফোকাস করা যায়

Modifier.focusable()

🔹 OnFocusChanged: ফোকাস পরিবর্তন হলে একশন নেয়

Modifier.onFocusChanged { focusState ->
    if (focusState.isFocused) {
        println("Component is focused")
    }
}

🔹 ClearFocusOnKeyboardDismiss: কিবোর্ড বন্ধ হলে ফোকাস রিমুভ করে

Modifier.clearFocusOnKeyboardDismiss()

---

🖱️ ৫️⃣ Pointer Input Modifiers (জেসচার/টাচ ইভেন্ট)

এই Modifier-গুলো জেসচার (gesture) বা মাউস ইন্টারঅ্যাকশন নিয়ন্ত্রণ করে।

🔹 PointerInput: কাস্টম জেসচার ডিটেক্ট করতে

Modifier.pointerInput(Unit) {
    detectTapGestures(
        onTap = { println("Tapped!") },
        onDoubleTap = { println("Double Tapped!") }
    )
}

🔹 Scrollable: স্ক্রল করার অনুমতি দেয়

Modifier.scrollable(
    orientation = Orientation.Vertical,
    state = rememberScrollState()
)

---

🏆 ৬️⃣ Other Useful Modifiers

🔹 GraphicsLayer: UI এর রোটেশন, স্কেলিং, ট্রান্সলেশন নিয়ন্ত্রণ করে

Modifier.graphicsLayer(
    scaleX = 1.5f,
    scaleY = 1.5f,
    rotationZ = 45f
)

🔹 TestTag: UI টেস্টিংয়ের জন্য ট্যাগ সেট করে

Modifier.testTag("MyButton")

---

🎯 শেষ কথা

Jetpack Compose-এ Modifier হলো UI কাস্টমাইজ করার অন্যতম সহজ এবং শক্তিশালী উপায়।

কেন Modifier ব্যবহার করবেন?
✅ UI সহজে স্টাইল করতে সাহায্য করে
✅ Layout ও Interaction সহজে নিয়ন্ত্রণ করা যায়
✅ Compose-এর declarative nature ধরে রাখে
✅ চেইন আকারে Modifier ব্যবহার করা যায়

💡 কীভাবে Modifier ব্যবহার করবেন?
✔ .padding(), .background(), .clickable() ইত্যাদি দিয়ে UI কাস্টমাইজ করুন
✔ একাধিক Modifier চেইন করে সহজেই অ্যাপের ডিজাইন ম্যানেজ করুন
✔ User Interaction, Layout & Styling সব কিছুর জন্য Modifier ব্যবহার করুন

এখন আপনি Modifier সম্পর্কে সবকিছু জানেন! 🚀🔥 Jetpack Compose দিয়ে অসাধারণ UI বানান! 🎨✨