🔖 หมวดบทเรียน: การแจ้งเตือนและโต้ตอบกับผู้ใช้ด้วย 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