Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

บทที่ 19: การใช้งาน AlertDialog และ SnackBar

🔖 หมวดบทเรียน: การแจ้งเตือนและโต้ตอบกับผู้ใช้ด้วย UI แบบ popup

📌 เหมาะสำหรับ: ผู้ที่ต้องการให้ผู้ใช้ยืนยันคำสั่ง หรือต้องการแสดงข้อความชั่วคราวเมื่อเกิดเหตุการณ์บางอย่าง

🎯 เป้าหมาย: เข้าใจการใช้ AlertDialog และ SnackBar เพื่อโต้ตอบกับผู้ใช้ได้อย่างเหมาะสม

🧭 เกริ่นนำ

ในการพัฒนาแอป เรามักจะต้องแจ้งเตือนหรือสอบถามผู้ใช้ เช่น แจ้งว่าบันทึกเสร็จแล้ว หรือให้ยืนยันการลบข้อมูล Flutter มี widget สำเร็จรูปชื่อว่า AlertDialog และ SnackBar ที่ใช้แสดง popup และข้อความแจ้งเตือนแบบลื่นไหล และใช้งานง่ายมาก

🧪 ตัวอย่างการใช้งาน AlertDialog

void _showConfirmDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: Text("ยืนยันการลบ"),
      content: Text("คุณแน่ใจหรือไม่ว่าจะลบข้อมูลนี้?"),
      actions: [
        TextButton(onPressed: () => Navigator.pop(context), child: Text("ยกเลิก")),
        ElevatedButton(onPressed: () => Navigator.pop(context), child: Text("ตกลง"))
      ],
    ),
  );
}

🧪 ตัวอย่างการใช้งาน SnackBar

void _showSnackBar(BuildContext context, String message) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text(message),
      duration: Duration(seconds: 2),
    ),
  );
}

📱 ตัวอย่างแอปเต็ม

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: DialogDemo());
  }
}

class DialogDemo extends StatelessWidget {
  void _showConfirmDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text("ยืนยัน"),
        content: Text("คุณต้องการลบข้อมูลหรือไม่?"),
        actions: [
          TextButton(onPressed: () => Navigator.pop(context), child: Text("ยกเลิก")),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
              _showSnackBar(context, "ลบข้อมูลแล้ว");
            },
            child: Text("ตกลง"),
          )
        ],
      ),
    );
  }

  void _showSnackBar(BuildContext context, String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message), duration: Duration(seconds: 2)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Dialog & SnackBar")),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showConfirmDialog(context),
          child: Text("แสดงการแจ้งเตือน"),
        ),
      ),
    );
  }
}

✅ สรุป

  • ใช้ AlertDialog เพื่อแสดงกล่องโต้ตอบ เช่น การยืนยัน/ยกเลิก
  • ใช้ SnackBar แสดงข้อความแจ้งเตือนแบบสั้นชั่วคราว
  • ทั้งสองอย่างใช้งานง่ายและเป็นมิตรกับผู้ใช้

ในบทสุดท้ายของ Flutter เบื้องต้น (บทที่ 20) เราจะเรียนรู้การ build แอปและติดตั้งลงบนมือถือจริงทั้ง Android และ iOS