Flutter Buttons & Clickable Widgets Guide

Flutter-এ Button এবং Clickable Widget অ্যাপের User Interaction-এর অন্যতম গুরুত্বপূর্ণ অংশ। নিচে Flutter-এর জনপ্রিয় Button Widget গুলোর Common Properties এবং তাদের কাজ Comment আকারে দেখানো হলো।

---

🔹 ElevatedButton - All Common Properties

ElevatedButton(
  // বাটনে ক্লিক করলে যা হবে
  onPressed: () {},

  // বাটন লং প্রেস করলে যা হবে
  onLongPress: () {},

  // শুরুতেই Focus পাবে কিনা
  autofocus: false,

  // Overflow হলে কিভাবে Clip হবে
  clipBehavior: Clip.none,

  // বাটনের ভিতরের Widget
  child: const Text("Elevated Button"),

  style: ElevatedButton.styleFrom(

    // Background Color
    backgroundColor: Colors.green,

    // Text/Icon Color
    foregroundColor: Colors.white,

    // Disabled Background Color
    disabledBackgroundColor: Colors.grey,

    // Disabled Text Color
    disabledForegroundColor: Colors.black,

    // Shadow Color
    shadowColor: Colors.black,

    // Elevation Height
    elevation: 10,

    // Inner Padding
    padding: EdgeInsets.all(15),

    // Minimum Size
    minimumSize: Size(150, 50),

    // Maximum Size
    maximumSize: Size(300, 70),

    // Fixed Size
    fixedSize: Size(200, 60),

    // Border Shape
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),

    // Border
    side: BorderSide(
      color: Colors.red,
      width: 2,
    ),

    // Text Style
    textStyle: TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.bold,
    ),

    // Child Alignment
    alignment: Alignment.center,
  ),
)

---

🔹 IconButton - All Common Properties

IconButton(

  // Click Event
  onPressed: () {},

  // Long Press Event
  onLongPress: () {},

  // Hover করলে Tooltip দেখাবে
  tooltip: "Delete",

  // Icon Size
  iconSize: 40,

  // Splash Effect Radius
  splashRadius: 30,

  // Selected State
  isSelected: false,

  // Selected হলে এই Icon দেখাবে
  selectedIcon: Icon(Icons.favorite),

  // Default Icon
  icon: Icon(Icons.favorite_border),

  style: IconButton.styleFrom(

    // Background Color
    backgroundColor: Colors.blue,

    // Icon Color
    foregroundColor: Colors.white,

    // Disabled Background Color
    disabledBackgroundColor: Colors.grey,

    // Disabled Icon Color
    disabledForegroundColor: Colors.black,

    // Shadow Color
    shadowColor: Colors.black,

    // Elevation
    elevation: 8,

    // Padding
    padding: EdgeInsets.all(12),
  ),
)

---

🔹 OutlinedButton - All Common Properties

OutlinedButton(

  // Click Event
  onPressed: () {},

  // Long Press Event
  onLongPress: () {},

  // Button Content
  child: Text("Outlined Button"),

  style: OutlinedButton.styleFrom(

    // Text Color
    foregroundColor: Colors.green,

    // Background Color
    backgroundColor: Colors.white,

    // Padding
    padding: EdgeInsets.all(15),

    // Elevation
    elevation: 5,

    // Border
    side: BorderSide(
      color: Colors.green,
      width: 2,
    ),

    // Shape
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),

    // Text Style
    textStyle: TextStyle(
      fontSize: 18,
    ),
  ),
)

---

🔹 TextButton - All Common Properties

TextButton(

  // Click Event
  onPressed: () {},

  // Long Press Event
  onLongPress: () {},

  // Button Content
  child: Text("Text Button"),

  style: TextButton.styleFrom(

    // Text Color
    foregroundColor: Colors.blue,

    // Background Color
    backgroundColor: Colors.grey,

    // Padding
    padding: EdgeInsets.all(10),

    // Shape
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),

    // Text Style
    textStyle: TextStyle(
      fontSize: 18,
    ),
  ),
)

---

🔹 FloatingActionButton (FAB)

FloatingActionButton(

  // Click Event
  onPressed: () {},

  // Background Color
  backgroundColor: Colors.blue,

  // Icon Color
  foregroundColor: Colors.white,

  // Normal Elevation
  elevation: 10,

  // Focus Elevation
  focusElevation: 15,

  // Hover Elevation
  hoverElevation: 12,

  // Press Elevation
  highlightElevation: 20,

  // Tooltip Text
  tooltip: "Add",

  // Shape
  shape: CircleBorder(),

  // Hero Animation Tag
  heroTag: "add_btn",

  // Mini FAB
  mini: false,

  child: Icon(Icons.add),
)

---

🔹 DropdownButton

DropdownButton<String>(

  // Selected Value
  value: selectedValue,

  // Dropdown Items
  items: items,

  // Value Change Event
  onChanged: (value) {},

  // Hint Widget
  hint: Text("Select"),

  // Dropdown Icon
  icon: Icon(Icons.arrow_drop_down),

  // Icon Size
  iconSize: 30,

  // Menu Background Color
  dropdownColor: Colors.white,

  // Menu Elevation
  elevation: 8,

  // Full Width নেবে কিনা
  isExpanded: true,

  // Underline Widget
  underline: SizedBox(),
)

---

🔹 PopupMenuButton

PopupMenuButton(

  // Menu Item Select হলে
  onSelected: (value) {},

  // Menu Items
  itemBuilder: (context) => [

    PopupMenuItem(
      value: 1,
      child: Text("Edit"),
    ),

    PopupMenuItem(
      value: 2,
      child: Text("Delete"),
    ),
  ],

  // Menu Icon
  icon: Icon(Icons.more_vert),

  // Tooltip
  tooltip: "More",

  // Background Color
  color: Colors.white,

  // Elevation
  elevation: 8,
)

---

🔹 GestureDetector

GestureDetector(

  // Single Tap
  onTap: () {},

  // Double Tap
  onDoubleTap: () {},

  // Long Press
  onLongPress: () {},

  // Tap শুরু হলে
  onTapDown: (details) {},

  // Tap শেষ হলে
  onTapUp: (details) {},

  // Tap Cancel হলে
  onTapCancel: () {},

  // Drag Update
  onPanUpdate: (details) {},

  // Horizontal Drag
  onHorizontalDragUpdate: (details) {},

  // Vertical Drag
  onVerticalDragUpdate: (details) {},

  child: Icon(Icons.delete),
)

---

🔹 InkWell

InkWell(

  // Click Event
  onTap: () {},

  // Double Click Event
  onDoubleTap: () {},

  // Long Press Event
  onLongPress: () {},

  // Splash Color
  splashColor: Colors.red,

  // Highlight Color
  highlightColor: Colors.green,

  // Hover Color
  hoverColor: Colors.blue,

  // Focus Color
  focusColor: Colors.orange,

  // Rounded Border
  borderRadius: BorderRadius.circular(12),

  child: Padding(
    padding: EdgeInsets.all(20),
    child: Text("InkWell"),
  ),
)

---

📌 সংক্ষেপে

Widget	ব্যবহার
ElevatedButton	Primary Action Button
TextButton	Simple Text Action
OutlinedButton	Border সহ Button
IconButton	Icon Click Action
FloatingActionButton	Main Floating Action
DropdownButton	Option Selection
PopupMenuButton	Menu Options
GestureDetector	Gesture Detect করা
InkWell	Material Ripple Effect সহ Click