+

 

Flutter Dialog, BottomSheet, Modal BottomSheet & SnackBar - All Common Properties

---

🔹 AlertDialog - All Common Properties

সবচেয়ে বেশি ব্যবহৃত Dialog Widget।

showDialog(
  context: context,

  barrierDismissible: true,

  builder: (context) {

    return AlertDialog(

      // Dialog Title
      title: Text("Delete"),

      // Dialog Content
      content: Text(
        "Are you sure?",
      ),

      // Background Color
      backgroundColor: Colors.white,

      // Shadow Color
      shadowColor: Colors.black,

      // Elevation
      elevation: 10,

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

      // Content Padding
      contentPadding:
          EdgeInsets.all(20),

      // Title Padding
      titlePadding:
          EdgeInsets.all(20),

      // Action Buttons
      actions: [

        TextButton(
          onPressed: () {},
          child: Text("Cancel"),
        ),

        ElevatedButton(
          onPressed: () {},
          child: Text("Delete"),
        ),
      ],

      // Action Alignment
      actionsAlignment:
          MainAxisAlignment.end,
    );
  },
);

---

🔹 SimpleDialog

একাধিক Option দেখানোর জন্য।

showDialog(
  context: context,

  builder: (context) {

    return SimpleDialog(

      // Title
      title: Text("Choose Option"),

      // Background Color
      backgroundColor: Colors.white,

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

      children: [

        SimpleDialogOption(

          onPressed: () {},

          child: Text("Camera"),
        ),

        SimpleDialogOption(

          onPressed: () {},

          child: Text("Gallery"),
        ),
      ],
    );
  },
);

---

🔹 Dialog

Custom Dialog তৈরির জন্য।

showDialog(
  context: context,

  builder: (context) {

    return Dialog(

      // Background Color
      backgroundColor: Colors.white,

      // Elevation
      elevation: 10,

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

      child: Container(

        padding:
            EdgeInsets.all(20),

        child: Column(

          mainAxisSize:
              MainAxisSize.min,

          children: [

            Text("Custom Dialog"),

            SizedBox(height: 20),

            ElevatedButton(
              onPressed: () {},
              child: Text("OK"),
            ),
          ],
        ),
      ),
    );
  },
);

---

🔹 showModalBottomSheet()

সবচেয়ে বেশি ব্যবহৃত BottomSheet।

showModalBottomSheet(

  context: context,

  // Full Height Allow
  isScrollControlled: true,

  // Dismiss Allowed
  isDismissible: true,

  // Drag Allowed
  enableDrag: true,

  // Background Color
  backgroundColor: Colors.white,

  // Elevation
  elevation: 10,

  // Shape
  shape: RoundedRectangleBorder(

    borderRadius:
        BorderRadius.vertical(

      top: Radius.circular(20),
    ),
  ),

  // Clip
  clipBehavior:
      Clip.antiAlias,

  builder: (context) {

    return Container(

      height: 300,

      padding:
          EdgeInsets.all(20),

      child: Text(
        "Modal BottomSheet",
      ),
    );
  },
);

---

🔹 Persistent BottomSheet

Scaffold এর সাথে Attached থাকে।

Scaffold(

  bottomSheet: Container(

    height: 80,

    width: double.infinity,

    color: Colors.blue,

    child: Center(

      child: Text(
        "Persistent BottomSheet",
      ),
    ),
  ),
)

---

🔹 showBottomSheet()

Programmatically Open BottomSheet

Scaffold.of(context)
    .showBottomSheet(

  (context) {

    return Container(

      height: 200,

      color: Colors.white,

      child: Center(

        child: Text(
          "BottomSheet",
        ),
      ),
    );
  },
);

---

🔹 SnackBar - All Common Properties

ScaffoldMessenger.of(context)
    .showSnackBar(

  SnackBar(

    // Main Message
    content: Text(
      "Login Success",
    ),

    // Background Color
    backgroundColor:
        Colors.green,

    // Duration
    duration:
        Duration(seconds: 3),

    // Elevation
    elevation: 10,

    // Margin
    margin:
        EdgeInsets.all(10),

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

    // Shape
    shape:
        RoundedRectangleBorder(

      borderRadius:
          BorderRadius.circular(10),
    ),

    // Floating / Fixed
    behavior:
        SnackBarBehavior.floating,

    // Close Icon
    showCloseIcon: true,

    // Close Icon Color
    closeIconColor:
        Colors.white,

    // Action Button
    action: SnackBarAction(

      label: "Undo",

      textColor:
          Colors.yellow,

      onPressed: () {},
    ),
  ),
);

---

🔹 MaterialBanner

SnackBar এর Alternative।

ScaffoldMessenger.of(context)
    .showMaterialBanner(

  MaterialBanner(

    content: Text(
      "Internet Connected",
    ),

    backgroundColor:
        Colors.green,

    leading:
        Icon(Icons.wifi),

    actions: [

      TextButton(

        onPressed: () {},

        child: Text("OK"),
      ),
    ],
  ),
);

---

🔹 CupertinoAlertDialog (iOS Style)

showCupertinoDialog(

  context: context,

  builder: (context) {

    return CupertinoAlertDialog(

      title: Text("Delete"),

      content: Text(
        "Are you sure?",
      ),

      actions: [

        CupertinoDialogAction(

          onPressed: () {},

          child: Text("No"),
        ),

        CupertinoDialogAction(

          onPressed: () {},

          child: Text("Yes"),
        ),
      ],
    );
  },
);

---

📌 Dialog Summary

Widget	ব্যবহার
AlertDialog	Confirmation Dialog
SimpleDialog	Option Selection
Dialog	Custom Dialog
CupertinoAlertDialog	iOS Dialog

---

📌 BottomSheet Summary

Widget	ব্যবহার
showModalBottomSheet	Modal Sheet
showBottomSheet	Programmatic Sheet
Persistent BottomSheet	Fixed Bottom Sheet

---

📌 Message Widgets

Widget	ব্যবহার
SnackBar	Temporary Message
MaterialBanner	Top Notification

---

📌 Most Used

showDialog()
showModalBottomSheet()
ScaffoldMessenger.showSnackBar()

এই তিনটিই Flutter অ্যাপের ৯০% ক্ষেত্রে সবচেয়ে বেশি ব্যবহৃত Notification / Interaction Widgets।