Halo sobat Flutter! Pada artikel kali ini saya ingin membahas tentang “Show Alert Popup Dialog with Cupertino Alert Dialog”.
Cupertino Alert Dialog adalah salah satu jenis dari function pada showDialog. –
- Buat sebuah Material Button
MaterialButton(
minWidth: double.infinity,
child: Container(
height: 40,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Color(0XFFF2F2F2), width: 2),
boxShadow: [
BoxShadow(color: Colors.white, spreadRadius: 1)
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"ABSEN MASUK KELAS",
style: TextStyle(
fontSize: 14,
color: Color(0xff3ac6bc),
fontWeight: FontWeight.bold),
)
],
),
),
onPressed: (){}
}),
2. Kemudian tambahkan code berikut didalam OnPressed Material Button
final number = await showCupertinoDialog(
barrierDismissible: true,
context: context,
builder: createDialog);
print('Absen Kelas ? $number');
}
),
3. Buat widget baru menggunakan Cupertino Alert Dialog
Widget createDialog(BuildContext context) => CupertinoAlertDialog(
actions: [
CupertinoDialogAction(
child: Text(
"Hadir",
style: TextStyle(
fontSize: 14,
color: Color(0xff13A89E),
),
),
onPressed: () => Navigator.pop(context, 1),
),
CupertinoDialogAction(
child: Text(
"Sakit",
style: TextStyle(
fontSize: 14,
color: Color(0xffF2C94C),
),
),
onPressed: () => Navigator.pop(context, 2)),
CupertinoDialogAction(
child: Text(
"Tidak Hadir",
style: TextStyle(
fontSize: 14,
color: Colors.red,
),
),
onPressed: () => Navigator.pop(context, 3),
),
],
);
4. Terakhir tambahkan code berikut didalam onPressed, ini berfungsi sebagai input pada Debug Console
switch (number) {
case 1:
print('Hadir');
break;
case 2:
print('Sakit');
break;
case 3:
print('Tidak Hadir');
break;
}
Berikut adalah hasil dari penggunaan widget Cupertino Alert Dialog


Berikut hasil input pada debug console jika alert dialog di klik

Selamat Mencoba sobat Flutter 🙂